Home > Mobile >  onboard and flashscreen implementations on flutter
onboard and flashscreen implementations on flutter

Time:01-31

How to impementations onboard and flashscreens? if onboard for new installer but flashscreens for open app

const OnBoard({Key? key}) : super(key: key);

  @override
  State<OnBoard> createState() => _OnBoardState();
}

class _OnBoardState extends State<OnBoard> {
  int currentIndex = 0;
  late PageController _pageController;

  @override
  void initState() {
    _pageController = PageController(initialPage: 0);
    super.initState();
  }

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

CodePudding user response:

For onboarding, use this package.

https://pub.dev/packages/onboarding

Here's a sample code from package.

class MyApp extends StatelessWidget {
  final onboardingPagesList = [
      PageModel(
        widget: Column(
          children: [
            Container(
                padding: EdgeInsets.only(bottom: 45.0),
                child: Image.asset('assets/images/facebook.png',
                    color: pageImageColor)),
            Container(
                width: double.infinity,
                child: Text('SECURED BACKUP', style: pageTitleStyle)),
            Container(
              width: double.infinity,
              child: Text(
                'Keep your files in closed safe so you can\'t lose them',
                style: pageInfoStyle,
              ),
            ),
          ],
        ),
      ),
      PageModel(
        widget: Column(
          children: [
            Image.asset('assets/images/twitter.png', color: pageImageColor),
            Text('CHANGE AND RISE', style: pageTitleStyle),
            Text(
              'Give others access to any file or folder you choose',
              style: pageInfoStyle,
            )
          ],
        ),
      ),
      PageModel(
        widget: Column(
          children: [
            Image.asset('assets/images/instagram.png', color: pageImageColor),
            Text('EASY ACCESS', style: pageTitleStyle),
            Text(
              'Reach your files anytime from any devices anywhere',
              style: pageInfoStyle,
            ),
          ],
        ),
      ),
  ];
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Onboarding(
        proceedButtonStyle: ProceedButtonStyle(
            proceedButtonRoute: (context) {
              return Navigator.pushAndRemoveUntil(
                context,
                MaterialPageRoute(
                  builder: (context) => Container(),
                ),
                (route) => false,
              );
            },
        ),
        isSkippable = true,
        pages: onboardingPagesList,
        indicator: Indicator(
          indicatorDesign: IndicatorDesign.line(
            lineDesign: LineDesign(
              lineType: DesignType.line_uniform,
            ),
          ),
        ),
        //-------------Other properties--------------
        //Color background,
        //EdgeInsets pagesContentPadding
        //EdgeInsets titleAndInfoPadding
        //EdgeInsets footerPadding
        //SkipButtonStyle skipButtonStyle
      ),
    );
  }
}

For Splash screen, use this package:

https://pub.dev/packages/flutter_native_splash

Let me know if you have any doubts.

  •  Tags:  
  • Related