Skip to content
This repository has been archived by the owner on Jun 13, 2024. It is now read-only.

[State Restoration] Restorable Material Code Samples - Part 3/3 #382

Merged
merged 13 commits into from
Dec 6, 2020
Merged

[State Restoration] Restorable Material Code Samples - Part 3/3 #382

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
ebb2120
State restorable navigation rail
shihaohong Nov 20, 2020
7b38752
Merge branch 'master' of github.com:flutter/gallery into more-demos-pt2
shihaohong Nov 25, 2020
a03d7e0
navigation rail and selection controls demo
shihaohong Dec 3, 2020
a808a38
Remove RestorationMixin from SelectionControls Demo for now
shihaohong Dec 3, 2020
3f102cc
Migrate remaining selection controls demos
shihaohong Dec 3, 2020
041a441
Restorable Sliders
shihaohong Dec 3, 2020
819d0fb
Restorable non scrolling tab
shihaohong Dec 3, 2020
168ba07
Flutter format
shihaohong Dec 3, 2020
8ab1b65
Restorable scrollable tabs
shihaohong Dec 3, 2020
62f5be2
TextFormField TODO
shihaohong Dec 3, 2020
97003bc
updated code segments
shihaohong Dec 3, 2020
5bc74ce
Code review comments + inline code comments
shihaohong Dec 6, 2020
20f7406
More inline code comments
shihaohong Dec 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,134 changes: 1,013 additions & 121 deletions lib/codeviewer/code_segments.dart
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions lib/demos/material/navigation_drawer.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import 'package:flutter/cupertino.dart';

// BEGIN navDrawerDemo

// Pressing the Navigation Drawer button the left of Appbar to show
// a simple Drawer with Two items.
// Pressing the Navigation Drawer button the left of AppBar to show
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// Pressing the Navigation Drawer button the left of AppBar to show
// Press the Navigation Drawer button to the left of AppBar to show

// a simple Drawer with two items.
class NavDrawerDemo extends StatelessWidget {
const NavDrawerDemo({Key key}) : super(key: key);

Expand Down
18 changes: 13 additions & 5 deletions lib/demos/material/navigation_rail_demo.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,16 @@ class NavRailDemo extends StatefulWidget {
_NavRailDemoState createState() => _NavRailDemoState();
}

class _NavRailDemoState extends State<NavRailDemo> {
int _selectedIndex = 0;
class _NavRailDemoState extends State<NavRailDemo> with RestorationMixin {
final RestorableInt _selectedIndex = RestorableInt(0);

@override
String get restorationId => 'nav_rail_demo';

@override
void restoreState(RestorationBucket oldBucket, bool initialRestore) {
registerForRestoration(_selectedIndex, 'selected_index');
}

@override
Widget build(BuildContext context) {
Expand All @@ -41,10 +49,10 @@ class _NavRailDemoState extends State<NavRailDemo> {
child: const Icon(Icons.add),
onPressed: () {},
),
selectedIndex: _selectedIndex,
selectedIndex: _selectedIndex.value,
onDestinationSelected: (index) {
setState(() {
_selectedIndex = index;
_selectedIndex.value = index;
});
},
labelType: NavigationRailLabelType.selected,
Expand Down Expand Up @@ -88,7 +96,7 @@ class _NavRailDemoState extends State<NavRailDemo> {
Expanded(
child: Center(
child: Text(
selectedItem[_selectedIndex],
selectedItem[_selectedIndex.value],
),
),
),
Expand Down
35 changes: 27 additions & 8 deletions lib/demos/material/selection_controls_demo.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,9 @@ class _CheckboxDemo extends StatefulWidget {
}

class _CheckboxDemoState extends State<_CheckboxDemo> {
// TODO(shihaohong): Introduce RestorableBoolN into the framework
// to allow checkboxes to be properly state restorable (null value has
// meaning in checkboxes).
bool checkboxValueA = true;
bool checkboxValueB = false;
bool checkboxValueC;
Expand Down Expand Up @@ -114,12 +117,20 @@ class _RadioDemo extends StatefulWidget {
_RadioDemoState createState() => _RadioDemoState();
}

class _RadioDemoState extends State<_RadioDemo> {
int radioValue = 0;
class _RadioDemoState extends State<_RadioDemo> with RestorationMixin {
final RestorableInt radioValue = RestorableInt(0);

@override
String get restorationId => 'radio_demo';

@override
void restoreState(RestorationBucket oldBucket, bool initialRestore) {
registerForRestoration(radioValue, 'radio_value');
}

void handleRadioValueChanged(int value) {
setState(() {
radioValue = value;
radioValue.value = value;
});
}

Expand All @@ -132,7 +143,7 @@ class _RadioDemoState extends State<_RadioDemo> {
for (int index = 0; index < 3; ++index)
Radio<int>(
value: index,
groupValue: radioValue,
groupValue: radioValue.value,
onChanged: handleRadioValueChanged,
),
],
Expand All @@ -150,8 +161,16 @@ class _SwitchDemo extends StatefulWidget {
_SwitchDemoState createState() => _SwitchDemoState();
}

class _SwitchDemoState extends State<_SwitchDemo> {
bool switchValue = false;
class _SwitchDemoState extends State<_SwitchDemo> with RestorationMixin {
RestorableBool switchValue = RestorableBool(false);

@override
String get restorationId => 'switch_demo';

@override
void restoreState(RestorationBucket oldBucket, bool initialRestore) {
registerForRestoration(switchValue, 'switch_value');
}

@override
Widget build(BuildContext context) {
Expand All @@ -161,10 +180,10 @@ class _SwitchDemoState extends State<_SwitchDemo> {
label:
GalleryLocalizations.of(context).demoSelectionControlsSwitchTitle,
child: Switch(
value: switchValue,
value: switchValue.value,
onChanged: (value) {
setState(() {
switchValue = value;
switchValue.value = value;
});
},
),
Expand Down
101 changes: 77 additions & 24 deletions lib/demos/material/sliders_demo.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,18 @@ class _Sliders extends StatefulWidget {
_SlidersState createState() => _SlidersState();
}

class _SlidersState extends State<_Sliders> {
double _continuousValue = 25;
double _discreteValue = 20;
class _SlidersState extends State<_Sliders> with RestorationMixin {
final RestorableDouble _continuousValue = RestorableDouble(25);
final RestorableDouble _discreteValue = RestorableDouble(20);

@override
String get restorationId => 'slider_demo';

@override
void restoreState(RestorationBucket oldBucket, bool initialRestore) {
registerForRestoration(_continuousValue, 'continuous_value');
registerForRestoration(_discreteValue, 'discrete_value');
}

@override
Widget build(BuildContext context) {
Expand All @@ -83,26 +92,28 @@ class _SlidersState extends State<_Sliders> {
textAlign: TextAlign.center,
onSubmitted: (value) {
final newValue = double.tryParse(value);
if (newValue != null && newValue != _continuousValue) {
if (newValue != null &&
newValue != _continuousValue.value) {
setState(() {
_continuousValue = newValue.clamp(0, 100) as double;
_continuousValue.value =
newValue.clamp(0, 100) as double;
});
}
},
keyboardType: TextInputType.number,
controller: TextEditingController(
text: _continuousValue.toStringAsFixed(0),
text: _continuousValue.value.toStringAsFixed(0),
),
),
),
),
Slider(
value: _continuousValue,
value: _continuousValue.value,
min: 0,
max: 100,
onChanged: (value) {
setState(() {
_continuousValue = value;
_continuousValue.value = value;
});
},
),
Expand All @@ -115,14 +126,14 @@ class _SlidersState extends State<_Sliders> {
mainAxisSize: MainAxisSize.min,
children: [
Slider(
value: _discreteValue,
value: _discreteValue.value,
min: 0,
max: 200,
divisions: 5,
label: _discreteValue.round().toString(),
label: _discreteValue.value.round().toString(),
onChanged: (value) {
setState(() {
_discreteValue = value;
_discreteValue.value = value;
});
},
),
Expand All @@ -144,12 +155,34 @@ class _RangeSliders extends StatefulWidget {
_RangeSlidersState createState() => _RangeSlidersState();
}

class _RangeSlidersState extends State<_RangeSliders> {
RangeValues _continuousValues = const RangeValues(25, 75);
RangeValues _discreteValues = const RangeValues(40, 120);
class _RangeSlidersState extends State<_RangeSliders> with RestorationMixin {
final RestorableDouble _continuousStartValue = RestorableDouble(25);
final RestorableDouble _continuousEndValue = RestorableDouble(75);
final RestorableDouble _discreteStartValue = RestorableDouble(40);
final RestorableDouble _discreteEndValue = RestorableDouble(120);

@override
String get restorationId => 'range_sliders_demo';

@override
void restoreState(RestorationBucket oldBucket, bool initialRestore) {
registerForRestoration(_continuousStartValue, 'continuous_start_value');
registerForRestoration(_continuousEndValue, 'continuous_end_value');
registerForRestoration(_discreteStartValue, 'discrete_start_value');
registerForRestoration(_discreteEndValue, 'discrete_end_value');
}

@override
Widget build(BuildContext context) {
final _continuousValues = RangeValues(
_continuousStartValue.value,
_continuousEndValue.value,
);
final _discreteValues = RangeValues(
_discreteStartValue.value,
_discreteEndValue.value,
);

return Padding(
padding: const EdgeInsets.symmetric(horizontal: 40),
child: Column(
Expand All @@ -164,7 +197,8 @@ class _RangeSlidersState extends State<_RangeSliders> {
max: 100,
onChanged: (values) {
setState(() {
_continuousValues = values;
_continuousStartValue.value = values.start;
_continuousEndValue.value = values.end;
});
},
),
Expand All @@ -186,7 +220,8 @@ class _RangeSlidersState extends State<_RangeSliders> {
),
onChanged: (values) {
setState(() {
_discreteValues = values;
_discreteStartValue.value = values.start;
_discreteEndValue.value = values.end;
});
},
),
Expand Down Expand Up @@ -423,12 +458,29 @@ class _CustomSliders extends StatefulWidget {
_CustomSlidersState createState() => _CustomSlidersState();
}

class _CustomSlidersState extends State<_CustomSliders> {
double _discreteCustomValue = 25;
RangeValues _continuousCustomValues = const RangeValues(40, 160);
class _CustomSlidersState extends State<_CustomSliders> with RestorationMixin {
final RestorableDouble _continuousStartCustomValue = RestorableDouble(40);
final RestorableDouble _continuousEndCustomValue = RestorableDouble(160);
final RestorableDouble _discreteCustomValue = RestorableDouble(25);

@override
String get restorationId => 'custom_sliders_demo';

@override
void restoreState(RestorationBucket oldBucket, bool initialRestore) {
registerForRestoration(
_continuousStartCustomValue, 'continuous_start_custom_value');
registerForRestoration(
_continuousEndCustomValue, 'continuous_end_custom_value');
registerForRestoration(_discreteCustomValue, 'discrete_custom_value');
}

@override
Widget build(BuildContext context) {
final customRangeValue = RangeValues(
_continuousStartCustomValue.value,
_continuousEndCustomValue.value,
);
final theme = Theme.of(context);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 40),
Expand Down Expand Up @@ -457,16 +509,16 @@ class _CustomSlidersState extends State<_CustomSliders> {
.copyWith(color: theme.colorScheme.onSurface),
),
child: Slider(
value: _discreteCustomValue,
value: _discreteCustomValue.value,
min: 0,
max: 200,
divisions: 5,
semanticFormatterCallback: (value) =>
value.round().toString(),
label: '${_discreteCustomValue.round()}',
label: '${_discreteCustomValue.value.round()}',
onChanged: (value) {
setState(() {
_discreteCustomValue = value;
_discreteCustomValue.value = value;
});
},
),
Expand All @@ -492,12 +544,13 @@ class _CustomSlidersState extends State<_CustomSliders> {
showValueIndicator: ShowValueIndicator.never,
),
child: RangeSlider(
values: _continuousCustomValues,
values: customRangeValue,
min: 0,
max: 200,
onChanged: (values) {
setState(() {
_continuousCustomValues = values;
_continuousStartCustomValue.value = values.start;
_continuousEndCustomValue.value = values.end;
});
},
),
Expand Down
Loading