# GF Introduction Screen

# GF Flutter Intro Screen or Welcome Screen

GFIntro Screen is a Flutter Introduction Screen that has sliders and gives information about the application. It can have as many slides as the application needs. It is a user-friendly widget that pops upon opening the application to give a brief introduction to the app.

GF Flutter Introduction Widget

The simple code of a basic GF Introduction Screen is as shown below.

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


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


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 Flutter Intro Screen Bottom Navigation Bar

GF IntroScreen Bottom NavigationBar is a bottom bar that sits at the bottom end of the screen. This component contains pagination and buttons for navigation. It has many features for customizing the bottom navigation bar.

late PageController _pageController;
int initialPage;


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 Flutter Introduction Custom Screen

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

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


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


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

# GF Flutter IntroScreen Custom Properties

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

Name Description
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: 9/3/2021, 5:00:42 AM