redesigh checkbox
Serhii committed
Dec 10, 2022 at 12:56 UTC
c57507e530d3bff5792f4272842a6a6cf0e20721
3 files changed
+39
-109
lib/src/screens/dashboard/widgets/filter_widget.dart
+6
-7
@@ -1,12 +1,12 @@
1
import 'dart:ui';
2
import 'package:cake_wallet/palette.dart';
3
import 'package:cake_wallet/src/screens/dashboard/widgets/filter_tile.dart';
4
+import 'package:cake_wallet/src/widgets/standard_checkbox.dart';
5
import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
6
import 'package:flutter/cupertino.dart';
7
import 'package:flutter/material.dart';
8
import 'package:cake_wallet/src/widgets/alert_background.dart';
9
import 'package:cake_wallet/src/widgets/alert_close_button.dart';
9
-import 'package:cake_wallet/src/widgets/rounded_checkbox.dart';
10
import 'package:cake_wallet/generated/i18n.dart';
11
import 'package:flutter_mobx/flutter_mobx.dart';
12
//import 'package:date_range_picker/date_range_picker.dart' as date_rage_picker;
@@ -97,14 +97,13 @@ class FilterWidget extends StatelessWidget {
97
final content = item.onChanged != null
98
? Observer(
99
builder: (_) =>
100
- RoundedCheckboxWidget(
100
+ StandardCheckbox(
101
value: item.value.value,
102
caption: item.caption,
103
- onChanged: item.onChanged,
104
- currentTheme:
105
- dashboardViewModel
106
- .settingsStore
107
- .currentTheme,
103
+ gradientBackground: true,
104
+ borderColor: Theme.of(context).dividerColor,
105
+ iconColor: Colors.white,
106
+ onChanged: (bool val){},
107
))
108
: GestureDetector(
109
onTap: () async {
lib/src/widgets/rounded_checkbox.dart
deleted
-91
@@ -1,91 +0,0 @@
1
-import 'package:cake_wallet/palette.dart';
2
-import 'package:flutter/material.dart';
3
-import 'package:cake_wallet/themes/theme_base.dart';
4
-
5
-class RoundedCheckboxWidget extends StatelessWidget {
6
- RoundedCheckboxWidget(
7
- {required this.value,
8
- required this.caption,
9
- required this.onChanged,
10
- this.currentTheme});
11
-
12
- final bool value;
13
- final String caption;
14
- final Function onChanged;
15
- final ThemeBase? currentTheme;
16
-
17
- bool get darkTheme => currentTheme!.type == ThemeType.dark;
18
-
19
- @override
20
- Widget build(BuildContext context) {
21
-
22
- final baseGradient = LinearGradient(colors: [
23
- Theme.of(context).primaryTextTheme.subtitle1!.color!,
24
- Theme.of(context).primaryTextTheme.subtitle1!.decorationColor!,
25
- ], begin: Alignment.centerLeft, end: Alignment.centerRight);
26
-
27
- final darkThemeGradient = LinearGradient(colors: [
28
- Palette.blueCraiola,
29
- Palette.blueGreyCraiola,
30
- ], begin: Alignment.topLeft, end: Alignment.bottomRight);
31
-
32
- final gradient = darkTheme ? darkThemeGradient : baseGradient;
33
-
34
- final uncheckedColor = darkTheme
35
- ? Theme.of(context).primaryTextTheme.subtitle1!.decorationColor!
36
- : Colors.white;
37
-
38
- final borderColor = darkTheme
39
- ? Theme.of(context).accentTextTheme.subtitle2!.backgroundColor!
40
- : Colors.transparent;
41
-
42
- final checkedOuterBoxDecoration =
43
- BoxDecoration(shape: BoxShape.circle, gradient: gradient);
44
- final outerBoxDecoration = BoxDecoration(
45
- shape: BoxShape.circle,
46
- color: Theme.of(context).accentTextTheme.overline!.color!,
47
- border: Border.all(color: borderColor));
48
-
49
- final checkedInnerBoxDecoration =
50
- BoxDecoration(shape: BoxShape.circle, color: Colors.white);
51
- final innerBoxDecoration =
52
- BoxDecoration(shape: BoxShape.circle, color: uncheckedColor);
53
-
54
- return GestureDetector(
55
- onTap: () => onChanged(),
56
- child: Row(
57
- mainAxisSize: MainAxisSize.min,
58
- mainAxisAlignment: MainAxisAlignment.start,
59
- children: <Widget>[
60
- Container(
61
- height: 24.0,
62
- width: 24.0,
63
- child: DecoratedBox(
64
- decoration:
65
- value ? checkedOuterBoxDecoration : outerBoxDecoration,
66
- child: Padding(
67
- padding: EdgeInsets.all(value ? 4.0 : 1.0),
68
- child: DecoratedBox(
69
- decoration:
70
- value ? checkedInnerBoxDecoration : innerBoxDecoration,
71
- ),
72
- ),
73
- ),
74
- ),
75
- Padding(
76
- padding: EdgeInsets.only(left: 16),
77
- child: Text(
78
- caption,
79
- style: TextStyle(
80
- color: Theme.of(context).primaryTextTheme.headline6!.color!,
81
- fontSize: 18,
82
- fontFamily: 'Lato',
83
- fontWeight: FontWeight.w500,
84
- decoration: TextDecoration.none),
85
- ),
86
- )
87
- ],
88
- ),
89
- );
90
- }
91
-}
\ No newline at end of file
lib/src/widgets/standard_checkbox.dart
+33
-11
@@ -7,11 +7,17 @@ class StandardCheckbox extends StatefulWidget {
7
Key? key,
8
required this.value,
9
this.caption = '',
10
+ this.gradientBackground = false,
11
+ this.borderColor,
12
+ this.iconColor,
13
required this.onChanged})
14
: super(key: key);
15
16
final bool value;
17
final String caption;
18
+ final bool gradientBackground;
19
+ final Color? borderColor;
20
+ final Color? iconColor;
21
final Function(bool) onChanged;
22
23
@override
@@ -32,6 +38,31 @@ class StandardCheckboxState extends State<StandardCheckbox> {
38
39
@override
40
Widget build(BuildContext context) {
41
+
42
+ final baseGradient = LinearGradient(colors: [
43
+ Theme.of(context).primaryTextTheme.subtitle1!.color!,
44
+ Theme.of(context).primaryTextTheme.subtitle1!.decorationColor!,
45
+ ], begin: Alignment.centerLeft, end: Alignment.centerRight);
46
+
47
+ final boxBorder = Border.all(
48
+ color: widget.borderColor ?? Theme.of(context)
49
+ .primaryTextTheme
50
+ .caption!
51
+ .color!,
52
+ width: 1.0);
53
+
54
+
55
+ final checkedBoxDecoration = BoxDecoration(
56
+ gradient: widget.gradientBackground ? baseGradient : null,
57
+ border: widget.gradientBackground ? null : boxBorder,
58
+ borderRadius: BorderRadius.all(
59
+ Radius.circular(8.0)));
60
+
61
+ final uncheckedBoxDecoration = BoxDecoration(
62
+ border: boxBorder,
63
+ borderRadius: BorderRadius.all(
64
+ Radius.circular(8.0)));
65
+
66
return GestureDetector(
67
onTap: () {
68
value = !value;
@@ -45,20 +76,11 @@ class StandardCheckboxState extends State<StandardCheckbox> {
76
Container(
77
height: 24.0,
78
width: 24.0,
48
- decoration: BoxDecoration(
49
- border: Border.all(
50
- color: Theme.of(context)
51
- .primaryTextTheme!
52
- .caption!
53
- .color!,
54
- width: 1.0),
55
- borderRadius: BorderRadius.all(
56
- Radius.circular(8.0)),
57
- color: Theme.of(context).backgroundColor),
79
+ decoration: value ? checkedBoxDecoration : uncheckedBoxDecoration,
80
child: value
81
? Icon(
82
Icons.check,
61
- color: Colors.blue,
83
+ color: widget.iconColor ?? Colors.blue,
84
size: 20.0,
85
)
86
: Offstage(),