Skip to content

Commit 1cecfef

Browse files
deepikahrdeepikahr
committed
tested GFIntro bottom navigation
1 parent ab674d2 commit 1cecfef

File tree

3 files changed

+164
-88
lines changed

3 files changed

+164
-88
lines changed

‎example/lib/main_temp.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,8 @@ class _IntroScreenState extends State<IntroScreen> {
122122
Widget build(BuildContext context) {
123123
return SafeArea(
124124
child: GFIntroScreen(
125-
height: 500,
126-
width: 300,
125+
// height: 500,
126+
// width: 300,
127127
color: Colors.blueGrey,
128128
slides: slides(),
129129
// type: GFIntroType.rounded,

‎lib/components/intro_screen/gf_intro_bottom_navigation.dart‎

Lines changed: 117 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,26 @@ import 'package:getwidget/getwidget.dart';
55
class GFIntroBottomNavigation extends StatelessWidget {
66
const GFIntroBottomNavigation({
77
Key key,
8-
this.pageNumber = 0,
9-
this.pagesCount = 0,
8+
this.pageController,
9+
this.currentIndex = 0,
10+
this.pageCount = 0,
1011
this.child,
11-
1212
this.navigationBarColor = GFColors.SUCCESS,
1313
this.navigationBarHeight = 50,
1414
this.navigationBarShape,
1515
this.navigationBarWidth,
1616
this.navigationBarPadding = const EdgeInsets.all(8),
1717
this.navigationBarMargin = const EdgeInsets.all(8),
18-
1918
this.showDivider = true,
2019
this.dividerColor = Colors.white,
2120
this.dividerHeight = 1,
2221
this.dividerThickness = 2,
23-
24-
this.dotShape = BoxShape.circle,
25-
this.inActiveColor,
26-
this.activeColor,
27-
this.dotHeight,
28-
this.dotWidth,
29-
this.dotMargin,
30-
22+
this.dotShape,
23+
this.inActiveColor = GFColors.LIGHT,
24+
this.activeColor = GFColors.PRIMARY,
25+
this.dotHeight = 12,
26+
this.dotWidth = 12,
27+
this.dotMargin = const EdgeInsets.symmetric(horizontal: 2),
3128
this.backButton,
3229
this.forwardButton,
3330
this.doneButton,
@@ -40,22 +37,39 @@ class GFIntroBottomNavigation extends StatelessWidget {
4037
this.backButtonText = 'BACK',
4138
this.doneButtonText = 'GO',
4239
this.skipButtonText = 'SKIP',
43-
this.skipButtonTextStyle = const TextStyle(color: Colors.black, fontSize: 16,),
44-
this.doneButtonTextStyle = const TextStyle(color: Colors.black, fontSize: 16,),
45-
this.backButtonTextStyle = const TextStyle(color: Colors.black, fontSize: 16,),
46-
this.forwardButtonTextStyle = const TextStyle(color: Colors.black, fontSize: 16,),
40+
this.skipButtonTextStyle = const TextStyle(
41+
color: Colors.black,
42+
fontSize: 16,
43+
),
44+
this.doneButtonTextStyle = const TextStyle(
45+
color: Colors.black,
46+
fontSize: 16,
47+
),
48+
this.backButtonTextStyle = const TextStyle(
49+
color: Colors.black,
50+
fontSize: 16,
51+
),
52+
this.forwardButtonTextStyle = const TextStyle(
53+
color: Colors.black,
54+
fontSize: 16,
55+
),
56+
this.showButton = true,
57+
this.showPagination = true,
4758
}) : super(key: key);
4859

60+
/// default controller for the [GFIntroScreen] component
61+
final PageController pageController;
4962

50-
final int pageNumber;
51-
final int pagesCount;
63+
final int currentIndex;
64+
final int pageCount;
5265
final Widget child;
5366

5467
final double navigationBarHeight;
5568
final double navigationBarWidth;
5669
final EdgeInsets navigationBarPadding;
5770
final EdgeInsets navigationBarMargin;
5871
final dynamic navigationBarColor;
72+
5973
/// defines the shape of [GFIntroBottomNavigation]
6074
final ShapeBorder navigationBarShape;
6175

@@ -75,77 +89,111 @@ class GFIntroBottomNavigation extends StatelessWidget {
7589
final TextStyle doneButtonTextStyle;
7690
final TextStyle backButtonTextStyle;
7791
final TextStyle forwardButtonTextStyle;
92+
7893
final bool showDivider;
94+
final bool showButton;
95+
final bool showPagination;
96+
7997
final double dividerHeight;
8098
final double dividerThickness;
81-
final Color dividerColor;
82-
final BoxShape dotShape;
99+
final dynamic dividerColor;
100+
101+
final ShapeBorder dotShape;
83102
final Color inActiveColor;
84103
final Color activeColor;
85104
final double dotHeight;
86105
final double dotWidth;
87106
final EdgeInsets dotMargin;
88107

89108

109+
110+
void onForwardButton() {
111+
pageController.nextPage(
112+
duration: const Duration(milliseconds: 500),
113+
curve: Curves.linear
114+
);
115+
}
116+
117+
void onBackButton() {
118+
pageController.previousPage(
119+
duration: const Duration(milliseconds: 500),
120+
curve: Curves.linear
121+
);
122+
}
123+
90124
@override
91125
Widget build(BuildContext context) => Column(
92-
mainAxisAlignment: MainAxisAlignment.end,
93-
children: <Widget>[
94-
showDivider
95-
? Divider(
96-
height: dividerHeight,
97-
thickness: dividerThickness,
98-
color: dividerColor,
99-
)
100-
: Container(),
101-
Material(
102-
child: Container(
103-
height: navigationBarHeight,
104-
width: navigationBarWidth,
105-
child: Material(
106-
shape: navigationBarShape,
107-
color: navigationBarColor,
126+
mainAxisAlignment: MainAxisAlignment.end,
127+
children: <Widget>[
128+
showDivider
129+
? Divider(
130+
height: dividerHeight,
131+
thickness: dividerThickness,
132+
color: dividerColor,
133+
)
134+
: Container(),
135+
Material(
108136
child: Container(
109-
padding: navigationBarPadding,
110-
margin: navigationBarMargin,
111-
child: Row(
112-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
113-
children: <Widget>[
114-
InkWell(
115-
child: pageNumber == 0 ? skipButton ?? Text(skipButtonText, style: skipButtonTextStyle) :
116-
backButton ?? Text(backButtonText, style: backButtonTextStyle),
117-
onTap: onBackButtonTap,
118-
),
119-
Row(
120-
mainAxisAlignment: MainAxisAlignment.center,
121-
children: getDotsList(),
137+
height: navigationBarHeight,
138+
width: navigationBarWidth,
139+
child: Material(
140+
shape: navigationBarShape,
141+
color: navigationBarColor,
142+
child: Container(
143+
padding: navigationBarPadding,
144+
margin: navigationBarMargin,
145+
child: child != null ? Row(
146+
children: [
147+
child
148+
],
149+
) : Row(
150+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
151+
children: <Widget>[
152+
showButton ? InkWell(
153+
child: currentIndex == 0
154+
? skipButton ??
155+
Text(skipButtonText, style: skipButtonTextStyle)
156+
: backButton ??
157+
Text(backButtonText,
158+
style: backButtonTextStyle),
159+
onTap: currentIndex == 0 ? onSkipTap : onBackButtonTap ?? onBackButton,
160+
) : Container(),
161+
showPagination ? Row(
162+
mainAxisAlignment: MainAxisAlignment.center,
163+
children: getDotsList(),
164+
) : Container(),
165+
showButton ? InkWell(
166+
child: currentIndex == pageCount - 1
167+
? doneButton ??
168+
Text(doneButtonText, style: doneButtonTextStyle)
169+
: forwardButton ??
170+
Text(forwardButtonText,
171+
style: forwardButtonTextStyle),
172+
onTap: currentIndex == pageCount - 1
173+
? onDoneTap
174+
: onForwardButtonTap ?? onForwardButton,
175+
) : Container(),
176+
],
122177
),
123-
InkWell(
124-
child: pageNumber == pagesCount - 1 ? doneButton ?? Text(doneButtonText, style: doneButtonTextStyle) :
125-
forwardButton ?? Text(forwardButtonText, style: forwardButtonTextStyle),
126-
onTap: pageNumber == pagesCount - 1 ? onDoneTap : onForwardButtonTap,
127-
),
128-
],
178+
),
129179
),
130180
),
131-
),
132-
),
133-
)
134-
],
135-
);
181+
)
182+
],
183+
);
136184

137185
List<Widget> getDotsList() {
138186
final List<Widget> list = [];
139-
for (int i = 0; i < pagesCount; i++) {
187+
for (int i = 0; i < pageCount; i++) {
140188
list.add(Container(
141-
width: dotWidth ?? 12,
142-
height: dotHeight ?? 12,
143-
margin: dotMargin ?? const EdgeInsets.symmetric(horizontal: 4),
144-
decoration: BoxDecoration(
145-
shape: dotShape,
146-
color: pageNumber == i
147-
? activeColor ?? GFColors.PRIMARY
148-
: inActiveColor ?? GFColors.LIGHT,
189+
margin: dotMargin,
190+
child: Material(
191+
shape: dotShape ?? RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
192+
color: currentIndex == i ? activeColor : inActiveColor,
193+
child: Container(
194+
width: dotWidth,
195+
height: dotHeight,
196+
),
149197
),
150198
));
151199
}

‎lib/components/intro_screen/gf_intro_screen.dart‎

Lines changed: 45 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -90,23 +90,51 @@ class _GFIntroScreenState extends State<GFIntroScreen> {
9090
)),
9191
widget.gfIntroBottomNavigation ??
9292
GFIntroBottomNavigation(
93-
onForwardButtonTap: () {
94-
_pageController.nextPage(
95-
duration: const Duration(milliseconds: 500),
96-
curve: Curves.linear);
97-
},
98-
onBackButtonTap: () {
99-
_pageController.previousPage(
100-
duration: const Duration(milliseconds: 500),
101-
curve: Curves.linear);
102-
},
103-
pagesCount: widget.slides.length,
104-
pageNumber: page,
105-
navigationBarShape: RoundedRectangleBorder(
106-
side: const BorderSide(color: Colors.blue, width: 4),
107-
borderRadius: BorderRadius.circular(50),
108-
),
109-
navigationBarColor: GFColors.SECONDARY,
93+
pageController: _pageController,
94+
pageCount: widget.slides.length,
95+
currentIndex: page,
96+
// child: Text('dfghj'),
97+
98+
// onForwardButtonTap: () {
99+
// print('fffffff');
100+
// // _pageController.nextPage(
101+
// // duration: const Duration(milliseconds: 500),
102+
// // curve: Curves.linear);
103+
// },
104+
// onBackButtonTap: () {
105+
// print('kkkkkkkkk');
106+
// // _pageController.previousPage(
107+
// // duration: const Duration(milliseconds: 500),
108+
// // curve: Curves.linear);
109+
// },
110+
111+
// navigationBarHeight: 100,
112+
// navigationBarWidth: 300,
113+
// navigationBarMargin: EdgeInsets.all(20),
114+
// navigationBarPadding: EdgeInsets.all(20),
115+
// navigationBarShape: RoundedRectangleBorder(
116+
// side: const BorderSide(color: Colors.blue, width: 4),
117+
// borderRadius: BorderRadius.circular(50),
118+
// ),
119+
// navigationBarColor: GFColors.SECONDARY,
120+
//
121+
// showDivider: true,
122+
// dividerHeight: 2,
123+
// dividerThickness: 13,
124+
// dividerColor: GFColors.ALT,
125+
//
126+
// dotHeight: 10,
127+
// dotWidth: 16,
128+
// dotShape: RoundedRectangleBorder(
129+
// side: BorderSide(color: Colors.red, width: 2),
130+
// borderRadius: BorderRadius.circular(5)
131+
// ),
132+
// inActiveColor: GFColors.DARK,
133+
// activeColor: GFColors.DANGER,
134+
// dotMargin: EdgeInsets.symmetric(horizontal: 6),
135+
//
136+
// showButton: false,
137+
// showPagination: true,
110138
),
111139
],
112140
),

0 commit comments

Comments
 (0)