Skip to content

Commit 60a8c1c

Browse files
aagarwal1012aagarwal1012
authored
Merge pull request #22 from Lopics/master
Added Next Button
2 parents c23f0c8 + 1db32ab commit 60a8c1c

File tree

6 files changed

+183
-64
lines changed

6 files changed

+183
-64
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 2.5.0
2+
* Added Next Button to move to the next screen. Overriding doneButtonPersist.
3+
* Added Back Button. Overrides showSkipButton starting from the second page.
4+
15
## 2.4.0
26
**Feature Enhancement**
37
* Exposed the way to change the distance a user needs to drag for a full transition to occur using `fullTransition` and its default value is set to `300.0`.

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,13 +139,19 @@ 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+
| onTapBackButton | VoidCallback | Method executes on tapping back button. | Null |
143+
| onTapNextButton | VoidCallback | Method executes on tapping next button. | Null |
142144
| showSkipButton | Bool | Show the skip button at the bottom of page. | true |
145+
| showBackButton | Bool | Show the Back button at the bottom of page. Overrides showSkipButton starting from the second page | false |
146+
| showNextButton | Bool | Show the Next button at the bottom of page. Overrides doneButtonPersist. | false |
143147
| pageButtonTextSize | Double | Set the button text size. | 18.0 |
144148
| pageButtonFontFamily | String | Set the font of button text. | Default |
145149
| onTapSkipButton | VoidCallback | Method executes on tapping skip button. | null |
146150
| pageButtonTextStyles | TextStyle | Configure TextStyle for skip, done buttons, overrides pageButtonFontFamily, pageButtonsColor, pageButtonTextSize. | fontSize: `18.0`, color: `Colors.white` |
147151
| skipText | Text / Widget | Override Skip Button Text and styles. | Text('SKIP') |
148152
| doneText | Text / Widget | Override Done Button Text and styles. | Text('DONE') |
153+
| backText | Text / Widget | Override Back Button Text and styles. | Text('BACK') |
154+
| nextText | Text / Widget | Override Next Button Text and styles. | Text('NEXT') |
149155
| doneButtonPersist | Bool | Show done Button throughout pages | false |
150156
| columnMainAxisAlignment | MainAxisAlignment | Control [MainAxisAlignment] for column | MainAxisAlignment.spaceAround |
151157
| fullTransition | double | Adjust scroll distance for full transition | 300.0 |

‎example/lib/main.dart‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,8 @@ class App extends StatelessWidget {
6868
primarySwatch: Colors.blue,
6969
), //ThemeData
7070
home: Builder(
71-
builder: (context) => IntroViewsFlutter(
71+
builder: (context) =>
72+
IntroViewsFlutter(
7273
pages,
7374
onTapDoneButton: () {
7475
Navigator.push(
@@ -78,8 +79,6 @@ class App extends StatelessWidget {
7879
), //MaterialPageRoute
7980
);
8081
},
81-
showSkipButton:
82-
true, //Whether you want to show the skip button or not.
8382
pageButtonTextStyles: TextStyle(
8483
color: Colors.white,
8584
fontSize: 18.0,

‎lib/UI/page_indicator_buttons.dart‎

Lines changed: 109 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,18 @@ 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;
10+
1011
//view model
1112
final PageButtonViewModel pageButtonViewModel;
1213
final Widget child;
14+
1315
//Constructor
14-
SkipButton({
16+
DefaultButton({
1517
this.onTap,
1618
this.pageButtonViewModel,
1719
this.child,
@@ -50,9 +52,11 @@ class SkipButton extends StatelessWidget {
5052
class DoneButton extends StatelessWidget {
5153
//Callback
5254
final VoidCallback onTap;
55+
5356
//View Model
5457
final PageButtonViewModel pageButtonViewModel;
5558
final Widget child;
59+
5660
//Constructor
5761
DoneButton({
5862
this.onTap,
@@ -86,34 +90,116 @@ class DoneButton extends StatelessWidget {
8690

8791
class PageIndicatorButtons extends StatelessWidget {
8892
//Some variables
89-
final int acitvePageIndex;
93+
final int activePageIndex;
9094
final int totalPages;
9195
final VoidCallback onPressedDoneButton; //Callback for Done Button
96+
final VoidCallback onPressedNextButton;
97+
final VoidCallback onPressedBackButton;
9298
final VoidCallback onPressedSkipButton; //Callback for Skip Button
9399
final SlideDirection slideDirection;
94100
final double slidePercent;
95101
final bool showSkipButton;
102+
final bool showNextButton;
103+
final bool showBackButton;
96104

97105
final Widget doneText;
98106
final Widget skipText;
107+
final Widget nextText;
108+
final Widget backText;
99109
final TextStyle textStyle;
100110

101111
final bool doneButtonPersist;
102112

113+
Widget _getDoneORNextButton() {
114+
if ((activePageIndex < totalPages - 1 ||
115+
(activePageIndex == totalPages - 1 &&
116+
slideDirection == SlideDirection.leftToRight)) &&
117+
showNextButton) {
118+
return DefaultButton(
119+
child: nextText,
120+
onTap: onPressedNextButton,
121+
pageButtonViewModel: PageButtonViewModel(
122+
//View Model
123+
activePageIndex: activePageIndex,
124+
totalPages: totalPages,
125+
slidePercent: slidePercent,
126+
slideDirection: slideDirection,
127+
),
128+
);
129+
} else if (activePageIndex == totalPages - 1 ||
130+
(activePageIndex == totalPages - 2 &&
131+
slideDirection == SlideDirection.rightToLeft ||
132+
doneButtonPersist)) {
133+
return DoneButton(
134+
child: doneText,
135+
onTap: onPressedDoneButton,
136+
pageButtonViewModel: PageButtonViewModel(
137+
//view Model
138+
activePageIndex: activePageIndex,
139+
totalPages: totalPages,
140+
slidePercent: doneButtonPersist ? 0.0 : slidePercent,
141+
slideDirection: slideDirection,
142+
),
143+
);
144+
} else {
145+
return Container();
146+
}
147+
}
148+
149+
Widget _getSkipORBackButton() {
150+
if (activePageIndex <= totalPages &&
151+
activePageIndex >= 1 &&
152+
showBackButton) {
153+
return DefaultButton(
154+
child: backText,
155+
onTap: onPressedBackButton,
156+
pageButtonViewModel: PageButtonViewModel(
157+
//View Model
158+
activePageIndex: activePageIndex,
159+
totalPages: totalPages,
160+
slidePercent: slidePercent,
161+
slideDirection: slideDirection,
162+
),
163+
);
164+
} else if ((activePageIndex < totalPages - 1 ||
165+
(activePageIndex == 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: activePageIndex,
174+
totalPages: totalPages,
175+
slidePercent: slidePercent,
176+
slideDirection: slideDirection,
177+
),
178+
);
179+
} else {
180+
return Container();
181+
}
182+
}
183+
103184
//Constructor
104-
PageIndicatorButtons({
105-
@required this.acitvePageIndex,
106-
@required this.totalPages,
107-
this.onPressedDoneButton,
108-
this.slideDirection,
109-
this.slidePercent,
110-
this.onPressedSkipButton,
111-
this.showSkipButton = true,
112-
this.skipText,
113-
this.doneText,
114-
this.textStyle,
115-
this.doneButtonPersist,
116-
});
185+
PageIndicatorButtons(
186+
{@required this.activePageIndex,
187+
@required this.totalPages,
188+
this.onPressedDoneButton,
189+
this.slideDirection,
190+
this.slidePercent,
191+
this.onPressedSkipButton,
192+
this.onPressedNextButton,
193+
this.onPressedBackButton,
194+
this.showSkipButton,
195+
this.skipText,
196+
this.nextText,
197+
this.doneText,
198+
this.textStyle,
199+
this.doneButtonPersist,
200+
this.showNextButton = true,
201+
this.showBackButton = true,
202+
this.backText});
117203

118204
@override
119205
Widget build(BuildContext context) {
@@ -129,43 +215,13 @@ class PageIndicatorButtons extends StatelessWidget {
129215
mainAxisSize: MainAxisSize.max,
130216
children: <Widget>[
131217
Padding(
132-
padding: const EdgeInsets.only(bottom: 10.0),
133-
child: ((acitvePageIndex < totalPages - 1 ||
134-
(acitvePageIndex == totalPages - 1 &&
135-
slideDirection == SlideDirection.leftToRight)) &&
136-
showSkipButton)
137-
? SkipButton(
138-
child: skipText,
139-
onTap: onPressedSkipButton,
140-
pageButtonViewModel: PageButtonViewModel(
141-
//View Model
142-
activePageIndex: acitvePageIndex,
143-
totalPages: totalPages,
144-
slidePercent: slidePercent,
145-
slideDirection: slideDirection,
146-
),
147-
)
148-
: Container(), //Row
149-
), //Padding
218+
padding: const EdgeInsets.only(bottom: 10.0),
219+
child: _getSkipORBackButton() //Row
220+
), //Padding
150221
Padding(
151-
padding: const EdgeInsets.only(bottom: 10.0),
152-
child: (acitvePageIndex == totalPages - 1 ||
153-
(acitvePageIndex == totalPages - 2 &&
154-
slideDirection == SlideDirection.rightToLeft ||
155-
doneButtonPersist))
156-
? DoneButton(
157-
child: doneText,
158-
onTap: onPressedDoneButton,
159-
pageButtonViewModel: PageButtonViewModel(
160-
//view Model
161-
activePageIndex: acitvePageIndex,
162-
totalPages: totalPages,
163-
slidePercent: doneButtonPersist ? 0.0 : slidePercent,
164-
slideDirection: slideDirection,
165-
),
166-
)
167-
: Container(), //Row
168-
),
222+
padding: const EdgeInsets.only(bottom: 10.0),
223+
child: _getDoneORNextButton() //Row
224+
)
169225
],
170226
),
171227
),

‎lib/intro_views_flutter.dart‎

Lines changed: 61 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@ class IntroViewsFlutter extends StatefulWidget {
3030
/// Whether you want to show the skip button or not.
3131
final bool showSkipButton;
3232

33+
/// Whether you want to show the next button or not.
34+
final bool showNextButton;
35+
36+
/// Whether you want to show the back button or not.
37+
final bool showBackButton;
38+
3339
/// TextStyles for done, skip Buttons
3440
///
3541
/// overrides [pageButtonFontFamily] [pageButtonsColor] [pageButtonTextSize]
@@ -38,6 +44,12 @@ class IntroViewsFlutter extends StatefulWidget {
3844
/// run a function after skip Button pressed
3945
final VoidCallback onTapSkipButton;
4046

47+
/// run a function after next Button pressed
48+
final VoidCallback onTapNextButton;
49+
50+
/// run a function after back Button pressed
51+
final VoidCallback onTapBackButton;
52+
4153
/// set the Text Size for skip, done buttons
4254
///
4355
/// gets overridden by [pageButtonTextStyles]
@@ -52,6 +64,14 @@ class IntroViewsFlutter extends StatefulWidget {
5264
/// typicaly a Text Widget
5365
final Widget doneText;
5466

67+
/// Override 'BACK' Text with Your Own Text,
68+
/// typicaly a Text Widget
69+
final Widget backText;
70+
71+
/// Override 'NEXT' Text with Your Own Text,
72+
/// typicaly a Text Widget
73+
final Widget nextText;
74+
5575
/// Override 'Skip' Text with Your Own Text,
5676
/// typicaly a Text Widget
5777
final Widget skipText;
@@ -78,12 +98,18 @@ class IntroViewsFlutter extends StatefulWidget {
7898
this.onTapDoneButton,
7999
this.showSkipButton = true,
80100
this.pageButtonTextStyles,
101+
this.onTapBackButton,
102+
this.showNextButton = false,
103+
this.showBackButton = false,
81104
this.pageButtonTextSize = 18.0,
82105
this.pageButtonFontFamily,
83106
this.onTapSkipButton,
107+
this.onTapNextButton,
84108
this.pageButtonsColor,
85109
this.doneText = const Text("DONE"),
110+
this.nextText = const Text("NEXT"),
86111
this.skipText = const Text("SKIP"),
112+
this.backText = const Text("BACK"),
87113
this.doneButtonPersist = false,
88114
this.columnMainAxisAlignment = MainAxisAlignment.spaceAround,
89115
this.fullTransition = FULL_TARNSITION_PX,
@@ -140,17 +166,17 @@ class _IntroViewsFlutterState extends State<IntroViewsFlutter>
140166
if (slidePercent > 0.5) {
141167
animatedPageDragger = AnimatedPageDragger(
142168
slideDirection: slideDirection,
143-
transitionGoal:
144-
TransitionGoal.open, //we have to animate the open page reveal
169+
transitionGoal: TransitionGoal.open,
170+
//we have to animate the open page reveal
145171
slidePercent: slidePercent,
146172
slideUpdateStream: slideUpdateStream,
147173
vsync: this,
148174
);
149175
} else {
150176
animatedPageDragger = AnimatedPageDragger(
151177
slideDirection: slideDirection,
152-
transitionGoal:
153-
TransitionGoal.close, //we have to close the page reveal
178+
transitionGoal: TransitionGoal.close,
179+
//we have to close the page reveal
154180
slidePercent: slidePercent,
155181
slideUpdateStream: slideUpdateStream,
156182
vsync: this,
@@ -234,10 +260,10 @@ class _IntroViewsFlutterState extends State<IntroViewsFlutter>
234260
PageIndicatorButtons(
235261
//Skip and Done Buttons
236262
textStyle: textStyle,
237-
acitvePageIndex: activePageIndex,
263+
activePageIndex: activePageIndex,
238264
totalPages: pages.length,
239-
onPressedDoneButton: widget
240-
.onTapDoneButton, //void Callback to be executed after pressing done button
265+
onPressedDoneButton: widget.onTapDoneButton,
266+
//void Callback to be executed after pressing done button
241267
slidePercent: slidePercent,
242268
slideDirection: slideDirection,
243269
onPressedSkipButton: () {
@@ -253,7 +279,35 @@ class _IntroViewsFlutterState extends State<IntroViewsFlutter>
253279
});
254280
},
255281
showSkipButton: widget.showSkipButton,
282+
showNextButton: widget.showNextButton,
283+
showBackButton: widget.showBackButton,
284+
onPressedNextButton: () {
285+
//method executed on pressing next button
286+
setState(() {
287+
activePageIndex = activePageIndex + 1;
288+
nextPageIndex = nextPageIndex + 1;
289+
// after next pressed invoke function
290+
// this can be used for analytics/page transition
291+
if (widget.onTapNextButton != null) {
292+
widget.onTapNextButton();
293+
}
294+
});
295+
},
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+
},
308+
nextText: widget.nextText,
256309
doneText: widget.doneText,
310+
backText: widget.backText,
257311
skipText: widget.skipText,
258312
doneButtonPersist: widget.doneButtonPersist,
259313
),

0 commit comments

Comments
 (0)