on-boarding-screen-flutter.dart

import 'package:deliveryboy/data/pref/Keys.dart';
import 'package:deliveryboy/data/pref/PreferenceManager.dart';
import 'package:deliveryboy/ui/components/item_view/item_on_borading.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'auth/login/login_screen.dart';

class OnboardingScreen extends StatefulWidget {
  static const route = "/on-boarding-screen";

  @override
  _OnboardingScreenState createState() => _OnboardingScreenState();
}

class _OnboardingScreenState extends State<OnboardingScreen> {
  final int _numPages = 3;
  final PageController _pageController = PageController(initialPage: 0);
  int _currentPage = 0;

  List<Widget> _buildPageIndicator() {
    List<Widget> list = [];
    for (int i = 0; i < _numPages; i++) {
      list.add(i == _currentPage ? _indicator(true) : _indicator(false));
    }
    return list;
  }

  _nextBtnDidTapped() {
    _pageController.nextPage(
      duration: Duration(milliseconds: 500),
      curve: Curves.ease,
    );
  }

  _doneBtnDidTapped() async {
    await PreferenceManager.sharedInstance
        .putBoolean(Keys.IS_FIRST_TIME.toString(), false);
    Navigator.pushReplacementNamed(context, LoginScreen.route);
    // Navigate to Login Screen
  }

  Widget _indicator(bool isActive) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 150),
      margin: EdgeInsets.symmetric(horizontal: 8.0),
      height: 8.0,
      width: isActive ? 24.0 : 10.0,
      decoration: BoxDecoration(
        color: isActive ? Colors.white : Color(0xFF7B51D3),
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final kTitleStyle = TextStyle(
      color: Colors.white,
      fontFamily: 'CM Sans Serif',
      fontSize: 24.0,
      height: 1.5,
    );

    final kSubtitleStyle = TextStyle(
      color: Colors.white,
      fontSize: 16.0,
      height: 1.2,
    );

    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.light,
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: [0.1, 0.4, 0.7, 0.9],
              colors: [
                Color(0xFF3594DD),
                Color(0xFF4563DB),
                Color(0xFF5036D5),
                Color(0xFF5B16D0),
              ],
            ),
          ),
          child: Padding(
            padding: EdgeInsets.only(top: 80, bottom: 30, left: 10, right: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Container(
                  height: MediaQuery.of(context).size.height - 200,
                  child: PageView(
                    physics: ClampingScrollPhysics(),
                    controller: _pageController,
                    onPageChanged: (int page) {
                      setState(() {
                        _currentPage = page;
                      });
                    },
                    children: <Widget>[
                      ItemOnBoarding(
                          title: "Connect people around the world",
                          subTitle:
                              "Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor incididunt ut labore et.",
                          img: "assets/images/mask-0.png"),
                      ItemOnBoarding(
                          title: "Connect people around the world",
                          subTitle:
                              "Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor incididunt ut labore et.",
                          img: "assets/images/mask-0.png"),
                      ItemOnBoarding(
                          title: "Connect people around the world",
                          subTitle:
                              "Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod tempor incididunt ut labore et.",
                          img: "assets/images/mask-0.png"),
                    ],
                  ),
                ),
                Spacer(),
                Container(
                  height: 20,
                  child: Stack(
                    children: [
                      Center(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: _buildPageIndicator(),
                        ),
                      ),
                      Positioned(
                          right: 0,
                          top: 0,
                          bottom: 0,
                          child: Center(
                              child: Padding(
                            padding: const EdgeInsets.only(right: 20),
                            child: _currentPage != _numPages - 1
                                ? GestureDetector(
                                    onTap: _nextBtnDidTapped,
                                    child: Text(
                                      "Next",
                                      style: TextStyle(
                                          fontSize: 18, color: Colors.white),
                                    ),
                                  )
                                : GestureDetector(
                                    onTap: _doneBtnDidTapped,
                                    child: Text(
                                      "Done",
                                      style: TextStyle(
                                          fontSize: 18, color: Colors.white),
                                    ),
                                  ),
                          )))
                    ],
                  ),
                ),
                // Column(
                //   children: [
                //     Row(
                //       mainAxisAlignment: MainAxisAlignment.center,
                //       children: _buildPageIndicator(),
                //     ),
                //     SizedBox(height: 20,),
                //     Container(
                //       height: 40.0,
                //       width: double.infinity,
                //       color: Colors.white,
                //       child: GestureDetector(
                //         onTap: () => print('Get started'),
                //         child: Center(
                //           child: Padding(
                //             padding: EdgeInsets.only(bottom: 0.0),
                //             child: Text(
                //               _currentPage == _numPages - 1
                //                   ? 'Get started'
                //                   : "Next",
                //               style: TextStyle(
                //                 color: Color(0xFF5B16D0),
                //                 fontSize: 20.0,
                //                 fontWeight: FontWeight.bold,
                //               ),
                //             ),
                //           ),
                //         ),
                //       ),
                //     )
                //   ],
                // )
              ],
            ),
          ),
        ),
      ),
    );
  }
}


/// Item onboarding screen
import 'package:flutter/material.dart';

class ItemOnBoarding extends StatelessWidget {
  String title, subTitle, img;

  ItemOnBoarding({this.title, this.subTitle, this.img});

  @override
  Widget build(BuildContext context) {
    final kTitleStyle = TextStyle(
      color: Colors.white,
      fontFamily: 'CM Sans Serif',
      fontSize: 24.0,
      height: 1.5,
    );

    final kSubtitleStyle = TextStyle(
      color: Colors.white,
      fontSize: 15.0,
      height: 1.2,
    );

    return Padding(
      padding: EdgeInsets.all(24.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Center(
            child: Image(
              image: AssetImage(
                img,
              ),
              height: 240.0,
              width: 240.0,
              fit: BoxFit.cover,
            ),
          ),
          SizedBox(height: 20.0),
          Text(
            title,
            maxLines: 2,
            style: kTitleStyle,
            textAlign: TextAlign.center,
          ),
          SizedBox(height: 15.0),
          Text(
            subTitle,
            maxLines: 3,
            style: kSubtitleStyle,
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}