Skip to content

Commit 2c6d47c

Browse files
haideraltahanhaideraltahan
committed
Added Back Button
1 parent 5999685 commit 2c6d47c

File tree

4 files changed

+93
-84
lines changed

4 files changed

+93
-84
lines changed

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,15 +139,18 @@ You should then run `flutter packages get` in your terminal so as to get the pac
139139
| :---------------------- | :------------------ | :---------------------------------------------------------------------------------------------------------------- | :-------------------------------------: |
140140
| pages | List<PageViewModel> | Set the pages of the intro screen. | Null |
141141
| onTapDoneButton | VoidCallback | Method executes on tapping done button. | Null |
142+
| onTapDoneButton | VoidCallback | Method executes on tapping back button. | Null |
142143
| onTapNextButton | VoidCallback | Method executes on tapping next button. | Null |
143144
| showSkipButton | Bool | Show the skip button at the bottom of page. | true |
144-
| showNextButton | Bool | Show the Next button at the bottom of page. Overrides doneButtonPersist. | true |
145+
| showBackButton | Bool | Show the Back button at the bottom of page. Overrides showSkipButton starting from the second page | true |
146+
| showNextButton | Bool | Show the Next button at the bottom of page. Overrides doneButtonPersist. | true |
145147
| pageButtonTextSize | Double | Set the button text size. | 18.0 |
146148
| pageButtonFontFamily | String | Set the font of button text. | Default |
147149
| onTapSkipButton | VoidCallback | Method executes on tapping skip button. | null |
148150
| pageButtonTextStyles | TextStyle | Configure TextStyle for skip, done buttons, overrides pageButtonFontFamily, pageButtonsColor, pageButtonTextSize. | fontSize: `18.0`, color: `Colors.white` |
149151
| skipText | Text / Widget | Override Skip Button Text and styles. | Text('SKIP') |
150152
| doneText | Text / Widget | Override Done Button Text and styles. | Text('DONE') |
153+
| backText | Text / Widget | Override Back Button Text and styles. | Text('BACK') |
151154
| nextText | Text / Widget | Override Next Button Text and styles. | Text('NEXT') |
152155
| doneButtonPersist | Bool | Show done Button throughout pages | false |
153156
| columnMainAxisAlignment | MainAxisAlignment | Control [MainAxisAlignment] for column | MainAxisAlignment.spaceAround |

‎example/lib/main.dart‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,6 @@ class App extends StatelessWidget {
7979
), //MaterialPageRoute
8080
);
8181
},
82-
showSkipButton:
83-
true, //Whether you want to show the skip button or not.
8482
pageButtonTextStyles: TextStyle(
8583
color: Colors.white,
8684
fontSize: 18.0,

‎lib/UI/page_indicator_buttons.dart‎

Lines changed: 61 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import 'package:flutter/material.dart';
22
import 'package:intro_views_flutter/Constants/constants.dart';
33
import 'package:intro_views_flutter/Models/page_button_view_model.dart';
44

5-
/// Skip button class
5+
/// Skip, Next, and Back button class
66
7-
class SkipButton extends StatelessWidget {
7+
class DefaultButton extends StatelessWidget {
88
//callback for skip button
99
final VoidCallback onTap;
1010

@@ -13,7 +13,7 @@ class SkipButton extends StatelessWidget {
1313
final Widget child;
1414

1515
//Constructor
16-
SkipButton({
16+
DefaultButton({
1717
this.onTap,
1818
this.pageButtonViewModel,
1919
this.child,
@@ -88,76 +88,34 @@ class DoneButton extends StatelessWidget {
8888
}
8989
}
9090

91-
/// Nexg button class
92-
93-
class NextButton extends StatelessWidget {
94-
//callback for skip button
95-
final VoidCallback onTap;
96-
97-
//view model
98-
final PageButtonViewModel pageButtonViewModel;
99-
final Widget child;
100-
101-
//Constructor
102-
NextButton({
103-
this.onTap,
104-
this.pageButtonViewModel,
105-
this.child,
106-
});
107-
108-
@override
109-
Widget build(BuildContext context) {
110-
//Calculating opacity to create a fade in effect
111-
double opacity = 1.0;
112-
final TextStyle style = DefaultTextStyle.of(context).style;
113-
if (pageButtonViewModel.activePageIndex ==
114-
pageButtonViewModel.totalPages - 2 &&
115-
pageButtonViewModel.slideDirection == SlideDirection.rightToLeft) {
116-
opacity = 1.0 - pageButtonViewModel.slidePercent;
117-
} else if (pageButtonViewModel.activePageIndex ==
118-
pageButtonViewModel.totalPages - 1 &&
119-
pageButtonViewModel.slideDirection == SlideDirection.leftToRight) {
120-
opacity = pageButtonViewModel.slidePercent;
121-
}
122-
123-
return FlatButton(
124-
onPressed: onTap,
125-
child: Opacity(
126-
opacity: opacity,
127-
child: DefaultTextStyle.merge(
128-
style: style,
129-
child: child,
130-
), //Text
131-
), //Opacity
132-
); //FlatButton
133-
}
134-
}
135-
13691
class PageIndicatorButtons extends StatelessWidget {
13792
//Some variables
13893
final int acitvePageIndex;
13994
final int totalPages;
14095
final VoidCallback onPressedDoneButton; //Callback for Done Button
14196
final VoidCallback onPressedNextButton;
97+
final VoidCallback onPressedBackButton;
14298
final VoidCallback onPressedSkipButton; //Callback for Skip Button
14399
final SlideDirection slideDirection;
144100
final double slidePercent;
145101
final bool showSkipButton;
146102
final bool showNextButton;
103+
final bool showBackButton;
147104

148105
final Widget doneText;
149106
final Widget skipText;
150107
final Widget nextText;
108+
final Widget backText;
151109
final TextStyle textStyle;
152110

153111
final bool doneButtonPersist;
154112

155-
Widget _getDoneORNextButton(){
113+
Widget _getDoneORNextButton() {
156114
if ((acitvePageIndex < totalPages - 1 ||
157-
(acitvePageIndex == totalPages - 1 &&
158-
slideDirection == SlideDirection.leftToRight)) &&
159-
showNextButton){
160-
return NextButton(
115+
(acitvePageIndex == totalPages - 1 &&
116+
slideDirection == SlideDirection.leftToRight)) &&
117+
showNextButton) {
118+
return DefaultButton(
161119
child: nextText,
162120
onTap: onPressedNextButton,
163121
pageButtonViewModel: PageButtonViewModel(
@@ -168,10 +126,10 @@ class PageIndicatorButtons extends StatelessWidget {
168126
slideDirection: slideDirection,
169127
),
170128
);
171-
}else if (acitvePageIndex == totalPages - 1 ||
129+
} else if (acitvePageIndex == totalPages - 1 ||
172130
(acitvePageIndex == totalPages - 2 &&
173-
slideDirection == SlideDirection.rightToLeft ||
174-
doneButtonPersist)){
131+
slideDirection == SlideDirection.rightToLeft ||
132+
doneButtonPersist)) {
175133
return DoneButton(
176134
child: doneText,
177135
onTap: onPressedDoneButton,
@@ -183,7 +141,42 @@ class PageIndicatorButtons extends StatelessWidget {
183141
slideDirection: slideDirection,
184142
),
185143
);
186-
}else {
144+
} else {
145+
return Container();
146+
}
147+
}
148+
149+
Widget _getSkipORBackButton() {
150+
if (acitvePageIndex <= totalPages &&
151+
acitvePageIndex >= 1 &&
152+
showBackButton) {
153+
return DefaultButton(
154+
child: backText,
155+
onTap: onPressedBackButton,
156+
pageButtonViewModel: PageButtonViewModel(
157+
//View Model
158+
activePageIndex: acitvePageIndex,
159+
totalPages: totalPages,
160+
slidePercent: slidePercent,
161+
slideDirection: slideDirection,
162+
),
163+
);
164+
} else if ((acitvePageIndex < totalPages - 1 ||
165+
(acitvePageIndex == totalPages - 1 &&
166+
slideDirection == SlideDirection.leftToRight)) &&
167+
showSkipButton) {
168+
return DefaultButton(
169+
child: skipText,
170+
onTap: onPressedSkipButton,
171+
pageButtonViewModel: PageButtonViewModel(
172+
//View Model
173+
activePageIndex: acitvePageIndex,
174+
totalPages: totalPages,
175+
slidePercent: slidePercent,
176+
slideDirection: slideDirection,
177+
),
178+
);
179+
} else {
187180
return Container();
188181
}
189182
}
@@ -197,13 +190,16 @@ class PageIndicatorButtons extends StatelessWidget {
197190
this.slidePercent,
198191
this.onPressedSkipButton,
199192
this.onPressedNextButton,
200-
this.showSkipButton = true,
193+
this.onPressedBackButton,
194+
this.showSkipButton,
201195
this.skipText,
202196
this.nextText,
203197
this.doneText,
204198
this.textStyle,
205199
this.doneButtonPersist,
206-
this.showNextButton = true});
200+
this.showNextButton = true,
201+
this.showBackButton = true,
202+
this.backText});
207203

208204
@override
209205
Widget build(BuildContext context) {
@@ -219,28 +215,13 @@ class PageIndicatorButtons extends StatelessWidget {
219215
mainAxisSize: MainAxisSize.max,
220216
children: <Widget>[
221217
Padding(
222-
padding: const EdgeInsets.only(bottom: 10.0),
223-
child: ((acitvePageIndex < totalPages - 1 ||
224-
(acitvePageIndex == totalPages - 1 &&
225-
slideDirection == SlideDirection.leftToRight)) &&
226-
showSkipButton)
227-
? SkipButton(
228-
child: skipText,
229-
onTap: onPressedSkipButton,
230-
pageButtonViewModel: PageButtonViewModel(
231-
//View Model
232-
activePageIndex: acitvePageIndex,
233-
totalPages: totalPages,
234-
slidePercent: slidePercent,
235-
slideDirection: slideDirection,
236-
),
237-
)
238-
: Container(), //Row
239-
), //Padding
218+
padding: const EdgeInsets.only(bottom: 10.0),
219+
child: _getSkipORBackButton() //Row
220+
), //Padding
240221
Padding(
241-
padding: const EdgeInsets.only(bottom: 10.0),
242-
child: _getDoneORNextButton() //Row
243-
)
222+
padding: const EdgeInsets.only(bottom: 10.0),
223+
child: _getDoneORNextButton() //Row
224+
)
244225
],
245226
),
246227
),

‎lib/intro_views_flutter.dart‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ class IntroViewsFlutter extends StatefulWidget {
3333
/// Whether you want to show the next button or not.
3434
final bool showNextButton;
3535

36+
/// Whether you want to show the back button or not.
37+
final bool showBackButton;
38+
3639
/// TextStyles for done, skip Buttons
3740
///
3841
/// overrides [pageButtonFontFamily] [pageButtonsColor] [pageButtonTextSize]
@@ -44,6 +47,9 @@ class IntroViewsFlutter extends StatefulWidget {
4447
/// run a function after next Button pressed
4548
final VoidCallback onTapNextButton;
4649

50+
/// run a function after back Button pressed
51+
final VoidCallback onTapBackButton;
52+
4753
/// set the Text Size for skip, done buttons
4854
///
4955
/// gets overridden by [pageButtonTextStyles]
@@ -58,6 +64,10 @@ class IntroViewsFlutter extends StatefulWidget {
5864
/// typicaly a Text Widget
5965
final Widget doneText;
6066

67+
/// Override 'BACK' Text with Your Own Text,
68+
/// typicaly a Text Widget
69+
final Widget backText;
70+
6171
/// Override 'NEXT' Text with Your Own Text,
6272
/// typicaly a Text Widget
6373
final Widget nextText;
@@ -88,7 +98,9 @@ class IntroViewsFlutter extends StatefulWidget {
8898
this.onTapDoneButton,
8999
this.showSkipButton = true,
90100
this.pageButtonTextStyles,
101+
this.onTapBackButton,
91102
this.showNextButton = true,
103+
this.showBackButton = true,
92104
this.pageButtonTextSize = 18.0,
93105
this.pageButtonFontFamily,
94106
this.onTapSkipButton,
@@ -97,6 +109,7 @@ class IntroViewsFlutter extends StatefulWidget {
97109
this.doneText = const Text("DONE"),
98110
this.nextText = const Text("NEXT"),
99111
this.skipText = const Text("SKIP"),
112+
this.backText = const Text("BACK"),
100113
this.doneButtonPersist = false,
101114
this.columnMainAxisAlignment = MainAxisAlignment.spaceAround,
102115
this.fullTransition = FULL_TARNSITION_PX,
@@ -267,20 +280,34 @@ class _IntroViewsFlutterState extends State<IntroViewsFlutter>
267280
},
268281
showSkipButton: widget.showSkipButton,
269282
showNextButton: widget.showNextButton,
283+
showBackButton: widget.showBackButton,
270284
onPressedNextButton: () {
271285
//method executed on pressing next button
272286
setState(() {
273287
activePageIndex = activePageIndex + 1;
274288
nextPageIndex = nextPageIndex + 1;
275-
// after skip pressed invoke function
289+
// after next pressed invoke function
276290
// this can be used for analytics/page transition
277291
if (widget.onTapNextButton != null) {
278292
widget.onTapNextButton();
279293
}
280294
});
281295
},
296+
onPressedBackButton: () {
297+
//method executed on pressing back button
298+
setState(() {
299+
activePageIndex = activePageIndex - 1;
300+
nextPageIndex = nextPageIndex - 1;
301+
// after next pressed invoke function
302+
// this can be used for analytics/page transition
303+
if (widget.onTapBackButton != null) {
304+
widget.onTapBackButton();
305+
}
306+
});
307+
},
282308
nextText: widget.nextText,
283309
doneText: widget.doneText,
310+
backText: widget.backText,
284311
skipText: widget.skipText,
285312
doneButtonPersist: widget.doneButtonPersist,
286313
),

0 commit comments

Comments
 (0)