custom_showcase_view 0.0.3

The CustomShowCaseView Flutter package enables customizable showcase views to highlight widgets and display informative popups. Design engaging user experiences by customizing dimensions, behavior, an [...]

example/example.dart

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey globalWidgetOne = GlobalKey();
  bool show = true;
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Hello"),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CustomShowcaseView(
              show: show,
              height: 100,
              width: 300,
              pointerIndicatorColor: Colors.blue,
              overlayBackground: Colors.black.withOpacity(0.25),
              enableBackgroundClick: false,
              customShowCase: InkWell(
                onTap: () {
                  setState(
                    () {
                      show = false;
                    },
                  );
                },
                child: Container(
                  height: 100,
                  width: 300,
                  padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
                  decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(12)),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      const Text(
                        "This is Custom Container",
                        style: TextStyle(color: Colors.white, fontSize: 14),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: const [
                          Text(
                            "Done",
                            style: TextStyle(color: Colors.white, fontSize: 14),
                          ),
                          Expanded(child: SizedBox()),
                          Icon(
                            Icons.close,
                            color: Colors.white,
                          ),
                          SizedBox(
                            width: 12,
                          ),
                          Icon(
                            Icons.done,
                            color: Colors.white,
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              ),
              child: Text(
                "Custom Showcase",
                key: globalWidgetOne,
              ),
            ),
            const SizedBox(
              height: 12,
            ),
            InkWell(
              onTap: () {
                setState(() {
                  flag = !flag;
                  show = true;
                });
              },
              child: Text(
                "Click Me",
                style: TextStyle(color: flag ? Colors.red : Colors.brown),
              ),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}