mirror of
https://github.com/Such-Software/hash-wallet.git
synced 2026-10-22 06:28:39 +02:00
Rework filter on the transactions list screen
This commit is contained in:
Serhii
@@ -9,12 +9,7 @@ class FilterTile extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: EdgeInsets.only(
|
||||
top: 18,
|
||||
bottom: 18,
|
||||
left: 24,
|
||||
right: 24
|
||||
),
|
||||
padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 24.0),
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,20 +6,21 @@ 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/alert_close_button.dart';
|
||||
import 'package:cake_wallet/src/widgets/checkbox_widget.dart';
|
||||
import 'package:cake_wallet/src/widgets/rounded_checkbox.dart';
|
||||
import 'package:cake_wallet/generated/i18n.dart';
|
||||
import 'package:flutter_mobx/flutter_mobx.dart';
|
||||
//import 'package:date_range_picker/date_range_picker.dart' as date_rage_picker;
|
||||
|
||||
class FilterWidget extends StatelessWidget {
|
||||
FilterWidget({required this.dashboardViewModel});
|
||||
|
||||
final DashboardViewModel dashboardViewModel;
|
||||
final backVector = Image.asset('assets/images/back_vector.png',
|
||||
color: Palette.darkBlueCraiola
|
||||
);
|
||||
final closeIcon =
|
||||
Image.asset('assets/images/close.png', color: Palette.darkBlueCraiola);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
const sectionDivider = SectionDivider();
|
||||
return AlertBackground(
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
@@ -38,118 +39,150 @@ class FilterWidget extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.only(
|
||||
left: 24,
|
||||
right: 24,
|
||||
top: 24
|
||||
),
|
||||
padding: EdgeInsets.only(left: 24, right: 24, top: 24),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.all(Radius.circular(14)),
|
||||
borderRadius: BorderRadius.all(Radius.circular(24)),
|
||||
child: Container(
|
||||
color: Theme.of(context).textTheme!.bodyText1!.decorationColor!,
|
||||
child: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
itemCount: dashboardViewModel.filterItems.length,
|
||||
separatorBuilder: (context, _) => Container(
|
||||
height: 1,
|
||||
color: Theme.of(context).accentTextTheme!.subtitle1!.backgroundColor!,
|
||||
),
|
||||
itemBuilder: (_, index1) {
|
||||
final title = dashboardViewModel.filterItems.keys.elementAt(index1);
|
||||
final section = dashboardViewModel.filterItems.values.elementAt(index1);
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: EdgeInsets.only(
|
||||
top: 20,
|
||||
left: 24,
|
||||
right: 24
|
||||
),
|
||||
child: Text(
|
||||
title,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).accentTextTheme!.subtitle1!.color!,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontFamily: 'Lato',
|
||||
decoration: TextDecoration.none
|
||||
),
|
||||
color: Theme.of(context)
|
||||
.textTheme!
|
||||
.bodyText1!
|
||||
.decorationColor!,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: EdgeInsets.all(24.0),
|
||||
child: Text(
|
||||
S.of(context).filters,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context)
|
||||
.textTheme!
|
||||
.bodyText1!
|
||||
.decorationColor!,
|
||||
fontSize: 16,
|
||||
fontFamily: 'Lato',
|
||||
decoration: TextDecoration.none,
|
||||
),
|
||||
),
|
||||
ListView.separated(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
itemCount: section.length,
|
||||
separatorBuilder: (context, _) => Container(
|
||||
height: 1,
|
||||
padding: EdgeInsets.only(left: 24),
|
||||
color: Theme.of(context).textTheme!.bodyText1!.decorationColor!,
|
||||
child: Container(
|
||||
height: 1,
|
||||
color: Theme.of(context).accentTextTheme!.subtitle1!.backgroundColor!,
|
||||
),
|
||||
),
|
||||
itemBuilder: (_, index2) {
|
||||
|
||||
final item = section[index2];
|
||||
final content = item.onChanged != null
|
||||
? CheckboxWidget(
|
||||
value: item.value(),
|
||||
caption: item.caption,
|
||||
onChanged: item.onChanged
|
||||
)
|
||||
: GestureDetector(
|
||||
onTap: () async {
|
||||
//final List<DateTime> picked =
|
||||
//await date_rage_picker.showDatePicker(
|
||||
// context: context,
|
||||
// initialFirstDate: DateTime.now()
|
||||
// .subtract(Duration(days: 1)),
|
||||
// initialLastDate: (DateTime.now()),
|
||||
// firstDate: DateTime(2015),
|
||||
// lastDate: DateTime.now()
|
||||
// .add(Duration(days: 1)));
|
||||
|
||||
//if (picked != null && picked.length == 2) {
|
||||
// dashboardViewModel.transactionFilterStore
|
||||
// .changeStartDate(picked.first);
|
||||
// dashboardViewModel.transactionFilterStore
|
||||
// .changeEndDate(picked.last);
|
||||
//}
|
||||
},
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(left: 32),
|
||||
),
|
||||
sectionDivider,
|
||||
ListView.separated(
|
||||
padding: EdgeInsets.zero,
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
itemCount: dashboardViewModel.filterItems.length,
|
||||
separatorBuilder: (context, _) => sectionDivider,
|
||||
itemBuilder: (_, index1) {
|
||||
final title = dashboardViewModel.filterItems.keys
|
||||
.elementAt(index1);
|
||||
final section = dashboardViewModel
|
||||
.filterItems.values
|
||||
.elementAt(index1);
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: EdgeInsets.only(
|
||||
top: 20, left: 24, right: 24),
|
||||
child: Text(
|
||||
item.caption,
|
||||
title,
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).primaryTextTheme!.headline6!.color!,
|
||||
fontSize: 18,
|
||||
color: Theme.of(context)
|
||||
.primaryTextTheme!
|
||||
.headline6!
|
||||
.color!,
|
||||
fontSize: 16,
|
||||
fontFamily: 'Lato',
|
||||
fontWeight: FontWeight.w500,
|
||||
decoration: TextDecoration.none
|
||||
),
|
||||
fontWeight: FontWeight.bold,
|
||||
decoration: TextDecoration.none),
|
||||
),
|
||||
),
|
||||
);
|
||||
ListView.builder(
|
||||
padding:
|
||||
EdgeInsets.symmetric(vertical: 8.0),
|
||||
shrinkWrap: true,
|
||||
physics:
|
||||
const NeverScrollableScrollPhysics(),
|
||||
itemCount: section.length,
|
||||
itemBuilder: (_, index2) {
|
||||
final item = section[index2];
|
||||
final content = item.onChanged != null
|
||||
? Observer(
|
||||
builder: (_) =>
|
||||
RoundedCheckboxWidget(
|
||||
value: item.value.value,
|
||||
caption: item.caption,
|
||||
onChanged: item.onChanged,
|
||||
currentTheme:
|
||||
dashboardViewModel
|
||||
.settingsStore
|
||||
.currentTheme,
|
||||
))
|
||||
: GestureDetector(
|
||||
onTap: () async {
|
||||
//final List<DateTime> picked =
|
||||
//await date_rage_picker.showDatePicker(
|
||||
// context: context,
|
||||
// initialFirstDate: DateTime.now()
|
||||
// .subtract(Duration(days: 1)),
|
||||
// initialLastDate: (DateTime.now()),
|
||||
// firstDate: DateTime(2015),
|
||||
// lastDate: DateTime.now()
|
||||
// .add(Duration(days: 1)));
|
||||
|
||||
return FilterTile(child: content);
|
||||
},
|
||||
)
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
//if (picked != null && picked.length == 2) {
|
||||
// dashboardViewModel.transactionFilterStore
|
||||
// .changeStartDate(picked.first);
|
||||
// dashboardViewModel.transactionFilterStore
|
||||
// .changeEndDate(picked.last);
|
||||
//}
|
||||
},
|
||||
child: Padding(
|
||||
padding:
|
||||
EdgeInsets.only(left: 32),
|
||||
child: Text(
|
||||
item.caption,
|
||||
style: TextStyle(
|
||||
color: Colors.red,
|
||||
//Theme.of(context).primaryTextTheme.title.color,//
|
||||
fontSize: 18,
|
||||
fontFamily: 'Lato',
|
||||
fontWeight:
|
||||
FontWeight.w500,
|
||||
decoration:
|
||||
TextDecoration.none),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
return FilterTile(child: content);
|
||||
},
|
||||
)
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
]),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
AlertCloseButton(image: backVector)
|
||||
AlertCloseButton(image: closeIcon)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SectionDivider extends StatelessWidget {
|
||||
const SectionDivider();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: 1,
|
||||
color: Colors.red,//Fixme Theme.of(context).accentTextTheme.subhead.backgroundColor,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import 'package:cake_wallet/palette.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:cake_wallet/themes/theme_base.dart';
|
||||
|
||||
class RoundedCheckboxWidget extends StatelessWidget {
|
||||
RoundedCheckboxWidget(
|
||||
{required this.value,
|
||||
required this.caption,
|
||||
required this.onChanged,
|
||||
this.currentTheme});
|
||||
|
||||
final bool value;
|
||||
final String caption;
|
||||
final Function onChanged;
|
||||
final ThemeBase? currentTheme;
|
||||
|
||||
bool get darkTheme => currentTheme!.type == ThemeType.dark;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
final baseGradient = LinearGradient(colors: [
|
||||
Colors.red, //Fixme Theme.of(context).primaryTextTheme!.subtitle!.color!,
|
||||
Colors.red //Fixme Theme.of(context).primaryTextTheme!.subtitle!.decorationColor!,
|
||||
], begin: Alignment.centerLeft, end: Alignment.centerRight);
|
||||
|
||||
final darkThemeGradient = LinearGradient(colors: [
|
||||
Palette.blueCraiola,
|
||||
Palette.blueGreyCraiola,
|
||||
], begin: Alignment.topLeft, end: Alignment.bottomRight);
|
||||
|
||||
final gradient = darkTheme ? darkThemeGradient : baseGradient;
|
||||
|
||||
final uncheckedColor = darkTheme
|
||||
? Colors.red //Fixme Theme.of(context).accentTextTheme.subhead.decorationColor
|
||||
: Colors.white;
|
||||
|
||||
final borderColor = darkTheme
|
||||
? Colors.red //Fixme Theme.of(context).accentTextTheme.subtitle.backgroundColor
|
||||
: Colors.transparent;
|
||||
|
||||
final checkedOuterBoxDecoration =
|
||||
BoxDecoration(shape: BoxShape.circle, gradient: gradient);
|
||||
final outerBoxDecoration = BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Theme.of(context).accentTextTheme.overline!.color!,
|
||||
border: Border.all(color: borderColor));
|
||||
|
||||
final checkedInnerBoxDecoration =
|
||||
BoxDecoration(shape: BoxShape.circle, color: Colors.white);
|
||||
final innerBoxDecoration =
|
||||
BoxDecoration(shape: BoxShape.circle, color: uncheckedColor);
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () => onChanged(),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Container(
|
||||
height: 24.0,
|
||||
width: 24.0,
|
||||
child: DecoratedBox(
|
||||
decoration:
|
||||
value ? checkedOuterBoxDecoration : outerBoxDecoration,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(value ? 4.0 : 1.0),
|
||||
child: DecoratedBox(
|
||||
decoration:
|
||||
value ? checkedInnerBoxDecoration : innerBoxDecoration,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.only(left: 16),
|
||||
child: Text(
|
||||
caption,
|
||||
style: TextStyle(
|
||||
color: Colors.red, //Fixme Theme.of(context).primaryTextTheme.title.color,
|
||||
fontSize: 18,
|
||||
fontFamily: 'Lato',
|
||||
fontWeight: FontWeight.w500,
|
||||
decoration: TextDecoration.none),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user