# GF Intro Screen
# GF Intro Screen Info
# 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 |