refactor: extract picker widget

This commit is contained in:
Rongjian Zhang 2019-09-19 22:01:30 +08:00
parent cd87829b30
commit 9b2e9686d7
4 changed files with 121 additions and 103 deletions

View File

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

View File

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

View File

@ -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,55 +24,33 @@ class CodeSettingsScreen extends StatelessWidget {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TableView(
PickerGroup(
items: [
TableViewItem(
text: Text('Syntax Highlighting'),
rightWidget: Text(codeProvider.theme),
onTap: () {
Provider.of<ThemeModel>(context).showPicker(
context,
items: CodeModel.themes
.map((t) => PickerItem(t, text: t))
.toList(),
initialValue: codeProvider.theme,
onChange: (String value) {
Provider.of<CodeModel>(context).setTheme(value);
},
);
PickerGroupItem(
title: 'Syntax Highlighting',
value: codeProvider.theme,
items: CodeModel.themes.map((v) => PickerItem(v, text: v)),
onChange: (value) {
Provider.of<CodeModel>(context).setTheme(value);
},
),
TableViewItem(
text: Text('Font Size'),
rightWidget: Text(codeProvider.fontSize.toString()),
onTap: () {
Provider.of<ThemeModel>(context).showPicker(
context,
items: CodeModel.fontSizes
.map(
(size) => PickerItem(size, text: size.toString()))
.toList(),
initialValue: codeProvider.fontSize,
onChange: (int value) {
Provider.of<CodeModel>(context).setFontSize(value);
},
);
PickerGroupItem(
title: 'Font Size',
value: codeProvider.fontSize.toString(),
items: CodeModel.fontSizes
.map((v) => PickerItem(v.toString(), text: v.toString())),
onChange: (value) {
Provider.of<CodeModel>(context)
.setFontSize(int.tryParse(value) ?? 16);
},
),
TableViewItem(
text: Text('Font Family'),
rightWidget: Text(codeProvider.fontFamily.toString()),
onTap: () {
Provider.of<ThemeModel>(context).showPicker(
context,
items: CodeModel.fontFamilies
.map((v) => PickerItem(v, text: v))
.toList(),
initialValue: codeProvider.fontFamily,
onChange: (String value) {
Provider.of<CodeModel>(context).setFontFamily(value);
},
);
PickerGroupItem(
title: 'Font Family',
value: codeProvider.fontFamily,
items:
CodeModel.fontFamilies.map((v) => PickerItem(v, text: v)),
onChange: (String value) {
Provider.of<CodeModel>(context).setFontFamily(value);
},
),
],

97
lib/widgets/picker.dart Normal file
View File

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