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

lib/demos/material/navigation_drawer.dart

@@ -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.
+// 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);
 

lib/demos/material/navigation_rail_demo.dart

@@ -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) {
@@ -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,
@@ -88,7 +96,7 @@ class _NavRailDemoState extends State<NavRailDemo> {
           Expanded(
             child: Center(
               child: Text(
-                selectedItem[_selectedIndex],
+                selectedItem[_selectedIndex.value],
               ),
             ),
           ),

lib/demos/material/selection_controls_demo.dart

@@ -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;
@@ -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;
     });
   }
 
@@ -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,
             ),
         ],
@@ -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) {
@@ -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;
             });
           },
         ),

lib/demos/material/sliders_demo.dart

@@ -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) {
@@ -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;
                   });
                 },
               ),
@@ -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;
                   });
                 },
               ),
@@ -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(
@@ -164,7 +197,8 @@ class _RangeSlidersState extends State<_RangeSliders> {
                 max: 100,
                 onChanged: (values) {
                   setState(() {
-                    _continuousValues = values;
+                    _continuousStartValue.value = values.start;
+                    _continuousEndValue.value = values.end;
                   });
                 },
               ),
@@ -186,7 +220,8 @@ class _RangeSlidersState extends State<_RangeSliders> {
                 ),
                 onChanged: (values) {
                   setState(() {
-                    _discreteValues = values;
+                    _discreteStartValue.value = values.start;
+                    _discreteEndValue.value = values.end;
                   });
                 },
               ),
@@ -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),
@@ -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;
                     });
                   },
                 ),
@@ -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;
                     });
                   },
                 ),