checkbox picker refactoring

This commit is contained in:
Serhii 2023-09-14 11:40:48 +03:00
parent 9f2d118224
commit 66eea9d690
3 changed files with 63 additions and 64 deletions

View file

@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/view_model/exchange/exchange_view_model.dart'; import 'package:cake_wallet/view_model/exchange/exchange_view_model.dart';
import 'package:cake_wallet/store/check_box_picker_store.dart';
class PresentProviderPicker extends StatelessWidget { class PresentProviderPicker extends StatelessWidget {
PresentProviderPicker({required this.exchangeViewModel}); PresentProviderPicker({required this.exchangeViewModel});

View file

@ -1,13 +1,13 @@
import 'package:cake_wallet/src/widgets/picker_wrapper_widget.dart';
import 'package:cake_wallet/src/widgets/standard_checkbox.dart'; import 'package:cake_wallet/src/widgets/standard_checkbox.dart';
import 'package:cake_wallet/store/check_box_picker_store.dart';
import 'package:cake_wallet/themes/extensions/cake_text_theme.dart'; import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/themes/extensions/picker_theme.dart';
import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:cake_wallet/src/widgets/picker_wrapper_widget.dart'; import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:cake_wallet/themes/extensions/filter_theme.dart';
import 'package:cake_wallet/themes/extensions/picker_theme.dart';
class CheckBoxPicker extends StatefulWidget { class CheckBoxPicker extends StatelessWidget {
CheckBoxPicker({ CheckBoxPicker({
required this.items, required this.items,
required this.onChanged, required this.onChanged,
@ -22,26 +22,17 @@ class CheckBoxPicker extends StatefulWidget {
final bool isSeparated; final bool isSeparated;
final Function(int, bool) onChanged; final Function(int, bool) onChanged;
@override final ScrollController _controller = ScrollController();
CheckBoxPickerState createState() => CheckBoxPickerState(items);
}
class CheckBoxPickerState extends State<CheckBoxPicker> {
CheckBoxPickerState(this.items);
final List<CheckBoxItem> items;
ScrollController controller = ScrollController();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return PickerWrapperWidget( return PickerWrapperWidget(
children: [ children: [
if (widget.title.isNotEmpty) if (title.isNotEmpty)
Container( Container(
padding: EdgeInsets.symmetric(horizontal: 24), padding: EdgeInsets.symmetric(horizontal: 24),
child: Text( child: Text(
widget.title, title,
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontSize: 18, fontSize: 18,
@ -72,10 +63,10 @@ class CheckBoxPickerState extends State<CheckBoxPicker> {
children: <Widget>[ children: <Widget>[
items.length > 3 items.length > 3
? Scrollbar( ? Scrollbar(
controller: controller, controller: _controller,
child: itemsList(), child: itemsList(context),
) )
: itemsList(), : itemsList(context),
], ],
), ),
), ),
@ -89,31 +80,32 @@ class CheckBoxPickerState extends State<CheckBoxPicker> {
); );
} }
Widget itemsList() { Widget itemsList(BuildContext context) {
return Container( return Container(
color: Theme.of(context).extension<PickerTheme>()!.dividerColor, color: Theme.of(context).extension<PickerTheme>()!.dividerColor,
child: ListView.separated( child: ListView.separated(
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
controller: controller, controller: _controller,
shrinkWrap: true, shrinkWrap: true,
separatorBuilder: (context, index) => widget.isSeparated separatorBuilder: (context, index) => isSeparated
? Divider( ? Divider(
color: Theme.of(context).extension<PickerTheme>()!.dividerColor, color: Theme.of(context).extension<PickerTheme>()!.dividerColor,
height: 1, height: 1,
) )
: const SizedBox(), : const SizedBox(),
itemCount: items == null || items.isEmpty ? 0 : items.length, itemCount: items.isEmpty ? 0 : items.length,
itemBuilder: (context, index) => buildItem(index), itemBuilder: (context, index) => buildItem(context, index),
), ),
); );
} }
Widget buildItem(int index) { Widget buildItem(BuildContext context, int index) {
final item = items[index]; final item = items[index];
return GestureDetector( return GestureDetector(
onTap: () { onTap: () {
Navigator.of(context).pop(); item.value = !item.value;
onChanged(index, item.value);
}, },
child: Container( child: Container(
height: 55, height: 55,
@ -121,46 +113,37 @@ class CheckBoxPickerState extends State<CheckBoxPicker> {
padding: EdgeInsets.only(left: 24, right: 24), padding: EdgeInsets.only(left: 24, right: 24),
child: Row( child: Row(
children: [ children: [
StandardCheckbox( Observer(
value: item.value, builder: (_) => StandardCheckbox(
gradientBackground: true, value: item.value,
borderColor: Theme.of(context).dividerColor, gradientBackground: true,
iconColor: Colors.white, borderColor: Theme.of(context).dividerColor,
onChanged: (bool? value) { iconColor: Colors.white,
if (value == null) { onChanged: (value) {
return; item.value = value;
} onChanged(index, value);
},
item.value = value; ),
widget.onChanged(index, value);
setState(() {});
},
), ),
SizedBox(width: 16), SizedBox(width: 16),
widget.displayItem?.call(item) ?? Expanded(
Text( child: displayItem?.call(item) ??
item.title, Text(
style: TextStyle( item.title,
fontSize: 14, style: TextStyle(
fontFamily: 'Lato', fontSize: 14,
fontWeight: FontWeight.w600, fontFamily: 'Lato',
color: item.isDisabled fontWeight: FontWeight.w600,
? Colors.grey.withOpacity(0.5) color: item.isDisabled
: Theme.of(context).extension<CakeTextTheme>()!.titleColor, ? Colors.grey.withOpacity(0.5)
decoration: TextDecoration.none, : Theme.of(context).extension<CakeTextTheme>()!.titleColor,
decoration: TextDecoration.none,
),
), ),
) )
], ],
), ),
), ),
); );
} }
} }
class CheckBoxItem {
CheckBoxItem(this.title, this.value, {this.isDisabled = false});
final String title;
final bool isDisabled;
bool value;
}

View file

@ -0,0 +1,15 @@
import 'package:mobx/mobx.dart';
part 'check_box_picker_store.g.dart';
class CheckBoxItem = _CheckBoxItem with _$CheckBoxItem;
abstract class _CheckBoxItem with Store {
_CheckBoxItem(this.title, this.value, {this.isDisabled = false});
final String title;
final bool isDisabled;
@observable
bool value;
}