mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2025-01-11 13:24:51 +00:00
feat(display_settings): add new theme selector
This commit is contained in:
Rafael Saes
parent
d3cb19cc3c
commit
114f41ebd4
2 changed files with 120 additions and 12 deletions
|
|
@ -2,14 +2,11 @@ import 'package:cake_wallet/entities/fiat_currency.dart';
|
||||||
import 'package:cake_wallet/entities/language_service.dart';
|
import 'package:cake_wallet/entities/language_service.dart';
|
||||||
import 'package:cake_wallet/generated/i18n.dart';
|
import 'package:cake_wallet/generated/i18n.dart';
|
||||||
import 'package:cake_wallet/src/screens/base_page.dart';
|
import 'package:cake_wallet/src/screens/base_page.dart';
|
||||||
import 'package:cake_wallet/src/screens/settings/widgets/settings_choices_cell.dart';
|
|
||||||
import 'package:cake_wallet/src/screens/settings/widgets/settings_picker_cell.dart';
|
import 'package:cake_wallet/src/screens/settings/widgets/settings_picker_cell.dart';
|
||||||
import 'package:cake_wallet/src/screens/settings/widgets/settings_switcher_cell.dart';
|
import 'package:cake_wallet/src/screens/settings/widgets/settings_switcher_cell.dart';
|
||||||
import 'package:cake_wallet/themes/theme_base.dart';
|
import 'package:cake_wallet/src/screens/settings/widgets/settings_theme_choice.dart';
|
||||||
import 'package:cake_wallet/themes/theme_list.dart';
|
|
||||||
import 'package:cake_wallet/utils/device_info.dart';
|
import 'package:cake_wallet/utils/device_info.dart';
|
||||||
import 'package:cake_wallet/utils/responsive_layout_util.dart';
|
import 'package:cake_wallet/utils/responsive_layout_util.dart';
|
||||||
import 'package:cake_wallet/view_model/settings/choices_list_item.dart';
|
|
||||||
import 'package:cake_wallet/view_model/settings/display_settings_view_model.dart';
|
import 'package:cake_wallet/view_model/settings/display_settings_view_model.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_mobx/flutter_mobx.dart';
|
import 'package:flutter_mobx/flutter_mobx.dart';
|
||||||
|
|
@ -78,14 +75,7 @@ class DisplaySettingsPage extends BasePage {
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
if (ResponsiveLayoutUtil.instance.isMobile && DeviceInfo.instance.isMobile)
|
if (ResponsiveLayoutUtil.instance.isMobile && DeviceInfo.instance.isMobile)
|
||||||
SettingsChoicesCell(
|
SettingsThemeChoicesCell(_displaySettingsViewModel),
|
||||||
ChoicesListItem<ThemeBase>(
|
|
||||||
title: S.current.color_theme,
|
|
||||||
items: ThemeList.all,
|
|
||||||
selectedItem: _displaySettingsViewModel.theme,
|
|
||||||
onItemSelected: (ThemeBase theme) => _displaySettingsViewModel.setTheme(theme),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
|
||||||
118
lib/src/screens/settings/widgets/settings_theme_choice.dart
Normal file
118
lib/src/screens/settings/widgets/settings_theme_choice.dart
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
import 'package:cake_wallet/generated/i18n.dart';
|
||||||
|
import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
|
||||||
|
import 'package:cake_wallet/themes/theme_base.dart';
|
||||||
|
import 'package:cake_wallet/themes/theme_list.dart';
|
||||||
|
import 'package:cake_wallet/view_model/settings/display_settings_view_model.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class SettingsThemeChoicesCell extends StatelessWidget {
|
||||||
|
SettingsThemeChoicesCell(this._displaySettingsViewModel);
|
||||||
|
|
||||||
|
final items = ThemeList.all;
|
||||||
|
|
||||||
|
final DisplaySettingsViewModel _displaySettingsViewModel;
|
||||||
|
|
||||||
|
final double cellHeight = 25;
|
||||||
|
final double cellWidth = 12;
|
||||||
|
final double cellRadius = 6;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
padding: EdgeInsets.all(cellHeight),
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
S.current.color_theme,
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: FontWeight.normal,
|
||||||
|
color:
|
||||||
|
Theme.of(context).extension<CakeTextTheme>()!.titleColor,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
SizedBox(height: cellHeight),
|
||||||
|
Container(
|
||||||
|
height: 300,
|
||||||
|
child: GridView.builder(
|
||||||
|
itemCount: items.length,
|
||||||
|
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||||
|
crossAxisCount: 3,
|
||||||
|
mainAxisExtent: 75,
|
||||||
|
crossAxisSpacing: 20,
|
||||||
|
),
|
||||||
|
itemBuilder: (context, index) {
|
||||||
|
final ThemeBase e = items[index];
|
||||||
|
final currentTheme = _displaySettingsViewModel.theme;
|
||||||
|
final isSelected = currentTheme == e;
|
||||||
|
|
||||||
|
return Padding(
|
||||||
|
padding: EdgeInsets.all(5),
|
||||||
|
child: GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
_displaySettingsViewModel.setTheme(e);
|
||||||
|
},
|
||||||
|
child: Container(
|
||||||
|
padding: EdgeInsets.all(5),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.circular(cellRadius),
|
||||||
|
border: isSelected
|
||||||
|
? Border.all(
|
||||||
|
color: Theme.of(context).primaryColor)
|
||||||
|
: null,
|
||||||
|
color: Theme.of(context)
|
||||||
|
.extension<CakeTextTheme>()!
|
||||||
|
.secondaryTextColor
|
||||||
|
.withOpacity(
|
||||||
|
currentTheme.brightness == Brightness.light
|
||||||
|
? 0.1
|
||||||
|
: 0.3),
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
Container(
|
||||||
|
padding: EdgeInsets.symmetric(
|
||||||
|
horizontal: cellWidth, vertical: cellHeight),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.only(
|
||||||
|
topLeft: Radius.circular(cellRadius),
|
||||||
|
bottomLeft: Radius.circular(cellRadius)),
|
||||||
|
color: e.themeData.primaryColor,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Container(
|
||||||
|
padding: EdgeInsets.symmetric(
|
||||||
|
horizontal: cellWidth, vertical: cellHeight),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: e.themeData.colorScheme.background,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Container(
|
||||||
|
padding: EdgeInsets.symmetric(
|
||||||
|
horizontal: cellWidth, vertical: cellHeight),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.only(
|
||||||
|
topRight: Radius.circular(cellRadius),
|
||||||
|
bottomRight: Radius.circular(cellRadius)),
|
||||||
|
color: e.themeData.cardColor,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue