ky_guide 0.1.0

ky_guide: ^0.1.0 copied to clipboard

example/main.dart

import 'package:flutter/material.dart';
import 'package:ky_guide/guide_controller.dart';
import 'package:ky_guide/guide_step.dart';
import 'package:ky_guide/guide_target.dart';

/// Example implementation showing how to use the onboarding system.
///
/// This example demonstrates:
/// - How to wrap existing widgets with GuideTarget
/// - How to create and configure onboarding steps
/// - How to start the onboarding process
/// - How to handle onboarding controller lifecycle
///
/// Copy and modify this example to integrate onboarding into your own app.
class GuideExample extends StatefulWidget {
  const GuideExample({super.key});

  @override
  State<GuideExample> createState() => _GuideExampleState();
}

class _GuideExampleState extends State<GuideExample> {
  /// The controller that manages the onboarding flow.
  final GuideController _guideController = GuideController();

  // GlobalKeys for targeting specific widgets during onboarding
  /// Key for the main menu (overflow menu in app bar).
  final GlobalKey _menuKey = GlobalKey();

  /// Key for the floating action button.
  final GlobalKey _fabKey = GlobalKey();

  /// Key for the drawer menu button.
  final GlobalKey _drawerKey = GlobalKey();

  /// Key for the search button.
  final GlobalKey _searchKey = GlobalKey();

  @override
  void initState() {
    super.initState();

    // Start onboarding after the first frame is rendered
    // This ensures all widgets are built and have valid RenderBoxes
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _startGuide();
    });
  }

  /// Configures and starts the onboarding process.
  ///
  /// This method creates the onboarding steps and starts the flow.
  /// Modify this method to customize your onboarding experience.
  void _startGuide() {
    // Define the onboarding steps
    // Each step targets a specific widget and provides contextual information
    final steps = [
      GuideStep(
        targetKey: _menuKey,
        title: 'Welcome to the App!',
        description:
            'This is your main menu. Tap here to access different sections of the app.',
      ),
      GuideStep(
        targetKey: _searchKey,
        title: 'Search Feature',
        description:
            'Use this search button to quickly find what you\'re looking for.',
        // Example of custom content with styling
        customContent: Container(
          padding: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: Colors.blue.shade50,
            borderRadius: BorderRadius.circular(8),
          ),
          child: const Text(
            '💡 Pro tip: You can also use voice search!',
            style: TextStyle(fontSize: 12, color: Colors.blue),
          ),
        ),
      ),
      GuideStep(
        targetKey: _fabKey,
        title: 'Create New Items',
        description:
            'Tap this floating action button to create new content or start a new task.',
        // Example of custom background color
        backgroundColor: Colors.blue.shade50,
      ),
      GuideStep(
        targetKey: _drawerKey,
        title: 'Navigation Menu',
        description:
            'Access your profile, settings, and other options from this menu.',
      ),
    ];

    // Start the onboarding with the defined steps
    _guideController.startGuide(steps);
  }

  @override
  Widget build(BuildContext context) {
    // Use AnimatedBuilder to rebuild when onboarding state changes
    return AnimatedBuilder(
      animation: _guideController,
      builder: (context, child) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('Guide Demo'),
            // Wrap the drawer button with GuideTarget
            leading: GuideTarget(
              onboardingKey: _drawerKey,
              child: Builder(
                builder: (context) => IconButton(
                  icon: const Icon(Icons.menu),
                  onPressed: () => Scaffold.of(context).openDrawer(),
                ),
              ),
            ),
            actions: [
              // Wrap the search button with GuideTarget
              GuideTarget(
                onboardingKey: _searchKey,
                child: IconButton(
                  icon: const Icon(Icons.search),
                  onPressed: () {
                    // Your search functionality here
                  },
                ),
              ),
              // Wrap the overflow menu with GuideTarget
              GuideTarget(
                onboardingKey: _menuKey,
                child: PopupMenuButton<String>(
                  onSelected: (value) {
                    // Handle menu selection
                  },
                  itemBuilder: (context) => [
                    const PopupMenuItem(
                      value: 'settings',
                      child: Text('Settings'),
                    ),
                    const PopupMenuItem(
                      value: 'profile',
                      child: Text('Profile'),
                    ),
                    const PopupMenuItem(value: 'help', child: Text('Help')),
                  ],
                ),
              ),
            ],
          ),
          drawer: Drawer(
            child: ListView(
              children: [
                const DrawerHeader(
                  decoration: BoxDecoration(color: Colors.blue),
                  child: Text(
                    'Menu',
                    style: TextStyle(color: Colors.white, fontSize: 24),
                  ),
                ),
                ListTile(title: const Text('Home'), onTap: () {}),
                ListTile(title: const Text('Profile'), onTap: () {}),
                ListTile(title: const Text('Settings'), onTap: () {}),
              ],
            ),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('Welcome to the app!'),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: _startGuide,
                  child: const Text('Restart Guide'),
                ),
              ],
            ),
          ),
          // Wrap the FAB with GuideTarget
          floatingActionButton: GuideTarget(
            onboardingKey: _fabKey,
            child: FloatingActionButton(
              onPressed: () {
                // Your FAB functionality here
              },
              child: const Icon(Icons.add),
            ),
          ),
        );
      },
    );
  }

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed
    _guideController.dispose();
    super.dispose();
  }
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Guide Example',
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: true),
      home: GuideExample(),
    );
  }
}