refactor: extract picker widget

lib/models/code.dart

@@ -20,7 +20,7 @@ class CodeModel with ChangeNotifier {
   ];
 
   String _theme = 'github';
-  int _fontSize = 14;
+  int _fontSize = 16;
   String _fontFamily = 'System';
 
   String get theme => _theme;

lib/models/theme.dart

@@ -1,4 +1,3 @@
-import 'dart:async';
 import 'dart:io';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
@@ -10,12 +9,6 @@ class DialogOption<T> {
   DialogOption({this.value, this.widget});
 }
 
-class PickerItem<T> {
-  final T value;
-  final String text;
-  PickerItem(this.value, {@required this.text});
-}
-
 class AppThemeType {
   static const material = 0;
   static const cupertino = 1;
@@ -187,53 +180,4 @@ class ThemeModel with ChangeNotifier {
         );
     }
   }
-
-  static Timer _debounce;
-
-  showPicker<T>(
-    BuildContext context, {
-    @required T initialValue,
-    @required List<PickerItem<T>> items,
-    @required Function(T item) onChange,
-  }) async {
-    switch (theme) {
-      case AppThemeType.cupertino:
-        await showCupertinoModalPopup<void>(
-          context: context,
-          builder: (context) {
-            return Container(
-              height: 300,
-              child: CupertinoPicker(
-                backgroundColor: CupertinoColors.white,
-                children: items.map((item) => Text(item.text)).toList(),
-                itemExtent: 40,
-                scrollController: FixedExtentScrollController(
-                    initialItem:
-                        items.indexWhere((item) => item.value == initialValue)),
-                onSelectedItemChanged: (index) {
-                  if (_debounce?.isActive ?? false) _debounce.cancel();
-                  _debounce = Timer(const Duration(milliseconds: 500), () {
-                    return onChange(items[index].value);
-                  });
-                },
-              ),
-            );
-          },
-        );
-        break;
-      default:
-        final value = await showMenu<T>(
-          context: context,
-          initialValue: initialValue,
-          items: items
-              .map((item) =>
-                  PopupMenuItem(value: item.value, child: Text(item.text)))
-              .toList(),
-          position: RelativeRect.fill,
-        );
-        if (value != null) {
-          onChange(value);
-        }
-    }
-  }
 }

lib/screens/code_settings.dart

@@ -3,10 +3,9 @@ import 'package:flutter/material.dart';
 import 'package:flutter_highlight/flutter_highlight.dart';
 import 'package:flutter_highlight/theme_map.dart';
 import 'package:git_touch/models/code.dart';
-import 'package:git_touch/models/theme.dart';
 import 'package:git_touch/scaffolds/simple.dart';
 import 'package:git_touch/widgets/app_bar_title.dart';
-import 'package:git_touch/widgets/table_view.dart';
+import 'package:git_touch/widgets/picker.dart';
 import 'package:provider/provider.dart';
 
 class CodeSettingsScreen extends StatelessWidget {
@@ -25,56 +24,34 @@ class CodeSettingsScreen extends StatelessWidget {
         return Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: <Widget>[
-            TableView(
+            PickerGroup(
               items: [
-                TableViewItem(
+                PickerGroupItem(
-                  text: Text('Syntax Highlighting'),
+                  title: 'Syntax Highlighting',
-                  rightWidget: Text(codeProvider.theme),
+                  value: codeProvider.theme,
-                  onTap: () {
+                  items: CodeModel.themes.map((v) => PickerItem(v, text: v)),
-                    Provider.of<ThemeModel>(context).showPicker(
+                  onChange: (value) {
-                      context,
-                      items: CodeModel.themes
-                          .map((t) => PickerItem(t, text: t))
-                          .toList(),
-                      initialValue: codeProvider.theme,
-                      onChange: (String value) {
                     Provider.of<CodeModel>(context).setTheme(value);
                   },
-                    );
-                  },
                 ),
-                TableViewItem(
+                PickerGroupItem(
-                  text: Text('Font Size'),
+                  title: 'Font Size',
-                  rightWidget: Text(codeProvider.fontSize.toString()),
+                  value: codeProvider.fontSize.toString(),
-                  onTap: () {
-                    Provider.of<ThemeModel>(context).showPicker(
-                      context,
                   items: CodeModel.fontSizes
-                          .map(
+                      .map((v) => PickerItem(v.toString(), text: v.toString())),
-                              (size) => PickerItem(size, text: size.toString()))
+                  onChange: (value) {
-                          .toList(),
+                    Provider.of<CodeModel>(context)
-                      initialValue: codeProvider.fontSize,
+                        .setFontSize(int.tryParse(value) ?? 16);
-                      onChange: (int value) {
-                        Provider.of<CodeModel>(context).setFontSize(value);
-                      },
-                    );
                   },
                 ),
-                TableViewItem(
+                PickerGroupItem(
-                  text: Text('Font Family'),
+                  title: 'Font Family',
-                  rightWidget: Text(codeProvider.fontFamily.toString()),
+                  value: codeProvider.fontFamily,
-                  onTap: () {
+                  items:
-                    Provider.of<ThemeModel>(context).showPicker(
+                      CodeModel.fontFamilies.map((v) => PickerItem(v, text: v)),
-                      context,
-                      items: CodeModel.fontFamilies
-                          .map((v) => PickerItem(v, text: v))
-                          .toList(),
-                      initialValue: codeProvider.fontFamily,
                   onChange: (String value) {
                     Provider.of<CodeModel>(context).setFontFamily(value);
                   },
-                    );
-                  },
                 ),
               ],
             ),

lib/widgets/picker.dart

@@ -0,0 +1,97 @@
+import 'dart:async';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:git_touch/models/theme.dart';
+import 'package:git_touch/widgets/table_view.dart';
+import 'package:provider/provider.dart';
+
+class PickerItem<T> {
+  final T value;
+  final String text;
+  PickerItem(this.value, {@required this.text});
+}
+
+class PickerGroupItem<T> {
+  final String title;
+  final T value;
+  final Iterable<PickerItem<T>> items;
+  final Function(T value) onChange;
+  PickerGroupItem({
+    @required this.title,
+    @required this.value,
+    @required this.items,
+    @required this.onChange,
+  });
+}
+
+class PickerGroup extends StatelessWidget {
+  final Iterable<PickerGroupItem<String>> items;
+
+  static Timer _debounce;
+
+  PickerGroup({@required this.items});
+
+  showPicker(BuildContext context, PickerGroupItem<String> groupItem) async {
+    switch (Provider.of<ThemeModel>(context).theme) {
+      case AppThemeType.cupertino:
+        await showCupertinoModalPopup<void>(
+          context: context,
+          builder: (context) {
+            return Container(
+              height: 300,
+              child: CupertinoPicker(
+                backgroundColor: CupertinoColors.white,
+                children: groupItem.items.map((v) => Text(v.text)).toList(),
+                itemExtent: 40,
+                scrollController: FixedExtentScrollController(
+                    initialItem: groupItem.items
+                        .toList()
+                        .indexWhere((v) => v.value == groupItem.value)),
+                onSelectedItemChanged: (index) {
+                  if (_debounce?.isActive ?? false) _debounce.cancel();
+                  _debounce = Timer(const Duration(milliseconds: 500), () {
+                    return groupItem
+                        .onChange(groupItem.items.toList()[index].value);
+                  });
+                },
+              ),
+            );
+          },
+        );
+        break;
+      default:
+        final value = await showMenu(
+          context: context,
+          initialValue: groupItem.value,
+          items: groupItem.items
+              .map((item) =>
+                  PopupMenuItem(value: item.value, child: Text(item.text)))
+              .toList(),
+          position: RelativeRect.fill,
+        );
+        if (value != null) {
+          groupItem.onChange(value);
+        }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    switch (Provider.of<ThemeModel>(context).theme) {
+      case AppThemeType.cupertino:
+      default:
+        //  TODO: Material
+        return TableView(
+          items: items.map((item) {
+            return TableViewItem(
+              text: Text(item.title),
+              rightWidget: Text(item.value),
+              onTap: () {
+                showPicker(context, item);
+              },
+            );
+          }),
+        );
+    }
+  }
+}