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), ); }); }