custom_showcase_view

Description:

custom showcase view

The CustomShowCaseView Flutter package allows you to create custom showcase views with flexible designs for highlighting specific widgets and providing informative popups. With this package, you have the freedom to design your own showcase views according to your requirements.
Features #

Highlight and showcase specific widgets in your app.
Customize the design of the showcase view.
Display a popup above or below the highlighted widget.
Provide information and details about the widget.
Control the visibility of the showcase view.
Specify the dimensions of the showcase view.
Customize the background color and transparency.
Enable or disable background clicks outside the popup.
Use a triangular pointer indicator to highlight the widget.

Getting started #
To start using the CustomShowCaseView package, make sure you have Flutter installed. You can find more information on how to install Flutter at flutter.dev. Once Flutter is set up, you can add the package to your project by adding it as a dependency in your pubspec.yaml file:
dependencies:
custom_show_case_view: ^0.0.1
For more information on how to use packages in Flutter, refer to the Flutter Packages Documentation.
Usage #
Here's an example of how you can use the CustomShowCaseView package in your Flutter app:
import 'package:flutter/material.dart';
import 'package:custom_show_case_view/custom_show_case_view.dart';

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
bool show = true;

final GlobalKey<State<StatefulWidget>> widgetKeyOne = GlobalKey();

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Custom Showcase View Example'),
),
body: CustomShowCaseView(
globalKey: widgetKeyOne,
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 a 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: widgetKeyOne,
),
),
),
);
}
}
copied to clipboard
For more detailed examples, check the /example folder in the CustomShowCaseView GitHub repository.
Additional information #
Feel free to explore and customize the CustomShowCaseView package to suit your needs. We hope this package enhances your app's user experience by providing interactive and informative showcases for your widgets.