import 'package:flutter/material.dart';
import 'package:showcaseview/showcaseview.dart';

class FullPage extends StatefulWidget {
  const FullPage({Key? key}) : super(key: key);

  @override
  State<FullPage> createState() => _FullPageState();
}

class _FullPageState extends State<FullPage> {
  final keyOne = GlobalKey();
  final keyTwo = GlobalKey();
  final keyThere = GlobalKey();
  final keyFour = GlobalKey();

  @override
  void initState() {
    super.initState();
    
    WidgetsBinding.instance.addPostFrameCallback(
        (timeStamp) => ShowCaseWidget.of(context)!.startShowCase([
              keyOne,
              keyTwo,
              keyThere,
              keyFour,
            ]));
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          // you can use this
          Showcase(
              key: keyOne,
              description: 'This is search',
              descTextStyle: const TextStyle(
                  color: Colors.white, fontWeight: FontWeight.bold),
              contentPadding: const EdgeInsets.all(10),
              showcaseBackgroundColor: Colors.red,
              child:
                  IconButton(onPressed: () {}, icon: const Icon(Icons.search))),
          // or use this .
          CustomShowCase(
              title: 'this is home',
              keyGlobal: keyTwo,
              child: IconButton(
                  onPressed: () {
                    print('home');
                  },
                  icon: const Icon(Icons.home))),
        ],
      ),
      floatingActionButton: CustomShowCase(
          title: 'this is floatingActionButton',
          keyGlobal: keyThere,
          child: FloatingActionButton(
              onPressed: () {}, child: const Icon(Icons.abc))),
      body: Column(
        children: [
          CustomShowCase(
              title: 'this is Container',
              keyGlobal: keyFour,
              child: Container(
                width: double.infinity,
                height: 100,
                color: Colors.orange,
              ))
        ],
      ),
    );
  }
}

// custom widget
class CustomShowCase extends StatelessWidget {
  final Widget child;
  final String title;
  final GlobalKey keyGlobal;

  const CustomShowCase({
    Key? key,
    required this.title,
    required this.keyGlobal,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) => Showcase(
        // keys
        key: keyGlobal,
        description: title,
        // style text .
        descTextStyle:
            const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        // padding
        contentPadding: const EdgeInsets.all(15),
        // animation
        disableAnimation: false,
        // color 
        showcaseBackgroundColor: Colors.red,
        // background screen
        overlayColor: Colors.black,
        // Arrow
        showArrow: true,
        // padding item
        overlayPadding: const EdgeInsets.all(10),
        // Opacity
        overlayOpacity: 0.7,
        child: child,
      );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: ShowCaseWidget(builder:Builder(builder:(_)=> const FullPage()),
      autoPlay: true,
        autoPlayDelay: const Duration(seconds: 3),
        onFinish:()=> print('Done'),
        onComplete: (index,key)=> print(' $index is finish'),
      ),
    );
  }
}