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


Sign In or Register to comment.