# GF Intro Screen

# GF Intro Screen Info

GW Introscreens

# Usage

The simple code of a basic GFIntroScreen is as shown below.

PageController _pageController;
List<Widget> slideList;
int initialPage;

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

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: GFIntroScreen(
      color: Colors.blueGrey,
      slides: slides(),
      pageController: _pageController,
      currentIndex: inittialIndex,
      pageCount: 5,
      introScreenBottomNavigationBar: GFIntroScreenBottomNavigationBar(
        pageController: _pageController,
        pageCount: slideList.length,
        currentIndex: initialPage,
        onForwardButtonTap: () {
          _pageController.nextPage(
              duration: const Duration(milliseconds: 500),
              curve: Curves.linear);
        },
        onBackButtonTap: () {
          _pageController.previousPage(
              duration: const Duration(milliseconds: 500),
              curve: Curves.linear);
        },
        navigationBarColor: Colors.white,
        showDivider: false,
        inActiveColor: Colors.grey[200],
        activeColor: GFColors.SUCCESS,
      ),
    ),
  );
}

List<Widget> slides() {
  slideList = [
    Container(
      child: GFImageOverlay(
        width: MediaQuery.of(context).size.width,
        padding: EdgeInsets.all(16),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 70.0, left: 20),
              child: Text(
                'Welcome!',
                style: TextStyle(
                    color: Colors.white,
                    decoration: TextDecoration.none,
                    fontSize: 25),
              ),
            ),
          ],
        ),
        color: Colors.orange,
        image: const AssetImage('assets image here'),
        boxFit: BoxFit.cover,
        colorFilter:
            ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.darken),
        borderRadius: BorderRadius.circular(5),
      ),
    ),
    Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(0),
          image: DecorationImage(
            image: AssetImage('assets image here'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(0.2), BlendMode.darken),
          )),
    ),
    Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(0),
          image: DecorationImage(
            image: AssetImage('assets image here'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(0.2), BlendMode.darken),
          )),
    ),
    Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(0),
          image: DecorationImage(
            image: AssetImage('assets image here'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(0.2), BlendMode.darken),
          )),
    ),
  ];
  return slideList;
}

# GF IntroScreenBottomNavigationBar

GF IntroScreenBottomNavigationBar is a bottom bar sit at the bottom end of the screen. This component contains pagination and buttons for naviagtion. It has many features for customising the bottom navigation bar.

PageController _pageController;
int initialPage;

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

GFIntroScreen(
  color: Colors.blueGrey,
  slides: slides(),
  pageController: _pageController,
  currentIndex: inittialIndex,
  pageCount: 5,
  introScreenBottomNavigationBar: GFIntroScreenBottomNavigationBar(
    pageController: _pageController,
    pageCount: slideList.length,
    currentIndex: initialPage,
  ),
),  

# GF Intro Screen - Customised

GFIntroScreen and GFIntroScreenBottomNavigationBar components features allows user to create customized intro screen with or without BottomNavigationBar for the more flexible and interactive UI design.

PageController _pageController;
List<Widget> slideList;
int initialPage;

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

@override
Widget build(BuildContext context) => Scaffold(
      backgroundColor:  Colors.grey[200],
      body: SafeArea(
        child: GFIntroScreen(
          height: MediaQuery.of(context).size.height*0.7,
          width: MediaQuery.of(context).size.width * 0.9,
          color: Colors.grey[200],
          borderRadius: BorderRadius.circular(40),
          border: Border.all(color: Colors.grey[200]),
          slides: slides(),
          pageController: _pageController,
          introScreenBottomNavigationBar: GFIntroScreenBottomNavigationBar(
            pageController: _pageController,
            pageCount: slideList.length,
            currentIndex: initialPage,
            backButtonText: 'Previous',
            forwardButtonText: 'Next',
            skipButtonText: 'Skip',
            doneButtonText: 'Done',
            navigationBarHeight: 50,
            navigationBarWidth: 300,
            navigationBarShape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(60),
            ),
            navigationBarColor: Colors.white,
            showDivider: false,
            dotHeight: 10,
            dotWidth: 16,
            dotShape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(5)),
            inActiveColor: Colors.grey[200],
            activeColor: GFColors.SUCCESS,
            dotMargin: EdgeInsets.symmetric(horizontal: 6),
            showPagination: true,
          ), currentIndex: null, pageCount: null,
        ),
      ),
    );

List<Widget> slides() {
  slideList = [
    Container(
      child: GFImageOverlay(
        width: MediaQuery.of(context).size.width,
        padding: EdgeInsets.all(16),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 10.0, left: 20),
              child: Text(
                'Welcome Back!',
                style: TextStyle(color: Colors.white,decoration: TextDecoration.none,fontSize: 25),
              ),
            ),
          ],
        ),
        color: Colors.orange,
        image: const AssetImage('lib/assets/images/i1.png'),
        boxFit: BoxFit.cover,
        colorFilter:
            ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.darken),
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(40), topRight: Radius.circular(40)),
      ),
    ),
    Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(40), topRight: Radius.circular(40)),
          image: DecorationImage(
            image: AssetImage('asset image here'),
            fit: BoxFit.fill,
            colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(0.2), BlendMode.darken),
          )),
    ),
    Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(40), topRight: Radius.circular(40)),
          image: DecorationImage(
            image: AssetImage('asset image here'),
            fit: BoxFit.fill,
            colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(0.2), BlendMode.darken),
          )),
    ),
    Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(40), topRight: Radius.circular(40)),
          image: DecorationImage(
            image: AssetImage('asset image here'),
            fit: BoxFit.fill,
            colorFilter: ColorFilter.mode(
                Colors.black.withOpacity(0.2), BlendMode.darken),
          )),
    ),
  ];
  return slideList;
}

# Custom Properties

Look and feel of the GFIntroScreen can be customized using the GFIntroScreen properties.

slides defines the list of slides
pageController allows one to control [GFIntroScreen] slides
color defines background color of the [GFIntroScreen] slides
height defines [GFIntroScreen] slides height
width defines [GFIntroScreen] slides width
borderRadius defines [GFIntroScreen] border radius to defines slides shape
border defines [GFIntroScreen] slides border
introScreenBottomNavigationBar **** defines [GFIntroScreen]'s bottom navigation bar
showIntroScreenBottomNavigationBar on true state, displays [GFIntroScreenBottomNavigationBar], defaults to true
currentIndex defines the currentIndex of [GFIntroScreen] slides, default value is 0
pageCount defines the length of [GFIntroScreen] slides, default value is 0
child defines [GFIntroScreenBottomNavigationBar]'s child, it takes any widget
navigationBarHeight defines [GFIntroScreenBottomNavigationBar] height
navigationBarWidth defines [GFIntroScreenBottomNavigationBar] width
navigationBarPadding defines [GFIntroScreenBottomNavigationBar] padding
navigationBarMargin defines [GFIntroScreenBottomNavigationBar] margin
navigationBarColor defines [GFIntroScreenBottomNavigationBar] color
navigationBarShape defines the shape of [GFIntroScreenBottomNavigationBar]
onForwardButtonTap called when the [forwardButtonText] is tapped
onBackButtonTap called when the [backButtonText] is tapped
onDoneTap called when the [doneButtonText] is tapped
onSkipTap called when the [skipButtonText] is tapped
backButton takes any Widget to define the backButton widget
forwardButton takes any Widget to define the forwardButton widget
doneButton takes any Widget to define the doneButton widget
skipButton takes any Widget to define the skipButton widget
backButtonText takes String to define backButton text
forwardButtonText takes String to define forwardButton text
doneButtonText takes String to define doneButton text
skipButtonText takes String to define skipButton text
skipButtonTextStyle defines the skipButton textStyle
doneButtonTextStyle defines the doneButton textStyle
backButtonTextStyle defines the backButton textStyle
forwardButtonTextStyle defines the forwardButton textStyle
showDivider on true state, displays [Divider], defaults to true
showButton on true state, displays buttons, defaults to true
showPagination on true state, displays pagination, defaults to true
dividerHeight defines divider height
dividerThickness defines divider thickness
dividerColor defines divider color
dotShape defines pagination shape
inactiveColor defines pagination inactive color
activeColor defines pagination active color
dotHeight defines pagination height
dotWidth defines pagination width
dotMargin defines pagination in between space
Last Updated: 10/23/2020, 4:54:08 PM