Skip to content

Commit

Permalink
Merge pull request #154 from enrique-lozano/feat/input-styles
Browse files Browse the repository at this point in the history
Pick a color for each account and new style for the app inputs
  • Loading branch information
enrique-lozano authored May 1, 2024
2 parents d1f39e8 + 5058f75 commit 862bb55
Show file tree
Hide file tree
Showing 23 changed files with 724 additions and 637 deletions.
456 changes: 219 additions & 237 deletions lib/app/accounts/account_form.dart

Large diffs are not rendered by default.

114 changes: 44 additions & 70 deletions lib/app/categories/form/category_form.dart
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import 'package:drift/drift.dart' as drift;
import 'package:flutter/material.dart';
import 'package:monekin/app/categories/form/category_form_functions.dart';
import 'package:monekin/app/categories/form/icon_and_color_selector.dart';
import 'package:monekin/core/database/app_db.dart';
import 'package:monekin/core/database/services/category/category_service.dart';
import 'package:monekin/core/extensions/color.extensions.dart';
import 'package:monekin/core/extensions/lists.extensions.dart';
import 'package:monekin/core/models/category/category.dart';
import 'package:monekin/core/models/supported-icon/icon_displayer.dart';
import 'package:monekin/core/models/supported-icon/supported_icon.dart';
import 'package:monekin/core/presentation/widgets/color_picker.dart';
import 'package:monekin/core/presentation/widgets/icon_selector_modal.dart';
import 'package:monekin/core/presentation/widgets/color_picker/color_picker.dart';
import 'package:monekin/core/presentation/widgets/persistent_footer_button.dart';
import 'package:monekin/core/services/supported_icon/supported_icon_service.dart';
import 'package:monekin/core/utils/constants.dart';
import 'package:monekin/core/utils/text_field_utils.dart';
import 'package:monekin/core/utils/uuid.dart';
Expand All @@ -33,9 +33,8 @@ class _CategoryFormPageState extends State<CategoryFormPage> {

final TextEditingController _nameController = TextEditingController();

SupportedIcon _icon = SupportedIconService.instance.defaultSupportedIcon;

String _color = '000000';
SupportedIcon _icon = Category.unkown().icon;
String _color = defaultColorPickerOptions.randomItem();
CategoryType _type = CategoryType.E;

@override
Expand Down Expand Up @@ -211,59 +210,45 @@ class _CategoryFormPageState extends State<CategoryFormPage> {
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconDisplayer(
mainColor: ColorHex.get(_color).lighten(
Theme.of(context).brightness ==
Brightness.dark
? 0.8
: 0),
secondaryColor: ColorHex.get(_color).lighten(
Theme.of(context).brightness ==
Brightness.dark
? 0
: 0.8),
supportedIcon: _icon,
size: 48,
isOutline: true,
outlineWidth: 1,
padding: 6,
borderRadius: 4,
onTap: () {
showIconSelectorModal(
context,
IconSelectorModal(
preselectedIconID: _icon.id,
subtitle: t
.icon_selector.select_category_icon,
onIconSelected: (selectedIcon) {
setState(() {
_icon = selectedIcon;
});
},
),
);
},
IconAndColorSelector(
iconSelectorModalSubtitle:
t.icon_selector.select_category_icon,
iconDisplayer: IconDisplayer.fromCategory(
context,
category: Category.fromDB(
Category.unkown().copyWith(
iconId: _icon.id,
color: drift.Value(_color)),
null,
),
const SizedBox(width: 10),
Expanded(
child: TextFormField(
controller: _nameController,
maxLength: maxLabelLenghtForDisplayNames,
decoration: InputDecoration(
labelText: '${t.categories.name} *',
hintText: 'Ex.: Food',
),
validator: (value) =>
fieldValidator(value, isRequired: true),
autovalidateMode:
AutovalidateMode.onUserInteraction,
textInputAction: TextInputAction.next,
),
)
],
isOutline: true,
size: 48,
padding: 6,
),
onDataChange: ((data) {
setState(() {
_icon = data.icon;
_color = data.color.toHex();
});
}),
data: (
color: ColorHex.get(_color),
icon: _icon,
),
),
const SizedBox(height: 20),
TextFormField(
controller: _nameController,
maxLength: maxLabelLenghtForDisplayNames,
decoration: InputDecoration(
labelText: '${t.categories.name} *',
hintText: 'Ex.: Food',
),
validator: (value) =>
fieldValidator(value, isRequired: true),
autovalidateMode:
AutovalidateMode.onUserInteraction,
textInputAction: TextInputAction.next,
),
const SizedBox(height: 14),
DropdownButtonFormField<CategoryType>(
Expand Down Expand Up @@ -293,22 +278,11 @@ class _CategoryFormPageState extends State<CategoryFormPage> {
});
},
),
const SizedBox(height: 24),
Text(t.icon_selector.color)
const SizedBox(height: 16),
],
),
),
),
ColorPicker(
colorOptions: colorOptions,
selectedColor: _color,
onColorSelected: (selectedColor) {
setState(() {
_color = selectedColor;
});
},
),
const SizedBox(height: 6),
if (widget.categoryUUID != null) ...[
Padding(
padding: const EdgeInsets.symmetric(
Expand Down
95 changes: 95 additions & 0 deletions lib/app/categories/form/icon_and_color_selector.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import 'package:flutter/material.dart';
import 'package:monekin/core/extensions/color.extensions.dart';
import 'package:monekin/core/models/supported-icon/icon_displayer.dart';
import 'package:monekin/core/models/supported-icon/supported_icon.dart';
import 'package:monekin/core/presentation/app_colors.dart';
import 'package:monekin/core/presentation/widgets/color_picker/color_picker.dart';
import 'package:monekin/core/presentation/widgets/color_picker/color_picker_modal.dart';
import 'package:monekin/core/presentation/widgets/icon_selector_modal.dart';
import 'package:monekin/core/presentation/widgets/tappable.dart';
import 'package:monekin/i18n/translations.g.dart';

class IconAndColorSelector extends StatelessWidget {
const IconAndColorSelector(
{super.key,
required this.iconSelectorModalSubtitle,
required this.iconDisplayer,
required this.onDataChange,
required this.data});

final String iconSelectorModalSubtitle;

final void Function(({SupportedIcon icon, Color color}) data) onDataChange;

final ({SupportedIcon icon, Color color}) data;
final IconDisplayer iconDisplayer;

@override
Widget build(BuildContext context) {
final t = Translations.of(context);

return Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: AppColors.of(context).inputFill,
borderRadius: BorderRadius.circular(12),
),
child: Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 16),
child: iconDisplayer,
),
Flexible(
child: Column(
children: [
Tappable(
onTap: () {
showIconSelectorModal(
context,
IconSelectorModal(
preselectedIconID: data.icon.id,
subtitle: iconSelectorModalSubtitle,
onIconSelected: (selectedIcon) {
onDataChange((color: data.color, icon: selectedIcon));
},
),
);
},
bgColor: AppColors.of(context).inputFill,
child: ListTile(
title: Text(t.icon_selector.icon),
trailing:
const Icon(Icons.arrow_forward_ios_rounded, size: 12),
),
),
Divider(color: AppColors.of(context).inputFill.darken()),
Tappable(
onTap: () => showColorPickerModal(
context,
ColorPickerModal(
colorOptions: defaultColorPickerOptions,
selectedColor: data.color.toHex(),
),
).then((selColor) {
if (selColor == null) return;

onDataChange((color: selColor, icon: data.icon));
}),
bgColor: AppColors.of(context).inputFill,
child: ListTile(
title: Text(t.icon_selector.color),
trailing: Icon(
Icons.circle,
color: data.color,
),
),
),
],
),
)
],
),
);
}
}
28 changes: 14 additions & 14 deletions lib/app/categories/subcategory_form.dart
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import 'package:drift/drift.dart';
import 'package:flutter/material.dart';
import 'package:monekin/core/extensions/color.extensions.dart';
import 'package:monekin/core/models/category/category.dart';
import 'package:monekin/core/models/supported-icon/icon_displayer.dart';
import 'package:monekin/core/models/supported-icon/supported_icon.dart';
import 'package:monekin/core/presentation/widgets/bottomSheetFooter.dart';
import 'package:monekin/core/presentation/widgets/icon_selector_modal.dart';
Expand Down Expand Up @@ -64,7 +68,15 @@ class _SubcategoryFormDialogState extends State<SubcategoryFormDialog> {
body: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
InkWell(
IconDisplayer.fromCategory(
context,
category: Category.fromDB(
Category.unkown().copyWith(
color: Value(widget.color.toHex()),
iconId: _icon.id,
),
null),
size: 32,
onTap: () => showIconSelectorModal(
context,
IconSelectorModal(
Expand All @@ -77,20 +89,8 @@ class _SubcategoryFormDialogState extends State<SubcategoryFormDialog> {
},
),
),
child: Container(
padding: const EdgeInsets.all(6),
decoration: BoxDecoration(
color: _color.withOpacity(0.05),
border: Border.all(
width: 1,
color: _color,
),
borderRadius: const BorderRadius.all(Radius.circular(6))),
child: _icon.display(size: 50, color: _color)),
),
const SizedBox(
width: 20,
),
const SizedBox(width: 12),
Expanded(
child: Form(
key: _formKey,
Expand Down
Loading

0 comments on commit 862bb55

Please sign in to comment.