How it runs?
- Clone the URL in your Android Studio
- Write OnboardingScreen1() in the child(home) of myApp class and run
- Write OnboardingScreen2() in the child(home) of myApp class and run
- Write OnboardingScreen3() in the child(home) of myApp class and run
- Write OnboardingScreen4() in the child(home) of myApp class and run
Page Layouts:
There are more than one layouts. I drawed layouts chart.
Indicator Animations:
Widget _indicator(bool isActive) {
return AnimatedContainer(
duration: Duration(milliseconds: 150),
margin: EdgeInsets.symmetric(horizontal: 8.0),
height: 8.0,
width: isActive ? 24.0 : 16.0,
decoration: BoxDecoration(
color: isActive ? Colors.white : Color.fromRGBO(137, 168, 73, 1),
borderRadius: BorderRadius.all(Radius.circular(12)),
),
);
}
Page Layouts:
There are more than one layouts. I drawed layouts chart.
Indicator Animations:
Widget _buildPageIndicator(bool isCurrentPage){
return Container(
margin: EdgeInsets.symmetric(horizontal: 2.0),
height: isCurrentPage ? 10.0 : 6.0,
width: isCurrentPage ? 10.0 : 6.0,
decoration: BoxDecoration(
color: isCurrentPage ? Color.fromRGBO(137, 168, 73, 1) : Color.fromRGBO(173, 216, 100, 1),
borderRadius: BorderRadius.circular(12),
),
);
}
Page Layouts:
There are more than one layouts. I drawed layouts chart.
Indicator Animations:
return AnimatedContainer(
duration: Duration(milliseconds: 300),
height: 10,
width: (index == _currentPage) ? 30 : 10,
margin:
EdgeInsets.symmetric(horizontal: 5, vertical: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: (index == _currentPage)
? Color.fromRGBO(137, 168, 73, 1)
: Color.fromRGBO(137, 168, 73, 1)));
Button Animations:
AnimatedContainer(
alignment: Alignment.center,
duration: Duration(milliseconds: 300),
height: 70,
width: (_currentPage == (_pages.length - 1)) ? 200 : 75,
decoration: BoxDecoration(
color: Color.fromRGBO(137, 168, 73, 1),
borderRadius: BorderRadius.circular(35)),
child: (_currentPage == (_pages.length - 1))
? Text(
"Get Started",
), )
: Icon(
Icons.navigate_next,
size: 50,
color: Colors.white,
), ), ),
Page Layouts:
There are more than one layouts. I drawed layouts chart.
Indicator Animations:
Widget _buildPageIndicator(bool isCurrentPage) {
return AnimatedContainer(
duration: Duration(milliseconds: 350),
margin: EdgeInsets.symmetric(horizontal: 5.0),
height: isCurrentPage ? 18.0 : 10.0,
width: isCurrentPage ? 18.0 : 10.0,
decoration: BoxDecoration(
color: isCurrentPage ? Colors.white : Colors.white54,
borderRadius: BorderRadius.all(Radius.circular(12)),
),
);
}
