Create an Onboarding Page Indicator in 3 Minutes in Flutter.

Pinkesh Darji
Jun 14 · 4 min read
Image Credits: https://www.vecteezy.com Design Credits: https://bit.ly/2VgXF54

UI Structure

Stack(
alignment: AlignmentDirectional.bottomCenter,
children: <Widget>[
PageView.builder(...),
Stack(...),
Visibility(...)
],
)
  • Stack() to contain a number of page indicators.
  • Visibility() to hide and show ‘Arrow’ button.

1) PageView.builder();

Creates horizontal/vertical slidable widget.

final List<Widget> introWidgetsList = <Widget>[
Screen1(...),
Screen2(...),
Screen3(...),
];
PageView.builder(
physics: ClampingScrollPhysics(),
itemCount: introWidgetsList.length,
onPageChanged: (int page) {
getChangedPageAndMoveBar(page);
},
controller: controller,
itemBuilder: (context, index) {
return introWidgetsList[index];
},
)

2) Stack();

I have used stack but you can use any widget to show page indicators.

Stack(
alignment: AlignmentDirectional.topStart,
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 35),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
for (int i = 0; i < introWidgetsList.length; i++)
if (i == currentPageValue) ...[circleBar(true)] else
circleBar(false),
],
),
),
],
)
Widget circleBar(bool isActive) {
return AnimatedContainer(
duration: Duration(milliseconds: 150),
margin: EdgeInsets.symmetric(horizontal: 8),
height: isActive ? 12 : 8,
width: isActive ? 12 : 8,
decoration: BoxDecoration(
color: isActive ? kOrange : klightGrey,
borderRadius: BorderRadius.all(Radius.circular(12))),
);
}

3) Visibility;

This widget controls the visibility of its child, and in our case its Floating action button.

Visibility(
visible: currentPageValue == introWidgetsList.length - 1
? true
: false,
child: FloatingActionButton(
onPressed: () {
},
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(26))),
child: Icon(Icons.arrow_forward),
),
)
void getChangedPageAndMoveBar(int page) {
currentPageValue = page;
setState(() {});
}

That’s it.

I hope you have understood the basic idea of implementing this.

Aubergine Solutions

Among the World’s Top 50 UX Agencies. We’re a team of UX Designers and IT Engineers. We balance our madness and method. To know more about us visit www.auberginesolutions.com

Pinkesh Darji

Written by

Passionate Flutter Dev | Google Certified Associate Android Developer | Cross-platform App Dev | Kotlin Android Dev https://github.com/pinkeshdarji

Aubergine Solutions

Among the World’s Top 50 UX Agencies. We’re a team of UX Designers and IT Engineers. We balance our madness and method. To know more about us visit www.auberginesolutions.com