Skip to content

Commit cff6dcf

Browse files
davigmacodedavigmacode
committed
example: chips tile, modal confirm, and builder
1 parent 44ba51c commit cff6dcf

File tree

8 files changed

+135
-65
lines changed

8 files changed

+135
-65
lines changed

‎example/lib/features_choices/choices_builder.dart‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ class _FeaturesChoicesBuilderState extends State<FeaturesChoicesBuilder> {
8484
),
8585
const Divider(indent: 20),
8686
SmartSelect<String>.multiple(
87-
title: 'Admin',
87+
title: 'Passengers',
8888
value: _user,
8989
onChange: (state) => setState(() => _user = state.value),
9090
modalFilter: true,
@@ -133,13 +133,18 @@ class _FeaturesChoicesBuilderState extends State<FeaturesChoicesBuilder> {
133133
);
134134
},
135135
tileBuilder: (context, state) {
136-
return S2Tile.fromState(
136+
return S2ChipsTile<String>.fromState(
137137
state,
138-
isTwoLine: true,
139-
isLoading: _usersIsLoading,
140-
leading: const CircleAvatar(
141-
backgroundImage: NetworkImage('https://source.unsplash.com/8I-ht65iRww/100x100'),
138+
trailing: const Icon(Icons.add_circle_outline),
139+
chipColor: Colors.blue,
140+
chipBorderOpacity: .5,
141+
chipBrightness: Brightness.light,
142+
chipAvatarBuilder: (context, i) => CircleAvatar(
143+
backgroundImage: NetworkImage(state.valueObject[i].meta['picture']['thumbnail'])
142144
),
145+
chipOnDelete: (value) {
146+
setState(() => _user.remove(value));
147+
},
143148
);
144149
},
145150
),

‎example/lib/features_choices/choices_grouped.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ class _FeaturesChoicesGroupedState extends State<FeaturesChoicesGrouped> {
6060
activeColor: Colors.redAccent
6161
),
6262
modalType: S2ModalType.bottomSheet,
63-
modalConfirmation: true,
63+
modalConfirm: true,
6464
modalFilter: true,
6565
choiceGroupBuilder: (context, header, choices) {
6666
return StickyHeader(

‎example/lib/features_choices/choices_theme.dart‎

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,14 @@ class _FeaturesChoicesThemeState extends State<FeaturesChoicesTheme> {
1212

1313
List<String> _smartphones = [];
1414

15+
Color _background = Colors.blue;
16+
List<List> _backgrounds = [
17+
['Blue', Colors.blue],
18+
['Green', Colors.green],
19+
['Orange', Colors.deepOrange],
20+
['Red', Colors.redAccent],
21+
];
22+
1523
@override
1624
Widget build(BuildContext context) {
1725
return Column(
@@ -43,7 +51,7 @@ class _FeaturesChoicesThemeState extends State<FeaturesChoicesTheme> {
4351
),
4452
headerStyle: S2ChoiceHeaderStyle(
4553
backgroundColor: Colors.blueGrey[600],
46-
textStyle: TextStyle(color: Colors.white)
54+
textStyle: const TextStyle(color: Colors.white)
4755
)
4856
),
4957
modalConfig: S2ModalConfig(
@@ -61,7 +69,7 @@ class _FeaturesChoicesThemeState extends State<FeaturesChoicesTheme> {
6169
actionsIconTheme: IconThemeData(color: Colors.white),
6270
),
6371
),
64-
choiceDividerBuilder: (context, i) => Divider(
72+
choiceDividerBuilder: (context, i) => const Divider(
6573
color: Colors.white24,
6674
indent: 0.0,
6775
endIndent: 0.0,
@@ -77,6 +85,55 @@ class _FeaturesChoicesThemeState extends State<FeaturesChoicesTheme> {
7785
);
7886
}
7987
),
88+
const Divider(indent: 20),
89+
SmartSelect<Color>.single(
90+
title: 'Color',
91+
value: _background,
92+
choiceItems: S2Choice.listFrom<Color, List>(
93+
source: _backgrounds,
94+
value: (i, v) => v[1],
95+
title: (i, v) => v[0]
96+
),
97+
choiceStyle: S2ChoiceStyle(
98+
titleStyle: const TextStyle(
99+
color: Colors.white
100+
),
101+
color: Colors.white.withOpacity(.5),
102+
activeColor: Colors.white,
103+
),
104+
modalConfirmBuilder: (context, state) {
105+
return FlatButton(
106+
onPressed: () => state.closeModal(confirmed: true),
107+
child: const Text(
108+
'Change',
109+
style: TextStyle(
110+
color: Colors.white
111+
),
112+
),
113+
);
114+
},
115+
modalStyle: S2ModalStyle(
116+
backgroundColor: _background,
117+
),
118+
modalHeaderStyle: S2ModalHeaderStyle(
119+
elevation: 0,
120+
backgroundColor: _background,
121+
textStyle: TextStyle(
122+
color: Colors.white
123+
)
124+
),
125+
modalType: S2ModalType.popupDialog,
126+
onChange: (state) => setState(() => _background = state.value),
127+
tileBuilder: (context, state) {
128+
return S2Tile<Color>.fromState(
129+
state,
130+
isTwoLine: true,
131+
leading: CircleAvatar(
132+
backgroundColor: state.value,
133+
),
134+
);
135+
},
136+
),
80137
const SizedBox(height: 7),
81138
],
82139
);

‎example/lib/features_modal/modal_confirm.dart‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ class _FeaturesModalConfirmState extends State<FeaturesModalConfirm> {
2424
onChange: (state) => setState(() => _day = state.value),
2525
choiceItems: choices.days,
2626
modalType: S2ModalType.fullPage,
27-
modalConfirmation: true,
27+
modalConfirm: true,
2828
tileBuilder: (context, state) {
2929
return S2Tile(
3030
title: state.titleWidget,
@@ -44,7 +44,7 @@ class _FeaturesModalConfirmState extends State<FeaturesModalConfirm> {
4444
onChange: (state) => setState(() => _fruit = state.value),
4545
choiceItems: choices.fruits,
4646
modalType: S2ModalType.popupDialog,
47-
modalConfirmation: true,
47+
modalConfirm: true,
4848
modalValidation: (value) => value.length > 0,
4949
tileBuilder: (context, state) {
5050
return S2Tile.fromState(
@@ -58,12 +58,7 @@ class _FeaturesModalConfirmState extends State<FeaturesModalConfirm> {
5858
);
5959
},
6060
modalActionsBuilder: (context, state) {
61-
return <Widget>[
62-
Padding(
63-
padding: const EdgeInsets.only(right: 13),
64-
child: state.choiceSelector,
65-
)
66-
];
61+
return [];
6762
},
6863
modalDividerBuilder: (context, state) {
6964
return const Divider(height: 1);
@@ -105,7 +100,7 @@ class _FeaturesModalConfirmState extends State<FeaturesModalConfirm> {
105100
activeColor: Colors.redAccent
106101
),
107102
modalType: S2ModalType.bottomSheet,
108-
modalConfirmation: true,
103+
modalConfirm: true,
109104
tileBuilder: (context, state) {
110105
return S2Tile.fromState(
111106
state,

‎example/lib/features_modal/modal_selector.dart‎

Lines changed: 56 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ class _FeaturesModalSelectorState extends State<FeaturesModalSelector> {
2323
onChange: (state) => setState(() => _fruit = state.value),
2424
choiceItems: choices.fruits,
2525
modalType: S2ModalType.popupDialog,
26-
modalConfirmation: true,
26+
modalConfirm: true,
2727
modalValidation: (value) => value.length > 0,
2828
tileBuilder: (context, state) {
2929
return S2Tile.fromState(
@@ -88,45 +88,63 @@ class _FeaturesModalSelectorState extends State<FeaturesModalSelector> {
8888
meta: (index, item) => item,
8989
),
9090
choiceType: S2ChoiceType.chips,
91-
modalType: S2ModalType.bottomSheet,
92-
modalActionsBuilder: (context, state) {
93-
return [
94-
ActionButton(
95-
label: const Text('Low End'),
96-
onTap: () {
97-
state.changes.value = state.widget.choiceItems
98-
.where((item) => item.meta['category'] == 'Budget Phone')
99-
.map((item) => item.value)
100-
.toList();
101-
},
102-
),
103-
ActionButton(
104-
label: const Text('Mid End'),
105-
onTap: () {
106-
state.changes.value = state.widget.choiceItems
107-
.where((item) => item.meta['category'] == 'Mid End Phone')
108-
.map((item) => item.value)
109-
.toList();
110-
},
111-
),
112-
ActionButton(
113-
label: const Text('High End'),
114-
onTap: () {
115-
state.changes.value = state.widget.choiceItems
116-
.where((item) => item.meta['category'] == 'Flagship Phone')
117-
.map((item) => item.value)
118-
.toList();
119-
},
91+
modalFilter: true,
92+
modalType: S2ModalType.fullPage,
93+
modalFooterBuilder: (context, state) {
94+
return Container(
95+
child: Row(
96+
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
97+
children: <Widget>[
98+
ActionButton(
99+
label: const Text('All/None'),
100+
onTap: () {
101+
state.changes.selectToggle();
102+
},
103+
),
104+
ActionButton(
105+
label: const Text('Low End'),
106+
onTap: () {
107+
state.changes.value = state.widget.choiceItems
108+
.where((item) => item.meta['category'] == 'Budget Phone')
109+
.map((item) => item.value)
110+
.toList();
111+
},
112+
),
113+
ActionButton(
114+
label: const Text('Mid End'),
115+
onTap: () {
116+
state.changes.value = state.widget.choiceItems
117+
.where((item) => item.meta['category'] == 'Mid End Phone')
118+
.map((item) => item.value)
119+
.toList();
120+
},
121+
),
122+
ActionButton(
123+
label: const Text('High End'),
124+
onTap: () {
125+
state.changes.value = state.widget.choiceItems
126+
.where((item) => item.meta['category'] == 'Flagship Phone')
127+
.map((item) => item.value)
128+
.toList();
129+
},
130+
),
131+
],
120132
),
121-
];
133+
);
122134
},
123135
tileBuilder: (context, state) {
124-
return S2Tile.fromState(
136+
return S2ChipsTile<String>.fromState(
125137
state,
126-
isTwoLine: true,
138+
trailing: const Icon(Icons.add_circle_outline),
127139
leading: const CircleAvatar(
128140
backgroundImage: NetworkImage('https://source.unsplash.com/xsGxhtAsfSA/100x100'),
129141
),
142+
chipColor: Colors.blue,
143+
chipBorderOpacity: .3,
144+
chipBrightness: Brightness.light,
145+
chipOnDelete: (value) {
146+
setState(() => _smartphone.remove(value));
147+
},
130148
);
131149
}
132150
),
@@ -149,16 +167,11 @@ class ActionButton extends StatelessWidget {
149167

150168
@override
151169
Widget build(BuildContext context) {
152-
return Center(
153-
child: Padding(
154-
padding: const EdgeInsets.fromLTRB(0, 0, 10, 0),
155-
child: FlatButton(
156-
child: label,
157-
color: Colors.redAccent,
158-
textColor: Colors.white,
159-
onPressed: onTap,
160-
),
161-
),
170+
return FlatButton(
171+
child: label,
172+
color: Colors.blue,
173+
textColor: Colors.white,
174+
onPressed: onTap,
162175
);
163176
}
164177
}

‎example/lib/features_modal/modal_validation.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ class _FeaturesModalValidationState extends State<FeaturesModalValidation> {
2222
onChange: (state) => setState(() => _fruit = state.value),
2323
choiceItems: choices.fruits,
2424
modalType: S2ModalType.popupDialog,
25-
modalConfirmation: true,
25+
modalConfirm: true,
2626
modalValidation: (value) => value.length > 0,
2727
tileBuilder: (context, state) {
2828
return S2Tile.fromState(

‎example/lib/features_modal/modal_widget.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ class _FeaturesModalWidgetState extends State<FeaturesModalWidget> {
109109
wrapperPadding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
110110
),
111111
),
112-
modalConfirmation: true,
112+
modalConfirm: true,
113113
modalType: S2ModalType.bottomSheet,
114114
modalValidation: (value) => value.length > 0,
115115
modalHeaderBuilder: (context, state) {
@@ -159,7 +159,7 @@ class _FeaturesModalWidgetState extends State<FeaturesModalWidget> {
159159
// trailing: Icon(Icons.add_circle_outline),
160160
// scrollable: true,
161161
// divider: Divider(height: 1),
162-
placeholderIgnored: true,
162+
placeholderIgnore: true,
163163
chipColor: Colors.blue,
164164
chipBrightness: Brightness.dark,
165165
),

‎example/lib/features_tile/tile_builder.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ class _FeaturesTileBuilderState extends State<FeaturesTileBuilder> {
8080
),
8181
onChange: (state) => setState(() => _cars = state.value),
8282
modalType: S2ModalType.bottomSheet,
83-
modalConfirmation: true,
83+
modalConfirm: true,
8484
modalFilter: true,
8585
choiceGrouped: true,
8686
tileBuilder: (context, state) {

0 commit comments

Comments
 (0)