GF Introduction Screen

Banner image

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.

GF Introduction Screen

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

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

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;

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

GF Flutter IntroScreen Custom Properties

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

NameDescription
slidesdefines the list of slides
pageControllerallows one to control [GFIntroScreen] slides
colordefines background color of the [GFIntroScreen] slides
heightdefines [GFIntroScreen] slides height
widthdefines [GFIntroScreen] slides width
borderRadiusdefines [GFIntroScreen] border radius to defines slides shape
borderdefines [GFIntroScreen] slides border
introScreenBottomNavigationBar **defines [GFIntroScreen]'s bottom navigation bar
showIntroScreenBottomNavigationBaron true state, displays [GFIntroScreenBottomNavigationBar], defaults to true
currentIndexdefines the currentIndex of [GFIntroScreen] slides, default value is 0
pageCountdefines the length of [GFIntroScreen] slides, default value is 0
childdefines [GFIntroScreenBottomNavigationBar]'s child, it takes any widget
navigationBarHeightdefines [GFIntroScreenBottomNavigationBar] height
navigationBarWidthdefines [GFIntroScreenBottomNavigationBar] width
navigationBarPaddingdefines [GFIntroScreenBottomNavigationBar] padding
navigationBarMargindefines [GFIntroScreenBottomNavigationBar] margin
navigationBarColordefines [GFIntroScreenBottomNavigationBar] color
navigationBarShapedefines the shape of [GFIntroScreenBottomNavigationBar]
onForwardButtonTapcalled when the [forwardButtonText] is tapped
onBackButtonTapcalled when the [backButtonText] is tapped
onDoneTapcalled when the [doneButtonText] is tapped
onSkipTapcalled when the [skipButtonText] is tapped
backButtontakes any Widget to define the backButton widget
forwardButtontakes any Widget to define the forwardButton widget
doneButtontakes any Widget to define the doneButton widget
skipButtontakes any Widget to define the skipButton widget
backButtonTexttakes String to define backButton text
forwardButtonTexttakes String to define forwardButton text
doneButtonTexttakes String to define doneButton text
skipButtonTexttakes String to define skipButton text
skipButtonTextStyledefines the skipButton textStyle
doneButtonTextStyledefines the doneButton textStyle
backButtonTextStyledefines the backButton textStyle
forwardButtonTextStyledefines the forwardButton textStyle
showDivideron true state, displays [Divider], defaults to true
showButtonon true state, displays buttons, defaults to true
showPaginationon true state, displays pagination, defaults to true
dividerHeightdefines divider height
dividerThicknessdefines divider thickness
dividerColordefines divider color
dotShapedefines pagination shape
inactiveColordefines pagination inactive color
activeColordefines pagination active color
dotHeightdefines pagination height
dotWidthdefines pagination width
dotMargindefines pagination in between space

Last Updated: February 4, 2022