Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2024-12-23 12:09:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(display_settings): add new theme selector

Browse source
This commit is contained in:
Rafael Saes 2023-07-05 15:17:11 -03:00
parent d3cb19cc3c
commit 114f41ebd4
2 changed files with 120 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
lib/src/screens/settings/display_settings_page.dart
View file

@ -2,14 +2,11 @@ import 'package:cake_wallet/entities/fiat_currency.dart';
import 'package:cake_wallet/entities/language_service.dart';
import 'package:cake_wallet/generated/i18n.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_switcher_cell.dart';
import 'package:cake_wallet/themes/theme_base.dart';
import 'package:cake_wallet/themes/theme_list.dart';
import 'package:cake_wallet/src/screens/settings/widgets/settings_theme_choice.dart';
import 'package:cake_wallet/utils/device_info.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:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
@ -78,14 +75,7 @@ class DisplaySettingsPage extends BasePage {
},
),
if (ResponsiveLayoutUtil.instance.isMobile && DeviceInfo.instance.isMobile)
SettingsChoicesCell(
ChoicesListItem<ThemeBase>(
title: S.current.color_theme,
items: ThemeList.all,
selectedItem: _displaySettingsViewModel.theme,
onItemSelected: (ThemeBase theme) => _displaySettingsViewModel.setTheme(theme),
),
),
SettingsThemeChoicesCell(_displaySettingsViewModel),
],
),
);

118
lib/src/screens/settings/widgets/settings_theme_choice.dart Normal file
View 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,
),
),
],
),
),
),
);
}),
),
],
),
);
}
}