OnBoarding Screen Without depedency
bool isLastPage = false; final controller = PageController(); int currentIndex = 0;
Body:
body: Container(
padding: EdgeInsets.only(bottom: 80.0),
child: PageView(
controller: controller,
onPageChanged:(index){
setState(() {
currentIndex = index;
isLastPage = index == 4;
});
},
children: [
Container(
color: Colors.white,
child: Center(child: Text("Page1", style: TextStyle(color: Colors.black, fontSize: 50.0),)),
),
Container(
color: Colors.blue,
child: Center(child: Text("Page2", style: TextStyle(color: Colors.black, fontSize: 50.0),)),
),
Container(
color: Colors.yellowAccent,
child: Center(child: Text("Page3", style: TextStyle(color: Colors.black, fontSize: 50.0),)),
),
Container(
color: Colors.blueAccent,
child: Center(child: Text("Page4", style: TextStyle(color: Colors.black, fontSize: 50.0),)),
),
Container(
color: Colors.redAccent,
child: Center(child: Text("Page5", style: TextStyle(color: Colors.black, fontSize: 50.0),)),
),
],
),
),
bottomSheet: isLastPage ? TextButton(onPressed: (){},
child: Text("GetStarted", style: TextStyle(color: Colors.white),),
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
),
foregroundColor: Colors.blue,
backgroundColor: Colors.green,
minimumSize: Size.fromHeight(80.0)
),
):
Container(
padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: (){},
child: Text("Skip", style: TextStyle(color: Colors.green),),
),
Row(
mainAxisAlignment:
MainAxisAlignment
.center,
children: indicators(
5,
currentIndex)),
GestureDetector(
onTap: (){
controller.nextPage(duration: Duration(milliseconds: 500), curve: Curves.easeInOut);
},
child: Text("Next", style: TextStyle(color: Colors.green),)),
],
),
),
Indicators Style:
List<Widget> indicators(imagesLength, currentIndex) {
return List<Widget>.generate(imagesLength, (index) {
return Container(
margin: const EdgeInsets.all(3),
width: 10,
height: 10,
decoration: BoxDecoration(
color: currentIndex == index ? Colors.indigo : Colors.grey, shape: BoxShape.circle),
);
});
}
