github-such-software/hash-wallet
1
0
Fork 1
mirror of https://github.com/Such-Software/hash-wallet.git synced 2026-10-19 05:58:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Rework settings pickers (#398)

Browse Source 
Updated pickers and settings screen
This commit is contained in:
Omar Hatem
2022-06-29 13:38:44 +01:00
committed by GitHub
parent 9b9e211c08
commit dc623f3293
78 changed files with 604 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/screens/settings/change_language.dart
-63
View File
@@ -1,63 +0,0 @@
import 'package:cake_wallet/src/screens/settings/widgets/language_row.dart';
import 'package:cake_wallet/src/widgets/standard_list.dart';
import 'package:cake_wallet/store/settings_store.dart';
import 'package:cake_wallet/utils/show_pop_up.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/entities/language_service.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
class LanguageListPage extends BasePage {
LanguageListPage(this.settingsStore);
final SettingsStore settingsStore;
@override
String get title => S.current.settings_change_language;
@override
Widget body(BuildContext context) {
return Container(
padding: EdgeInsets.only(top: 10.0),
child: SectionStandardList(
sectionCount: 1,
context: context,
itemCounter: (int sectionIndex) => LanguageService.list.values.length,
itemBuilder: (_, sectionIndex, index) {
return Observer(builder: (BuildContext context) {
final item = LanguageService.list.values.elementAt(index);
final code = LanguageService.list.keys.elementAt(index);
final isCurrent = code == settingsStore.languageCode ?? false;
return LanguageRow(
title: item,
isSelected: isCurrent,
handler: (context) async {
if (!isCurrent) {
await showPopUp<void>(
context: context,
builder: (BuildContext context) {
return AlertWithTwoActions(
alertTitle: S.of(context).change_language,
alertContent:
S.of(context).change_language_to(item),
rightButtonText: S.of(context).change,
leftButtonText: S.of(context).cancel,
actionRightButton: () {
settingsStore.languageCode = code;
Navigator.of(context).pop();
},
actionLeftButton: () =>
Navigator.of(context).pop());
});
}
},
);
});
},
));
}
}
lib/src/screens/settings/settings.dart
+10
View File
@@ -1,4 +1,6 @@
import 'package:cake_wallet/src/screens/settings/widgets/settings_choices_cell.dart';
import 'package:cake_wallet/src/screens/settings/widgets/settings_version_cell.dart';
import 'package:cake_wallet/view_model/settings/choices_list_item.dart';
import 'package:cake_wallet/view_model/settings/version_list_item.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
@@ -46,6 +48,10 @@ class SettingsPage extends BasePage {
selectedItem: item.selectedItem(),
items: item.items,
onItemSelected: (dynamic value) => item.onItemSelected(value),
images: item.images,
searchHintText: item.searchHintText,
isGridView: item.isGridView,
matchingCriteria: (dynamic value, String searchText) => item.matchingCriteria(value, searchText),
);
});
}
@@ -80,6 +86,10 @@ class SettingsPage extends BasePage {
});
}
if (item is ChoicesListItem) {
return SettingsChoicesCell(item);
}
return Container();
});
}
lib/src/screens/settings/widgets/language_row.dart
-30
View File
@@ -1,30 +0,0 @@
import 'package:cake_wallet/palette.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/src/widgets/standard_list.dart';
class LanguageRow extends StandardListRow {
LanguageRow({@required String title, @required this.isSelected, @required Function(BuildContext context) handler}) :
super(title: title, isSelected: isSelected, onTap: handler);
@override
final bool isSelected;
@override
Widget buildCenter(BuildContext context, {@required bool hasLeftOffset}) {
return Expanded(
child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
if (hasLeftOffset) SizedBox(width: 10),
Text(title,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: titleColor(context)))
]));
}
@override
Widget buildTrailing(BuildContext context) =>
isSelected
? Icon(Icons.done, color: Palette.blueCraiola)
: Offstage();
}
lib/src/screens/settings/widgets/settings_choices_cell.dart
+71
View File
@@ -0,0 +1,71 @@
import 'package:cake_wallet/view_model/settings/choices_list_item.dart';
import 'package:flutter/material.dart';
class SettingsChoicesCell extends StatelessWidget {
const SettingsChoicesCell(this.choicesListItem, {Key key}) : super(key: key);
final ChoicesListItem choicesListItem;
@override
Widget build(BuildContext context) {
return Container(
color: Theme.of(context).backgroundColor,
padding: EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
choicesListItem.title,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal,
color: Theme.of(context).primaryTextTheme.title.color,
),
),
],
),
const SizedBox(height: 24),
Center(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Theme.of(context).accentTextTheme.display2.color,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: choicesListItem.items.map((dynamic e) {
final isSelected = choicesListItem.selectedItem == e;
return GestureDetector(
onTap: () {
choicesListItem.onItemSelected?.call(e);
},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 32, vertical: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: isSelected ? Theme.of(context).accentTextTheme.body2.color : null,
),
child: Text(
choicesListItem.displayItem?.call(e) ?? e.toString(),
style: TextStyle(
color: isSelected ? Colors.white : Theme.of(context).primaryTextTheme.caption.color,
fontWeight: isSelected ? FontWeight.w700 : FontWeight.normal,
),
),
),
);
}).toList(),
),
),
),
),
],
),
);
}
}
lib/src/screens/settings/widgets/settings_picker_cell.dart
+30 -19
View File
@@ -2,7 +2,6 @@ import 'package:cake_wallet/utils/show_pop_up.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/src/widgets/picker.dart';
import 'package:cake_wallet/src/widgets/standard_list.dart';
import 'package:cake_wallet/generated/i18n.dart';
class SettingsPickerCell<ItemType> extends StandardListRow {
SettingsPickerCell(
@@ -10,29 +9,43 @@ class SettingsPickerCell<ItemType> extends StandardListRow {
@required this.displayItem,
this.selectedItem,
this.items,
this.images,
this.searchHintText,
this.isGridView = false,
this.matchingCriteria,
this.onItemSelected})
: super(
title: title,
isSelected: false,
onTap: (BuildContext context) async {
final selectedAtIndex = items.indexOf(selectedItem);
title: title,
isSelected: false,
onTap: (BuildContext context) async {
final selectedAtIndex = items.indexOf(selectedItem);
await showPopUp<void>(
context: context,
builder: (_) => Picker(
items: items,
displayItem: displayItem,
selectedAtIndex: selectedAtIndex,
title: S.current.please_select,
mainAxisAlignment: MainAxisAlignment.center,
onItemSelected: (ItemType item) =>
onItemSelected?.call(item)));
});
await showPopUp<void>(
context: context,
builder: (_) => Picker(
items: items,
displayItem: displayItem,
selectedAtIndex: selectedAtIndex,
mainAxisAlignment: MainAxisAlignment.start,
onItemSelected: (ItemType item) => onItemSelected?.call(item),
images: images,
isSeparated: false,
hintText: searchHintText,
isGridView: isGridView,
matchingCriteria: matchingCriteria,
),
);
},
);
final ItemType selectedItem;
final List<ItemType> items;
final void Function(ItemType item) onItemSelected;
final String Function(ItemType item) displayItem;
final List<Image> images;
final String searchHintText;
final bool isGridView;
final bool Function(ItemType, String) matchingCriteria;
@override
Widget buildTrailing(BuildContext context) {
@@ -40,9 +53,7 @@ class SettingsPickerCell<ItemType> extends StandardListRow {
displayItem?.call(selectedItem) ?? selectedItem.toString(),
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
color: Theme.of(context).primaryTextTheme.overline.color),
fontSize: 14.0, fontWeight: FontWeight.w500, color: Theme.of(context).primaryTextTheme.overline.color),
);
}
}
lib/src/widgets/alert_background.dart
+13 -9
View File
@@ -10,15 +10,19 @@ class AlertBackground extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: double.infinity,
width: double.infinity,
color: Colors.transparent,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
child: Container(
decoration: BoxDecoration(color: PaletteDark.darkNightBlue.withOpacity(0.75)),
child: child,
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.transparent,
body: Container(
height: double.infinity,
width: double.infinity,
color: Colors.transparent,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
child: Container(
decoration: BoxDecoration(color: PaletteDark.darkNightBlue.withOpacity(0.75)),
child: child,
),
),
),
);
lib/src/widgets/picker.dart
+248 -150
View File
@@ -2,7 +2,6 @@ import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/src/widgets/alert_background.dart';
import 'package:cake_wallet/src/widgets/cake_scrollbar.dart';
import 'package:cake_wallet/src/widgets/alert_close_button.dart';
import 'package:cake_wallet/palette.dart';
@@ -10,13 +9,19 @@ class Picker<Item extends Object> extends StatefulWidget {
Picker({
@required this.selectedAtIndex,
@required this.items,
@required this.title,
@required this.onItemSelected,
this.title,
this.displayItem,
this.images,
this.description,
this.mainAxisAlignment = MainAxisAlignment.start,
});
this.isGridView = false,
this.isSeparated = true,
this.hintText,
this.matchingCriteria,
}) : assert(hintText == null ||
matchingCriteria !=
null); // make sure that if the search field is enabled then there is a searching criteria provided
final int selectedAtIndex;
final List<Item> items;
@@ -26,6 +31,10 @@ class Picker<Item extends Object> extends StatefulWidget {
final Function(Item) onItemSelected;
final MainAxisAlignment mainAxisAlignment;
final String Function(Item) displayItem;
final bool isGridView;
final bool isSeparated;
final String hintText;
final bool Function(Item, String) matchingCriteria;
@override
PickerState createState() => PickerState<Item>(items, images, onItemSelected);
@@ -35,8 +44,10 @@ class PickerState<Item> extends State<Picker> {
PickerState(this.items, this.images, this.onItemSelected);
final Function(Item) onItemSelected;
final List<Item> items;
final List<Image> images;
List<Item> items;
List<Image> images;
final TextEditingController searchController = TextEditingController();
final closeButton = Image.asset(
'assets/images/close.png',
@@ -44,161 +55,248 @@ class PickerState<Item> extends State<Picker> {
);
ScrollController controller = ScrollController();
final double backgroundHeight = 193;
final double thumbHeight = 72;
double fromTop = 0;
@override
void initState() {
super.initState();
searchController.addListener(() {
items = [];
images = [];
for (int i=0;i<widget.items.length;i++) {
if (widget.matchingCriteria?.call(widget.items[i], searchController.text) ?? true) {
items.add(widget.items[i] as Item);
images.add(widget.images[i]);
}
}
setState(() {});
});
}
@override
Widget build(BuildContext context) {
controller.addListener(() {
fromTop = controller.hasClients
? (controller.offset /
controller.position.maxScrollExtent *
(backgroundHeight - thumbHeight))
: 0;
setState(() {});
});
final isShowScrollThumb = items != null ? items.length > 3 : false;
return AlertBackground(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 24, right: 24),
child: Text(
widget.title,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
fontFamily: 'Lato',
fontWeight: FontWeight.bold,
decoration: TextDecoration.none,
color: Colors.white),
),
),
Padding(
padding: EdgeInsets.only(left: 24, right: 24, top: 24),
child: GestureDetector(
onTap: () => null,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(14)),
child: Container(
height: 233,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
if (widget.title?.isNotEmpty ?? false)
Container(
padding: EdgeInsets.symmetric(horizontal: 24),
child: Text(
widget.title,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
fontFamily: 'Lato',
fontWeight: FontWeight.bold,
decoration: TextDecoration.none,
color: Colors.white,
),
),
),
Padding(
padding: EdgeInsets.only(left: 24, right: 24, top: 24),
child: GestureDetector(
onTap: () => null,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(30)),
child: Container(
color: Theme.of(context).accentTextTheme.title.color,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
ListView.separated(
padding: EdgeInsets.all(0),
controller: controller,
separatorBuilder: (context, index) => Divider(
color: Theme.of(context)
.accentTextTheme
.title
.backgroundColor,
height: 1,
),
itemCount: items == null ? 0 : items.length,
itemBuilder: (context, index) {
final item = items[index];
final image =
images != null ? images[index] : null;
final isItemSelected =
index == widget.selectedAtIndex;
final color = isItemSelected
? Theme.of(context).textTheme.body2.color
: Theme.of(context)
.accentTextTheme
.title
.color;
final textColor = isItemSelected
? Palette.blueCraiola
: Theme.of(context)
.primaryTextTheme
.title
.color;
return GestureDetector(
onTap: () {
if (onItemSelected == null) {
return;
}
Navigator.of(context).pop();
onItemSelected(item);
},
child: Container(
height: 77,
padding: EdgeInsets.only(left: 24, right: 24),
color: color,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: widget.mainAxisAlignment,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
image ?? Offstage(),
Padding(
padding: EdgeInsets.only(
left: image != null ? 12 : 0),
child: Text(
widget.displayItem?.call(item) ??
item.toString(),
style: TextStyle(
fontSize: 18,
fontFamily: 'Lato',
fontWeight: FontWeight.w600,
color: textColor,
decoration: TextDecoration.none,
),
),
)
],
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.65,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (widget.hintText != null)
Padding(
padding: const EdgeInsets.all(16),
child: TextFormField(
controller: searchController,
style: TextStyle(color: Theme.of(context).primaryTextTheme.title.color),
decoration: InputDecoration(
hintText: widget.hintText,
prefixIcon: Image.asset("assets/images/search_icon.png"),
filled: true,
fillColor: Theme.of(context).accentTextTheme.display2.color,
alignLabelWithHint: false,
contentPadding: const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(
color: Colors.transparent,
)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(
color: Colors.transparent,
)),
),
),
);
},
),
((widget.description != null) &&
(widget.description.isNotEmpty))
? Positioned(
bottom: 24,
left: 24,
right: 24,
child: Text(
widget.description,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
fontFamily: 'Lato',
decoration: TextDecoration.none,
color: Theme.of(context)
.primaryTextTheme
.title
.color),
))
: Offstage(),
isShowScrollThumb
? CakeScrollbar(
backgroundHeight: backgroundHeight,
thumbHeight: thumbHeight,
fromTop: fromTop)
: Offstage(),
],
)),
),
Divider(
color: Theme.of(context).accentTextTheme.title.backgroundColor,
height: 1,
),
if (widget.selectedAtIndex != -1) buildSelectedItem(),
Flexible(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
(items?.length ?? 0) > 3 ? Scrollbar(
controller: controller,
child: itemsList(),
) : itemsList(),
(widget.description?.isNotEmpty ?? false)
? Positioned(
bottom: 24,
left: 24,
right: 24,
child: Text(
widget.description,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
fontFamily: 'Lato',
decoration: TextDecoration.none,
color: Theme.of(context).primaryTextTheme.title.color,
),
),
)
: Offstage(),
],
),
),
],
),
),
),
),
),
)
],
),
AlertCloseButton(image: closeButton)
],
),
);
}
Widget itemsList() {
return Container(
color: Theme.of(context).accentTextTheme.headline6.backgroundColor,
child: widget.isGridView
? GridView.builder(
padding: EdgeInsets.zero,
controller: controller,
itemCount: items == null || items.isEmpty ? 0 : items.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 2,
childAspectRatio: 3,
),
itemBuilder: (context, index) => buildItem(index),
)
: ListView.separated(
padding: EdgeInsets.zero,
controller: controller,
shrinkWrap: true,
separatorBuilder: (context, index) => widget.isSeparated
? Divider(
color: Theme.of(context).accentTextTheme.title.backgroundColor,
height: 1,
)
: const SizedBox(),
itemCount: items == null || items.isEmpty ? 0 : items.length,
itemBuilder: (context, index) => buildItem(index),
),
);
}
Widget buildItem(int index) {
/// don't show selected item in the list view
if (widget.items[widget.selectedAtIndex] == items[index] && !widget.isGridView) {
return const SizedBox();
}
final item = items[index];
final image = images != null ? images[index] : null;
return GestureDetector(
onTap: () {
if (onItemSelected == null) {
return;
}
Navigator.of(context).pop();
onItemSelected(item);
},
child: Container(
height: 55,
color: Theme.of(context).accentTextTheme.headline6.color,
padding: EdgeInsets.only(left: 24, right: 24),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: widget.mainAxisAlignment,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
image ?? Offstage(),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: image != null ? 12 : 0),
child: Text(
widget.displayItem?.call(item) ?? item.toString(),
style: TextStyle(
fontSize: 14,
fontFamily: 'Lato',
fontWeight: FontWeight.w600,
color: Theme.of(context).primaryTextTheme.title.color,
decoration: TextDecoration.none,
),
),
),
)
),
],
),
AlertCloseButton(image: closeButton)
],
));
),
);
}
Widget buildSelectedItem() {
final item = widget.items[widget.selectedAtIndex];
final image = images != null ? widget.images[widget.selectedAtIndex] : null;
return Container(
height: 55,
color: Theme.of(context).accentTextTheme.headline6.color,
padding: EdgeInsets.only(left: 24, right: 24),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: widget.mainAxisAlignment,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
image ?? Offstage(),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: image != null ? 12 : 0),
child: Text(
widget.displayItem?.call(item) ?? item.toString(),
style: TextStyle(
fontSize: 16,
fontFamily: 'Lato',
fontWeight: FontWeight.w700,
color: Theme.of(context).primaryTextTheme.title.color,
decoration: TextDecoration.none,
),
),
),
),
Icon(Icons.check_circle, color: Theme.of(context).accentTextTheme.body2.color),
],
),
);
}
}
lib/src/widgets/standard_list.dart
+9 -5
View File
@@ -37,11 +37,15 @@ class StandardListRow extends StatelessWidget {
return Expanded(
child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
if (hasLeftOffset) SizedBox(width: 10),
Text(title,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal,
color: titleColor(context)))
Expanded(
child: Text(title,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal,
color: titleColor(context),
),
),
)
]));
}
lib/src/widgets/standart_switch.dart
+1 -1
View File
@@ -24,7 +24,7 @@ class StandartSwitchState extends State<StandartSwitch> {
height: 28,
decoration: BoxDecoration(
color: widget.value
? Colors.green
? Theme.of(context).accentTextTheme.body2.color
: Theme.of(context).accentTextTheme.display4.color,
borderRadius: BorderRadius.all(Radius.circular(14.0))),
child: Container(