Flutter OnBoarding Screens :
Flutter onboarding screens explain the app services to the user when installed for the first time, it provides a better user interface to go through the app features.
Some apps let the user’s know the way they function and explain the services to users through the images and proper descriptions on landing pages and these pages are shown only on app start up.
These onboarding screens are only visible only once when the app is installed and from next time only splash screen is shown.
We discuss how these screen to be designed in flutter platform for both android and iOS devices through a single code base flutter.
Sometimes you may also provide terms & conditions in these screens so as to make user know about them before using the app.
Flutter OnBoarding Screens Video Tutorial :
Refer to the tutorial below for further implementation details.
Flutter onboarding screens project structure :
This image depicts the onboarding screens project implementations.
main.dart :
Initialize void main() consider the default class MyApp().
void main() => runApp(MyApp());
Return MaterialApp() and here we have disabled banner by specifying false.
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: OnBoard(),
);
import 'package:flutter/material.dart';
import 'package:flutter_onboarding/onboard.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: OnBoard(),
);
}
}
widget.dart :
In this file we will be creating constants that can be used throughout the app by referencing them instead of writing code multiple times.
Declare TextStyle
final header = TextStyle( color: Colors.white, fontSize: 30.0, height: 1.5, ); final subheading = TextStyle( color: Colors.white, fontSize: 24.0, height: 1.5, );
Create a text widget to display the header and sub heading in the screens.
Widget getField(String headerTxt, String imageSrc, String descTxt) {
return Padding(
padding: EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
headerTxt,
style: header,
),
),
SizedBox(height: 30.0),
Center(
child: Image(
image: AssetImage(imageSrc),
height: 400.0,
width: 400.0,
),
),
SizedBox(height: 30.0),
Text(
descTxt,
style: subheading,
),
],
),
);
}
Create a button widget
Widget getButton(PageController _pageController) {
return FlatButton(
onPressed: () {
_pageController.nextPage(
duration: Duration(milliseconds: 300),
curve: Curves.easeIn,
);
},
child: Text(
'Next',
style: TextStyle(
color: Colors.white,
fontSize: 24.0,
),
),
);
}
Also widgets for box decorations and indicators
import 'package:flutter/material.dart';
final header = TextStyle(
color: Colors.white,
fontSize: 30.0,
height: 1.5,
);
final subheading = TextStyle(
color: Colors.white,
fontSize: 24.0,
height: 1.5,
);
Widget getField(String headerTxt, String imageSrc, String descTxt) {
return Padding(
padding: EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
headerTxt,
style: header,
),
),
SizedBox(height: 30.0),
Center(
child: Image(
image: AssetImage(imageSrc),
height: 400.0,
width: 400.0,
),
),
SizedBox(height: 30.0),
Text(
descTxt,
style: subheading,
)
],
),
);
}
Widget getButton(PageController _pageController) {
return FlatButton(
onPressed: () {
_pageController.nextPage(
duration: Duration(milliseconds: 300),
curve: Curves.easeIn,
);
},
child: Text(
'Next',
style: TextStyle(color: Colors.white, fontSize: 24.0),
),
);
}
BoxDecoration getDecoration() {
return BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.1, 0.4, 0.9],
colors: [Color(0xFF4d4d4d), Color(0xFFeeeceb), Color(0xFF4d4d4d)],
),
);
}
Widget indicator(bool isActive) {
return AnimatedContainer(
duration: Duration(milliseconds: 150),
margin: EdgeInsets.symmetric(horizontal: 8.0),
height: 8.0,
width
onboard.dart :
Add a build page indicator so that user can know the previous , current and next pages.
List<Widget> _buildPageIndicator() {
List<Widget> list = [];
for (int i = 0; i < _numPages; i++) {
list.add(
i == _currentPage ? indicator(true) : indicator(false)
);
}
return list;
}
Declare a pageview
PageView(
physics: ClampingScrollPhysics(),
controller: _pageController,
onPageChanged: (int page) {
setState(() {
_currentPage = page;
});
},
),
Add text fields using widgets class
children: <Widget>[
getField(
'Sign Up',
'assets/img1.png',
"Get the services to your doorstep"
),
getField(
'Services',
'assets/img2.png',
"Get the advantage of the services right from any place"
),
getField(
'Get Started',
'assets/img3.png',
"Start using our services right now !!!"
),
],
If current page is the last page then enable buttons on screen according to your app functionality.
if (_currentPage == _numPages - 1) {
return Expanded(
child: Align(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0),
child: Text(
'Skip',
style: TextStyle(
color: Colors.white,
fontSize: 24.0,
),
),
),
getButton(_pageController),
],
),
),
),
);
}
FullCode :
Here is a detailed guide on integrating a Flutter onboarding screen seamlessly into your app, providing users with an engaging introduction to your app’s features and functionalities.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_onboarding/widget.dart';
class OnBoard extends StatefulWidget {
@override
_OnBoardState createState() => _OnBoardState();
}
class _OnBoardState extends State<OnBoard> {
final int _numPages = 3;
final PageController _pageController = PageController(initialPage: 0);
int _currentPage = 0;
List<Widget> _buildPageIndicator() {
List<Widget> list = [];
for (int i = 0; i < _numPages; i++) {
list.add(i == _currentPage ? indicator(true) : indicator(false));
}
return list;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: Container(
decoration: getDecoration(),
child: Padding(
padding: EdgeInsets.symmetric(vertical: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
height: 650.0,
child: PageView(
physics: ClampingScrollPhysics(),
controller: _pageController,
onPageChanged: (int page) {
setState(() {
_currentPage = page;
});
},
children: <Widget>[
getField('Sign Up', 'assets/img1.png',
"Get the services to your doorstep"),
getField('Services', 'assets/img2.png',
"Get the advantage of the services right from any place"),
getField('Get Started', 'assets/img3.png',
"Start using our services right now !!!"),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _buildPageIndicator(),
),
_currentPage == _numPages - 1
? Expanded(
child: Align(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0),
child: Text(
'Skip',
style: TextStyle(
color: Colors.white,
fontSize: 24.0,
),
),
),
getButton(_pageController),
],
),
),
),
)
: Text(''),
],
),
),
),
),
);
}
}
Flutter onboarding screens output :
The following screens depicts the usage of flutter onboarding
If you are having any query in this tutorial on onboarding screens do let us know in comment section below.