Home > Net >  transition between pages using indicators in the flutter
transition between pages using indicators in the flutter

Time:11-03

I have 2 pages, on one of them I have placed the code which displays indexers, I want to swipe on indexes to pass between pages. I can't figure out how to set it up. I will be grateful for your help.

 Container(
               child: SmoothPageIndicator(
                 controller: _pageController,
                 count:  _pages.length,
                 effect: JumpingDotEffect(
                   dotHeight: 16,
                   dotWidth: 16,
                   jumpScale: .7,
                   verticalOffset: 15,
                ),
                   onDotClicked: _onchanged
              ),
            ),
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe> List of pages:

  List<Widget> _pages = [
    Form_scan(),
    Form_ttn()
  ];
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Image indecators enter image description here

I will be grateful if someone helps me to go from the first page to the second (swipe right) with these indicators

CodePudding user response:

Try out below code:-

import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:sizer/sizer.dart';
import 'package:livekeeping/Common/Constant.dart';
import 'package:livekeeping/Common/IconNames.dart';
import 'package:livekeeping/Common/Reusable.dart';
import 'package:livekeeping/Controller/Authentication/LoginWithOtpScreen.dart';
import 'package:lottie/lottie.dart';

class Onboarding extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return OnboardingState();
  }
}

class OnboardingState extends State<Onboarding> {
  int _current = 0;

 

  Widget widgetChange = firstWidget();

  var i = 0;

  @override
  void initState() {
    super.initState();
  
  }

  @override
  void dispose() {
 
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.maxFinite,
        width: double.maxFinite,
        child: Stack(
          children: <Widget>[
            PageView.builder(
              onPageChanged: (pageIndex) {
                setState(() {
                  _current = pageIndex;
                });
              },
              itemCount: 4,
              itemBuilder: (context, index) {
                if (index == 0) {
                  return firstWidget();
                } else if (index == 1) {
                  return secondWidget();
                } else if (index == 2) {
                  return thirdWidget();
                } else {
                  return fourthWidget();
                }
              },
            ),
            Positioned(
              bottom: 120,
              left: 0,
              right: 0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [1, 2, 3, 4].map((url) {
                  int index = [1, 2, 3, 4].indexOf(url);
                  return Container(
                    width: 8.0,
                    height: 8.0,
                    margin:
                        EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: _current == index
                          ? Color.fromRGBO(0, 0, 0, 0.9)
                          : Color.fromRGBO(0, 0, 0, 0.4),
                    ),
                  );
                }).toList(),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(bottom: 30.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  ButtonTheme(
                    height: 45,
                    minWidth: 150,
                    child: new Center(
                        child: RaisedButton(
                      color: AppTextStyle.mainThemeColor(),
                      onPressed: () {
                       
                        Navigator.of(context).pushAndRemoveUntil(
                            CupertinoPageRoute(
                                builder: (context) => Login()),
                            (route) => false);
                        
                      },
                      child: new Text(
                        "Get Started".toUpperCase(),
                        style: GoogleFonts.openSans(
                          color: Colors.white,
                          fontSize: 15,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(50)),
                    )),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class firstWidget extends StatefulWidget {
  @override
  _firstWidgetState createState() => _firstWidgetState();
}

class _firstWidgetState extends State<firstWidget>{
  

  @override
  void initState() {
    super.initState();
  
  }

  

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          height: double.maxFinite,       
          width: double.maxFinite,
          child: Image.asset(
           SplashBG,        // You can put your Background image as well
            fit: BoxFit.cover,
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
               
                Container(
                  height: 45.0.h,
                  width: 75.0.w,
                  child: Image.asset(Icon1),
                ),
              
              ],
            ),
          ],
        ),
      ],
    );
  }
}

class secondWidget extends StatefulWidget {
  @override
  _secondWidgetState createState() => _secondWidgetState();
}

class _secondWidgetState extends State<secondWidget>{
 

  @override
  void initState() {
    super.initState();
    }

 

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          height: double.maxFinite,
          width: double.maxFinite,
          child: Image.asset(
            SplashBG,  // You can put your Background image as well
            fit: BoxFit.cover,
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                
                Container(
                  height: 45.0.h,
                  width: 75.0.w,
                  child: Image.asset(Icon2),
                ),
               
              ],
            ),
          ],
        ),
      ],
    );
  }
}

class thirdWidget extends StatefulWidget {
  @override
  _thirdWidgetState createState() => _thirdWidgetState();
}

class _thirdWidgetState extends State<thirdWidget> {
 

  @override
  void initState() {
    super.initState();
   
  }



  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          height: double.maxFinite,
          width: double.maxFinite,
          child: Image.asset(
            SplashBG,  // You can put your Background image as well
            fit: BoxFit.cover,
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                
                Container(
                  height: 45.0.h,
                  width: 75.0.w,
                  child: Image.asset(Icon3),
                ),
                
              ],
            ),
          ],
        ),
      ],
    );
  }
}

class fourthWidget extends StatefulWidget {
  @override
  _fourthWidgetState createState() => _fourthWidgetState();
}

class _fourthWidgetState extends State<fourthWidget> {
  

  @override
  void initState() {
    super.initState();
    
  }

  

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          height: double.maxFinite,
          width: double.maxFinite,
          child: Image.asset(
            SplashBG,  // You can put your Background image as well
            fit: BoxFit.cover,
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
               
               
                Container(
                  height: 45.0.h,
                  width: 75.0.w,
                  child: Image.asset(Iconn4),
                ),
              
              ],
            ),
          ],
        ),
      ],
    );
  }
}

CodePudding user response:

use PageView, :

PageView(
        controller: _pageController,
        children: [
          Form_scan(),
          Form_ttn()
        ],
      ),

make a PageController :

final PageController _pageController = PageController();

onDotClicked: _onchanged

void _onchanged(){
_pageController.animateToPage(
          indexHalaman,
          duration: Duration(milliseconds: 500),
          curve: Curves.fastOutSlowIn
      );
}

indexHalaman = page index, if you have 2 widget on pageView children then first page index = 0, next index page = 1, if you use stateful widget, dont forget to use setState, or maybe you can use bloc pattern for this

  • Related