This is a sample flutter onboarding plugin you use to attract first-time users when they land on your page, hence the name onboarding. You can implement this widget anyhow you want in your app, by managing its top-level state to show the widget to users at the appropriate time. There are also many parameters that enable you to design this widget to your liking.
sdk: ">=2.7.0 <3.0.0"
flutter: ">=1.17.0 <2.0.0"
To start using this widget, you will need to first import the package inside your project following the installation guide found on peb.dev/packages/onboarding.
dependencies:
onboarding: ^1.0.5$ flutter pub get
To use this widget,
import 'package:onboarding/onboarding.dart';inside your dart file- Follow the example found at the
main.dartof the example and implement it in your app.
class MyApp extends StatelessWidget {
final onboardingPagesList = [
PageModel(
assetPath: 'assets/images/facebook.png',
title: 'SECURED BACKUP',
info: "Keep your files in closed safe so you can't lose them",
),
PageModel(
assetPath: 'assets/images/twitter.png',
title: 'CHANGE AND RISE',
info: 'Give others access to any file or folder you choose',
),
PageModel(
assetPath: 'assets/images/instagram.png',
title: 'EASY ACCESS',
info: 'Reach your files anytime from any devices anywhere',
),
PageModel(
assetPath: 'assets/images/twitter.png',
title: 'SHARE AND SHINE',
info: 'Give others access to any file or folder you choose',
),
];
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Onboarding(
proceedButtonStyle: ProceedButtonStyle(
proceedButtonRoute: (context) {
return Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => Container(),
),
(route) => false,
);
},
proceedButtonText: 'Sign up',
),
pages: onboardingPagesList,
indicator: Indicator(
indicatorDesign: IndicatorDesign.line(
lineDesign: LineDesign(
lineType: DesignType.line_uniform,
),
),
),
//-------------Other properties--------------
//background,
//pagesContentPadding,
//pagesImageColor,
//titleAndInfoPadding,
//titleAndInfoHeight,
//titleStyle,
//infoStyle,
//infoPadding,
//footerPadding,
//skipButtonStyle,
),
);
}
}
Sample examples of using different indicator types
Onboarding(
proceedButtonStyle: ProceedButtonStyle(
proceedButtonRoute: (context) {
return Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => Container(),
),
(route) => false,
);
},
proceedButtonText: 'Sign Up'),
pages: onboardingPagesList,
indicator: Indicator(
indicatorDesign: IndicatorDesign.line(
lineDesign: LineDesign(
lineType: DesignType.line_uniform,
),
),
),
)
Onboarding(
proceedButtonStyle: ProceedButtonStyle(
proceedButtonRoute: (context) {
return Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => Container(),
),
(route) => false,
);
},
proceedButtonText: 'Sign Up'),
pages: onboardingPagesList,
indicator: Indicator(
indicatorDesign: IndicatorDesign.line(
lineDesign: LineDesign(
lineType: DesignType.line_nonuniform,
),
),
),
)
Onboarding(
proceedButtonStyle: ProceedButtonStyle(
proceedButtonRoute: (context) {
return Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => Container(),
),
(route) => false,
);
},
proceedButtonText: 'Sign Up'),
pages: onboardingPagesList,
indicator: Indicator(
indicatorDesign: IndicatorDesign.polygon(
polygonDesign: PolygonDesign(
polygon: DesignType.polygon_arrow,
),
),
),
)
Onboarding(
proceedButtonStyle: ProceedButtonStyle(
proceedButtonRoute: (context) {
return Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => Container(),
),
(route) => false,
);
},
proceedButtonText: 'Sign Up'),
pages: onboardingPagesList,
indicator: Indicator(
indicatorDesign: IndicatorDesign.polygon(
polygonDesign: PolygonDesign(
polygon: DesignType.polygon_circle,
),
),
),
)
Onboarding(
proceedButtonStyle: ProceedButtonStyle(
proceedButtonRoute: (context) {
return Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => Container(),
),
(route) => false,
);
},
proceedButtonText: 'Sign Up'),
pages: onboardingPagesList,
indicator: Indicator(
indicatorDesign: IndicatorDesign.polygon(
polygonDesign: PolygonDesign(
polygon: DesignType.polygon_diamond,
),
),
),
)
Onboarding(
proceedButtonStyle: ProceedButtonStyle(
proceedButtonRoute: (context) {
return Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => Container(),
),
(route) => false,
);
},
proceedButtonText: 'Sign Up'),
pages: onboardingPagesList,
indicator: Indicator(
indicatorDesign: IndicatorDesign.polygon(
polygonDesign: PolygonDesign(
polygon: DesignType.polygon_pentagon,
),
),
),
)
Onboarding(
proceedButtonStyle: ProceedButtonStyle(
proceedButtonRoute: (context) {
return Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => Container(),
),
(route) => false,
);
},
proceedButtonText: 'Sign Up'),
pages: onboardingPagesList,
indicator: Indicator(
indicatorDesign: IndicatorDesign.polygon(
polygonDesign: PolygonDesign(
polygon: DesignType.polygon_square,
polygonSpacer: 14.0
),
),
),
)
