github-such-software/hash-wallet
1
0
Fork 1
mirror of https://github.com/Such-Software/hash-wallet.git synced 2026-10-23 06:38:35 +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/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(