Skip to content

Commit 4e193d1

Browse files
taljacobsontaljacobson
committed
add ability to add custom inner bubble widget,
change strict Text/image Widget types to Widget, remove new keyword
1 parent 9ab9f7f commit 4e193d1

File tree

8 files changed

+97
-320
lines changed

8 files changed

+97
-320
lines changed

‎README.md‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,15 @@ You should ensure that you add the `intro_views_flutter` as a dependency in your
4545

4646
```yaml
4747
dependencies:
48-
intro_views_flutter: "^2.2.4"
48+
intro_views_flutter: '^2.2.4'
4949
```
5050
5151
You can also reference the git repository directly if you want:
5252
5353
```yaml
5454
dependencies:
55-
intro_views_flutter:
56-
git: git://github.com/aagarwal1012/IntroViews-Flutter
55+
intro_views_flutter:
56+
git: git://github.com/aagarwal1012/IntroViews-Flutter
5757
```
5858
5959
You should then run `flutter packages get` in your terminal so as to get the package.
@@ -90,7 +90,7 @@ You should then run `flutter packages get` in your terminal so as to get the pac
9090
final Widget introViews = new IntroViewsFlutter(
9191
[page],
9292
onTapDoneButton: (){
93-
//Void Callback
93+
//Void Callback
9494
},
9595
showSkipButton: true,
9696
pageButtonTextStyles: new TextStyle(
@@ -111,33 +111,34 @@ You should then run `flutter packages get` in your terminal so as to get the pac
111111

112112
### PageViewModel Class
113113

114-
| Dart attribute | Datatype | Description | Default Value |
115-
| :-------------------- | :-------- | :-------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------: |
116-
| pageColor | Color | Set color of the page. | Null |
117-
| mainImage | Image | Set the main image of the page. | Null |
118-
| title | Text | Set the title text of the page. | Null |
119-
| body | Text | Set the body text of the page. | Null |
120-
| iconImageAssetPath | String | Set the icon image asset path that would be displayed in page bubble. | Null |
121-
| iconColor | Color | Set the page bubble icon color. | Null |
122-
| bubbleBackgroundColor | Color | Set the page bubble background color. | Colors.white |
123-
| textStyle | TextStyle | Set TextStyle for both title and body | title: `color: Colors.white , fontSize: 50.0` <br> body: `color: Colors.white , fontSize: 24.0` |
114+
| Dart attribute | Datatype | Description | Default Value |
115+
| :-------------------- | :------------- | :-------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------: |
116+
| pageColor | Color | Set color of the page. | Null |
117+
| mainImage | Image / Widget | Set the main image of the page. | Null |
118+
| title | Text / Widget | Set the title text of the page. | Null |
119+
| body | Text / Widget | Set the body text of the page. | Null |
120+
| iconImageAssetPath | String | Set the icon image asset path that would be displayed in page bubble. | Null |
121+
| iconColor | Color | Set the page bubble icon color. | Null |
122+
| bubbleBackgroundColor | Color | Set the page bubble background color. | Colors.white / Color(0x88FFFFFF) |
123+
| textStyle | TextStyle | Set TextStyle for both title and body | title: `color: Colors.white , fontSize: 50.0` <br> body: `color: Colors.white , fontSize: 24.0` |
124+
| bubble | Widget | set a costum widget for the inner bubble | null |
124125

125126
### IntroViewFlutter Class
126127

127-
| Dart attribute | Datatype | Description | Default Value |
128-
| :------------------- | :------------------ | :---------------------------------------------------------------------------------------------------------------- | :-------------------------------------: |
129-
| pages | List<PageViewModel> | Set the pages of the intro screen. | Null |
130-
| onTapDoneButton | VoidCallback | Method executes on tapping done button. | Null |
131-
| showSkipButton | Bool | Show the skip button at the bottom of page. | true |
132-
| pageButtonTextSize | Double | Set the button text size. | 18.0 |
133-
| pageButtonFontFamily | String | Set the font of button text. | Default |
134-
| onTapSkipButton | VoidCallback | Method executes on tapping skip button. | null |
135-
| pageButtonTextStyles | TextStyle | Configure TextStyle for skip, done buttons, overrides pageButtonFontFamily, pageButtonsColor, pageButtonTextSize. | fontSize: `18.0`, color: `Colors.white` |
136-
| skipText | Text | Override Skip Button Text and styles. | Text('SKIP') |
137-
| doneText | Text | Override Done Button Text and styles. | Text('DONE') |
138-
| doneButtonPersist | Bool | Show done Button throughout pages | false |
139-
| columnMainAxisAlignment | MainAxisAlignment | control [MainAxisAlignment] for column | MainAxisAlignment.spaceAround |
140-
| fullTransition | double | adjust scroll distance for full transition | 300.0 |
128+
| Dart attribute | Datatype | Description | Default Value |
129+
| :---------------------- | :------------------ | :---------------------------------------------------------------------------------------------------------------- | :-------------------------------------: |
130+
| pages | List<PageViewModel> | Set the pages of the intro screen. | Null |
131+
| onTapDoneButton | VoidCallback | Method executes on tapping done button. | Null |
132+
| showSkipButton | Bool | Show the skip button at the bottom of page. | true |
133+
| pageButtonTextSize | Double | Set the button text size. | 18.0 |
134+
| pageButtonFontFamily | String | Set the font of button text. | Default |
135+
| onTapSkipButton | VoidCallback | Method executes on tapping skip button. | null |
136+
| pageButtonTextStyles | TextStyle | Configure TextStyle for skip, done buttons, overrides pageButtonFontFamily, pageButtonsColor, pageButtonTextSize. | fontSize: `18.0`, color: `Colors.white` |
137+
| skipText | Text / Widget | Override Skip Button Text and styles. | Text('SKIP') |
138+
| doneText | Text / Widget | Override Done Button Text and styles. | Text('DONE') |
139+
| doneButtonPersist | Bool | Show done Button throughout pages | false |
140+
| columnMainAxisAlignment | MainAxisAlignment | control [MainAxisAlignment] for column | MainAxisAlignment.spaceAround |
141+
| fullTransition | double | adjust scroll distance for full transition | 300.0 |
141142

142143
For help on editing package code, view the [flutter documentation](https://flutter.io/developing-packages/).
143144

‎lib/Animation_Gesture/animated_page_dragger.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,12 @@ class AnimatedPageDragger {
7070
}
7171

7272
//This method is used to run animation Controller
73-
run() {
73+
void run() {
7474
completionAnimationController.forward(from: 0.0);
7575
}
7676

7777
//This method is used to dispose animation controller
78-
dispose() {
78+
void dispose() {
7979
completionAnimationController.dispose();
8080
}
8181
}

‎lib/Models/page_bubble_view_model.dart‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,15 @@ class PageBubbleViewModel {
77
final Color iconColor;
88
final bool isHollow;
99
final double activePercent;
10-
Color bubbleBackgroundColor;
10+
final Color bubbleBackgroundColor;
11+
final Widget bubbleInner;
1112

12-
PageBubbleViewModel(
13-
this.iconAssetPath, this.iconColor, this.isHollow, this.activePercent,
14-
{this.bubbleBackgroundColor}) {
15-
if (bubbleBackgroundColor == null)
16-
bubbleBackgroundColor = const Color(0x88FFFFFF);
17-
}
13+
PageBubbleViewModel({
14+
this.bubbleInner,
15+
this.iconAssetPath,
16+
this.iconColor,
17+
this.isHollow,
18+
this.activePercent,
19+
this.bubbleBackgroundColor = const Color(0x88FFFFFF),
20+
}) : assert(bubbleBackgroundColor != null);
1821
}

‎lib/Models/page_view_model.dart‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,34 @@ class PageViewModel {
1717
/// @Default `const Color(0x88FFFFFF)`
1818
final Color bubbleBackgroundColor;
1919

20-
/// Text widget for the title
20+
/// widget for the title
2121
///
22-
/// @Default style `color: Colors.white , fontSize: 50.0`
23-
final Text title;
22+
/// _typicaly a Text Widget_
23+
///
24+
/// @Default Textstyle `color: Colors.white , fontSize: 50.0`
25+
final Widget title;
2426

25-
/// Text widget for the title
27+
/// widget for the body
28+
///
29+
/// _typicaly a Text Widget_
2630
///
27-
/// @Default style `color: Colors.white, fontSize: 24.0`
28-
final Text body;
31+
/// @Default Textstyle `color: Colors.white, fontSize: 24.0`
32+
final Widget body;
2933

3034
/// set default TextStyle for both title and body
3135
final TextStyle textStyle;
3236

3337
/// Image Widget
34-
final Image mainImage;
38+
///
39+
/// _typicaly a Image Widget_
40+
final Widget mainImage;
41+
42+
/// bubble inner Widget
43+
///
44+
/// _typicaly a Image Widget_
45+
///
46+
/// gets overriden by [iconImageAssetPath]
47+
final Widget bubble;
3548

3649
PageViewModel(
3750
{this.pageColor,
@@ -41,15 +54,14 @@ class PageViewModel {
4154
@required this.title,
4255
@required this.body,
4356
@required this.mainImage,
57+
this.bubble,
4458
this.textStyle});
4559

4660
TextStyle get titleTextStyle {
47-
return new TextStyle(color: Colors.white, fontSize: 50.0)
48-
.merge(this.textStyle);
61+
return TextStyle(color: Colors.white, fontSize: 50.0).merge(this.textStyle);
4962
}
5063

5164
TextStyle get bodyTextStyle {
52-
return new TextStyle(color: Colors.white, fontSize: 24.0)
53-
.merge(this.textStyle);
65+
return TextStyle(color: Colors.white, fontSize: 24.0).merge(this.textStyle);
5466
}
5567
}

‎lib/UI/page_bubble.dart‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,44 +15,49 @@ class PageBubble extends StatelessWidget {
1515

1616
@override
1717
Widget build(BuildContext context) {
18-
return new Container(
18+
return Container(
1919
width: 55.0,
2020
height: 65.0,
21-
child: new Center(
22-
child: new Padding(
21+
child: Center(
22+
child: Padding(
2323
padding: const EdgeInsets.all(10.0),
24-
child: new Container(
24+
child: Container(
2525
width: lerpDouble(
2626
20.0,
2727
45.0,
2828
viewModel
2929
.activePercent), //This method return in between values according to active percent.
3030
height: lerpDouble(20.0, 45.0, viewModel.activePercent),
31-
decoration: new BoxDecoration(
31+
decoration: BoxDecoration(
3232
shape: BoxShape.circle,
3333
//Alpha is used to create fade effect for background color
3434
color: viewModel.isHollow
3535
? viewModel.bubbleBackgroundColor
3636
.withAlpha((0x88 * viewModel.activePercent).round())
3737
: viewModel.bubbleBackgroundColor,
38-
border: new Border.all(
38+
border: Border.all(
3939
color: viewModel.isHollow
4040
? viewModel.bubbleBackgroundColor.withAlpha(
4141
(0x88 * (1 - viewModel.activePercent)).round())
4242
: Colors.transparent,
4343
width: 3.0,
4444
), //Border
4545
), //BoxDecoration
46-
child: new Opacity(
46+
child: Opacity(
4747
opacity: viewModel.activePercent,
4848
child: (viewModel.iconAssetPath != null &&
4949
viewModel.iconAssetPath != "")
5050
// ignore: conflicting_dart_import
51-
? new Image.asset(
51+
? Image.asset(
5252
viewModel.iconAssetPath,
5353
color: viewModel.iconColor,
5454
)
55-
: new Container(),
55+
: viewModel.bubbleInner != null
56+
? Transform.scale(
57+
scale: viewModel.activePercent.clamp(0.5, 1.0),
58+
child: viewModel.bubbleInner,
59+
)
60+
: Container(),
5661
), //opacity
5762
), //Container
5863
), //Padding

‎lib/UI/pager_indicator.dart‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,14 @@ class PagerIndicator extends StatelessWidget {
4343
viewModel.slideDirection == SlideDirection.leftToRight);
4444

4545
//Adding to the list
46-
bubbles.add(new PageBubble(
47-
viewModel: new PageBubbleViewModel(
48-
page.iconImageAssetPath,
49-
page.iconColor,
50-
isHollow,
51-
percentActive,
46+
bubbles.add(PageBubble(
47+
viewModel: PageBubbleViewModel(
48+
iconAssetPath: page.iconImageAssetPath,
49+
iconColor: page.iconColor,
50+
isHollow: isHollow,
51+
activePercent: percentActive,
5252
bubbleBackgroundColor: page.bubbleBackgroundColor,
53+
bubbleInner: page.bubble,
5354
),
5455
));
5556
}
@@ -65,16 +66,16 @@ class PagerIndicator extends StatelessWidget {
6566
translation -= BUBBLE_WIDTH * viewModel.slidePercent;
6667
}
6768
//UI
68-
return new Column(
69+
return Column(
6970
children: <Widget>[
70-
new Expanded(child: new Container()),
71-
new Row(
71+
Expanded(child: Container()),
72+
Row(
7273
mainAxisAlignment: MainAxisAlignment.center,
7374
children: [
74-
new Transform(
75+
Transform(
7576
// used for horizontal transformation
76-
transform: new Matrix4.translationValues(translation, 0.0, 0.0),
77-
child: new Row(
77+
transform: Matrix4.translationValues(translation, 0.0, 0.0),
78+
child: Row(
7879
mainAxisAlignment: MainAxisAlignment.center,
7980
children: bubbles,
8081
), //Row

‎lib/intro_views_flutter.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ class _IntroViewsFlutterState extends State<IntroViewsFlutter>
174174
slidePercent = 0.0;
175175

176176
//disposing the animation controller
177-
animatedPageDragger?.dispose();
177+
// animatedPageDragger?.dispose();
178178
}
179179
});
180180
});

0 commit comments

Comments
 (0)