feat(graphs): add pie chart and category colors (#19)

Reviewed-on: #19

CHANGELOG.md

@@ -2,6 +2,8 @@
 - Add settings view for editing wallet categories
 - Change code according to more aggressive linting
 - Create a default "no category" category, mainly to store entries with removed categories
+- Categories now have changeable colors assigned to them
+- Added pie chart for expense/income data per category
 # 1.0.0-alpha+2
 - Fixed localization issues
 - Added graphs for expenses and income per month/year

lib/api/category.dart

@@ -11,6 +11,7 @@ class WalletCategory {
     required this.name,
     required this.id,
     required this.icon,
+    required this.color,
   });
 
   /// Connects generated fromJson method
@@ -27,6 +28,10 @@ class WalletCategory {
   @JsonKey(fromJson: _iconDataFromJson, toJson: _iconDataToJson)
   IconData icon;
 
+  /// The color that will be displayed with entry
+  @JsonKey(fromJson: _colorFromJson, toJson: _colorToJson)
+  Color color;
+
   /// Connects generated toJson method
   Map<String, dynamic> toJson() => _$WalletCategoryToJson(this);
 
@@ -42,6 +47,9 @@ Map<String, dynamic> _iconDataToJson(IconData icon) =>
 IconData _iconDataFromJson(Map<String, dynamic> data) =>
     IconData(data['codepoint'] as int, fontFamily: data['family'] as String?);
 
+int _colorToJson(Color color) => color.value;
+Color _colorFromJson(int input) => Color(input);
+
 /// Type of entry, either expense or income
 enum EntryType {
   /// Expense

lib/api/category.g.dart

@@ -11,6 +11,7 @@ WalletCategory _$WalletCategoryFromJson(Map<String, dynamic> json) =>
       name: json['name'] as String,
       id: json['id'] as int,
       icon: _iconDataFromJson(json['icon'] as Map<String, dynamic>),
+      color: _colorFromJson(json['color'] as int),
     );
 
 Map<String, dynamic> _$WalletCategoryToJson(WalletCategory instance) =>
@@ -18,4 +19,5 @@ Map<String, dynamic> _$WalletCategoryToJson(WalletCategory instance) =>
       'name': instance.name,
       'id': instance.id,
       'icon': _iconDataToJson(instance.icon),
+      'color': _colorToJson(instance.color),
     };

lib/l10n/app_cs.arb

@@ -78,6 +78,8 @@
     "editCategories":"Upravit kategorie",
     "editCategoriesDesc":"Přidat, upravit nebo odebrat kategorii z peněženky",
     "wallet":"Peněženka",
-    "noCategory":"Žádná kategorie"
+    "noCategory":"Žádná kategorie",
-
+    "done":"Hotovo",
+    "pickColor":"Zvolte barvu",
+    "changeDate":"Změnit ze kterého měsíce/roku brát data"
 }

lib/l10n/app_en.arb

@@ -158,5 +158,8 @@
     "editCategories":"Edit categories",
     "editCategoriesDesc":"Add, edit or remove categories from a wallet",
     "wallet":"Wallet",
-    "noCategory":"No category"
+    "noCategory":"No category",
+    "done":"Done",
+    "pickColor":"Pick a color",
+    "changeDate":"Change what month/year to pick data from"
 }

lib/pw/platformwidget.dart

@@ -5,7 +5,8 @@ import 'package:flutter/material.dart';
 /// Abstract class used to create widgets for the respective platform UI library
 abstract class PlatformWidget<A extends Widget, I extends Widget>
     extends StatelessWidget {
-  /// Abstract class used to create widgets for the respective platform UI library
+  /// Abstract class used to create widgets
+  /// for the respective platform UI library
   const PlatformWidget({super.key});
 
   @override

lib/util/get_last_date.dart

@@ -0,0 +1,8 @@
+/// Extension to get last day of the month
+extension LastDay on DateTime {
+  /// Returns the last day of the month as [int]
+  int get lastDay {
+    final d = add(const Duration(days: 31));
+    return DateTime(d.year, d.month, 0).day;
+  }
+}

lib/util/graphs.dart

@@ -4,6 +4,11 @@ import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:intl/intl.dart';
+import 'package:prasule/api/category.dart';
+import 'package:prasule/api/walletentry.dart';
+import 'package:prasule/main.dart';
+import 'package:prasule/util/get_last_date.dart';
+import 'package:prasule/util/text_color.dart';
 
 /// Monthly/Yearly expense/income [LineChart]
 class ExpensesLineChart extends StatelessWidget {
@@ -70,7 +75,9 @@ class ExpensesLineChart extends StatelessWidget {
             getTooltipItems: (spots) => List<LineTooltipItem>.generate(
               spots.length,
               (index) => LineTooltipItem(
-                (spots[index].barIndex == 0)
+                // Changes what's rendered on the tooltip
+                // when clicked in the chart
+                (spots[index].barIndex == 0) // income chart
                     ? (yearly
                         ? AppLocalizations.of(context).incomeForMonth(
                             DateFormat.MMMM(locale).format(
@@ -92,7 +99,7 @@ class ExpensesLineChart extends StatelessWidget {
                               name: currency.name,
                             ).format(spots[index].y),
                           ))
-                    : (yearly
+                    : (yearly // expense chart
                         ? AppLocalizations.of(context).expensesForMonth(
                             DateFormat.MMMM(locale).format(
                               DateTime(
@@ -114,12 +121,25 @@ class ExpensesLineChart extends StatelessWidget {
                             ).format(spots[index].y),
                           )),
                 TextStyle(color: spots[index].bar.color),
+                children: [
+                  TextSpan(
+                    text: "\n${yearly ? DateFormat.MMMM(locale).format(
+                        DateTime(
+                          date.year,
+                          index + 1,
+                        ),
+                      ) : DateFormat.yMMMMd(locale).format(DateTime(date.year, date.month, spots[index].spotIndex + 1))}",
+                  ),
+                ],
               ),
             ),
           ),
         ),
         maxY: maxY,
-        maxX: yearly ? 12 : DateTime(date.year, date.month, 0).day.toDouble(),
+        maxX: yearly
+            ? 12
+            : date.lastDay.toDouble() -
+                1, // remove 1 because we are indexing from 0
         minY: 0,
         minX: 0,
         backgroundColor: Theme.of(context).colorScheme.background,
@@ -131,10 +151,13 @@ class ExpensesLineChart extends StatelessWidget {
               isStrokeCapRound: true,
               dotData: const FlDotData(show: false),
               belowBarData: BarAreaData(),
-              color: Colors.green
+              color:
-                  .harmonizeWith(Theme.of(context).colorScheme.secondary),
+                  (MediaQuery.of(context).platformBrightness == Brightness.dark)
+                      ? Colors.green.shade300
+                      : Colors.green
+                          .harmonizeWith(Theme.of(context).colorScheme.primary),
               spots: List.generate(
-                yearly ? 12 : DateTime(date.year, date.month, 0).day,
+                yearly ? 12 : date.lastDay,
                 (index) => FlSpot(index.toDouble(), incomeData[index]),
               ),
             ),
@@ -145,17 +168,37 @@ class ExpensesLineChart extends StatelessWidget {
               isStrokeCapRound: true,
               dotData: const FlDotData(show: false),
               belowBarData: BarAreaData(),
-              color: Colors.red
+              color:
-                  .harmonizeWith(Theme.of(context).colorScheme.secondary),
+                  (MediaQuery.of(context).platformBrightness == Brightness.dark)
+                      ? Colors.red.shade300
+                      : Colors.red
+                          .harmonizeWith(Theme.of(context).colorScheme.primary),
               spots: List.generate(
-                yearly ? 12 : DateTime(date.year, date.month, 0).day,
+                yearly
-                (index) => FlSpot(index.toDouble() + 1, expenseData[index]),
+                    ? 12
+                    : date.lastDay, // no -1 because it's the length, not index
+                (index) => FlSpot(index.toDouble(), expenseData[index]),
               ),
             ),
         ], // actual data
         titlesData: FlTitlesData(
           rightTitles: const AxisTitles(),
           topTitles: const AxisTitles(),
+          leftTitles: AxisTitles(
+            sideTitles: SideTitles(
+              reservedSize: (NumberFormat.compact()
+                              .format(expenseDataSorted.last)
+                              .length >=
+                          5 ||
+                      NumberFormat.compact()
+                              .format(incomeDataSorted.last)
+                              .length >=
+                          5)
+                  ? 50
+                  : 25,
+              showTitles: true,
+            ),
+          ),
           bottomTitles: AxisTitles(
             sideTitles: SideTitles(
               reservedSize: 30,
@@ -317,7 +360,7 @@ class ExpensesBarChart extends StatelessWidget {
           minY: 0,
           maxY: maxY,
           barGroups: List<BarChartGroupData>.generate(
-            yearly ? 12 : DateTime(date.year, date.month, 0).day,
+            yearly ? 12 : date.lastDay - 1,
             (index) => BarChartGroupData(
               x: index,
               barRods: [
@@ -325,13 +368,13 @@ class ExpensesBarChart extends StatelessWidget {
                   BarChartRodData(
                     toY: incomeData[index],
                     color: Colors.green
-                        .harmonizeWith(Theme.of(context).colorScheme.secondary),
+                        .harmonizeWith(Theme.of(context).colorScheme.primary),
                   ),
                 if (expenseData.isNotEmpty)
                   BarChartRodData(
                     toY: expenseData[index],
                     color: Colors.red
-                        .harmonizeWith(Theme.of(context).colorScheme.secondary),
+                        .harmonizeWith(Theme.of(context).colorScheme.primary),
                   ),
               ],
             ),
@@ -339,3 +382,165 @@ class ExpensesBarChart extends StatelessWidget {
         ),
       );
 }
+
+/// [PieChart] used to display expenses/income visualized
+/// under their respective category
+class CategoriesPieChart extends StatefulWidget {
+  /// [PieChart] used to display expenses/income visualized
+  /// under their respective category
+  const CategoriesPieChart({
+    required this.entries,
+    required this.categories,
+    required this.symbol,
+    super.key,
+  });
+
+  /// Entries to be used
+  final List<WalletSingleEntry> entries;
+
+  /// Categories to be displayed
+  final List<WalletCategory> categories;
+
+  /// Currency symbol displayed on the chart
+  final String symbol;
+
+  @override
+  State<CategoriesPieChart> createState() => _CategoriesPieChartState();
+}
+
+class _CategoriesPieChartState extends State<CategoriesPieChart> {
+  int touchedIndex = -1;
+
+  @override
+  Widget build(BuildContext context) => Column(
+        children: [
+          SizedBox(
+            width: MediaQuery.of(context).size.width,
+            child: Wrap(
+              alignment: WrapAlignment.center,
+              spacing: 4,
+              children: List<Widget>.generate(
+                widget.categories.length,
+                (index) => Padding(
+                  padding: const EdgeInsets.all(8),
+                  child: Indicator(
+                    size: touchedIndex == index ? 18 : 16,
+                    color: widget.categories[index].color,
+                    text: widget.categories[index].name,
+                    textStyle: TextStyle(
+                      fontWeight: (touchedIndex == index)
+                          ? FontWeight.bold
+                          : FontWeight.normal,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(
+            height: 5,
+          ),
+          Expanded(
+            child: PieChart(
+              PieChartData(
+                centerSpaceRadius: double.infinity,
+                pieTouchData: PieTouchData(
+                  touchCallback: (event, response) {
+                    // Set touchedIndex so we can highlight
+                    // the corresponding indicator
+                    setState(() {
+                      if (!event.isInterestedForInteractions ||
+                          response == null ||
+                          response.touchedSection == null) {
+                        touchedIndex = -1;
+                        return;
+                      }
+                      touchedIndex =
+                          response.touchedSection!.touchedSectionIndex;
+                    });
+                  },
+                ),
+                sections: List<PieChartSectionData>.generate(
+                  widget.categories.length,
+                  (index) => PieChartSectionData(
+                    title: NumberFormat.compactCurrency(symbol: widget.symbol)
+                        .format(
+                      widget.entries
+                          .where(
+                            (element) =>
+                                element.category.id ==
+                                widget.categories[index].id,
+                          )
+                          .fold<double>(
+                            0,
+                            (previousValue, element) =>
+                                previousValue + element.data.amount,
+                          ),
+                    ),
+                    titleStyle: TextStyle(
+                      color:
+                          widget.categories[index].color.calculateTextColor(),
+                      fontWeight: FontWeight.bold,
+                    ),
+                    color: widget.categories[index].color,
+                    value: widget.entries
+                        .where(
+                          (element) =>
+                              element.category.id ==
+                              widget.categories[index].id,
+                        )
+                        .fold<double>(
+                          0,
+                          (previousValue, element) =>
+                              previousValue + element.data.amount,
+                        ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      );
+}
+
+/// Used to indicate which part of a chart is for what
+class Indicator extends StatelessWidget {
+  /// Used to indicate which part of a chart is for what
+  const Indicator({
+    required this.size,
+    required this.color,
+    required this.text,
+    this.textStyle = const TextStyle(),
+    super.key,
+  });
+
+  /// Size of the indicator circle
+  final double size;
+
+  /// Color of the indicator circle
+  final Color color;
+
+  /// Text shown next to the indicator circle
+  final String text;
+
+  final TextStyle textStyle;
+
+  @override
+  Widget build(BuildContext context) => Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Container(
+            width: size,
+            height: size,
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: color,
+            ),
+          ),
+          const SizedBox(
+            width: 4,
+          ),
+          Text(text, style: textStyle),
+        ],
+      );
+}

lib/util/text_color.dart

@@ -0,0 +1,11 @@
+import 'package:flutter/material.dart';
+
+/// Used to add [calculateTextColor] to the [Color] class
+extension TextColor on Color {
+  /// Returns if foreground should be white or dark on this [Color]
+  Color calculateTextColor() {
+    return ThemeData.estimateBrightnessForColor(this) == Brightness.light
+        ? Colors.black
+        : Colors.white;
+  }
+}

lib/views/graph_view.dart

@@ -40,8 +40,9 @@ class _GraphViewState extends State<GraphView> {
   }
 
   List<double> generateChartData(EntryType type) {
+    final d = _selectedDate.add(const Duration(days: 31));
     final data = List<double>.filled(
-      yearly ? 12 : DateTime(_selectedDate.year, _selectedDate.month, 0).day,
+      yearly ? 12 : DateTime(d.year, d.month, 0).day,
       0,
     );
     if (selectedWallet == null) return [];
@@ -92,6 +93,47 @@ class _GraphViewState extends State<GraphView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      floatingActionButton: Tooltip(
+        message: AppLocalizations.of(context).changeDate,
+        child: PlatformButton(
+          style: ButtonStyle(
+            backgroundColor: MaterialStateProperty.all(
+              Theme.of(context).colorScheme.primary,
+            ),
+            foregroundColor: MaterialStateProperty.all(
+              Theme.of(context).colorScheme.onPrimary,
+            ),
+          ),
+          text: yearly
+              ? DateFormat.y(locale).format(_selectedDate)
+              : DateFormat.yMMMM(locale).format(_selectedDate),
+          onPressed: () async {
+            final firstDate = (selectedWallet!.entries
+                  ..sort(
+                    (a, b) => a.date.compareTo(b.date),
+                  ))
+                .first
+                .date;
+            final newDate = await showDatePicker(
+              context: context,
+              initialDate: DateTime(
+                _selectedDate.year,
+                _selectedDate.month,
+              ),
+              firstDate: firstDate,
+              lastDate: DateTime.now(),
+              initialEntryMode: yearly
+                  ? DatePickerEntryMode.input
+                  : DatePickerEntryMode.calendar,
+              initialDatePickerMode:
+                  yearly ? DatePickerMode.year : DatePickerMode.day,
+            );
+            if (newDate == null) return;
+            _selectedDate = newDate;
+            setState(() {});
+          },
+        ),
+      ),
       appBar: AppBar(
         title: DropdownButton<int>(
           value:
@@ -137,11 +179,19 @@ class _GraphViewState extends State<GraphView> {
             ].map((e) => PopupMenuItem(value: e, child: Text(e))).toList(),
             onSelected: (value) {
               if (value == AppLocalizations.of(context).settings) {
-                Navigator.of(context).push(
+                Navigator.of(context)
+                    .push(
                   platformRoute(
                     (context) => const SettingsView(),
                   ),
-                );
+                )
+                    .then((value) async {
+                  selectedWallet =
+                      await WalletManager.loadWallet(selectedWallet!.name);
+                  final s = await SharedPreferences.getInstance();
+                  chartType = s.getInt("monthlygraph") ?? 2;
+                  setState(() {});
+                });
               } else if (value == AppLocalizations.of(context).about) {
                 showAboutDialog(
                   context: context,
@@ -219,58 +269,10 @@ class _GraphViewState extends State<GraphView> {
                           padding: const EdgeInsets.all(8),
                           child: Column(
                             children: [
-                              PlatformButton(
-                                style: ButtonStyle(
-                                  backgroundColor: MaterialStateProperty.all(
-                                    Theme.of(context).colorScheme.primary,
-                                  ),
-                                  foregroundColor: MaterialStateProperty.all(
-                                    Theme.of(context).colorScheme.onPrimary,
-                                  ),
-                                ),
-                                text: yearly
-                                    ? DateFormat.y(locale).format(_selectedDate)
-                                    : DateFormat.yMMMM(locale)
-                                        .format(_selectedDate),
-                                onPressed: () async {
-                                  final firstDate = (selectedWallet!.entries
-                                        ..sort(
-                                          (a, b) => a.date.compareTo(b.date),
-                                        ))
-                                      .first
-                                      .date;
-                                  final lastDate = (selectedWallet!.entries
-                                        ..sort(
-                                          (a, b) => b.date.compareTo(a.date),
-                                        ))
-                                      .first
-                                      .date;
-                                  final newDate = await showDatePicker(
-                                    context: context,
-                                    initialDate: DateTime(
-                                      _selectedDate.year,
-                                      _selectedDate.month,
-                                    ),
-                                    firstDate: firstDate,
-                                    lastDate: lastDate,
-                                    initialEntryMode: yearly
-                                        ? DatePickerEntryMode.input
-                                        : DatePickerEntryMode.calendar,
-                                    initialDatePickerMode: yearly
-                                        ? DatePickerMode.year
-                                        : DatePickerMode.day,
-                                  );
-                                  if (newDate == null) return;
-                                  _selectedDate = newDate;
-                                  setState(() {});
-                                },
-                              ),
-                              const SizedBox(
-                                height: 5,
-                              ),
                               SizedBox(
                                 width: MediaQuery.of(context).size.width * 0.9,
-                                height: 300,
+                                height:
+                                    MediaQuery.of(context).size.height * 0.35,
                                 child: (chartType == null)
                                     ? const CircularProgressIndicator()
                                     : (chartType == 1)
@@ -292,29 +294,53 @@ class _GraphViewState extends State<GraphView> {
                                                   )
                                                 : [],
                                           )
-                                        : ExpensesLineChart(
+                                        : Padding(
-                                            currency: selectedWallet!.currency,
+                                            padding: const EdgeInsets.all(8),
-                                            date: _selectedDate,
+                                            child: ExpensesLineChart(
-                                            locale: locale ?? "en",
+                                              currency:
-                                            yearly: yearly,
+                                                  selectedWallet!.currency,
-                                            expenseData: (graphTypeSet
+                                              date: _selectedDate,
-                                                    .contains("expense"))
+                                              locale: locale ?? "en",
-                                                ? generateChartData(
+                                              yearly: yearly,
-                                                    EntryType.expense,
+                                              expenseData: (graphTypeSet
-                                                  )
+                                                      .contains("expense"))
-                                                : [],
+                                                  ? generateChartData(
-                                            incomeData: (graphTypeSet
+                                                      EntryType.expense,
-                                                    .contains("income"))
+                                                    )
-                                                ? generateChartData(
+                                                  : [],
-                                                    EntryType.income,
+                                              incomeData: (graphTypeSet
-                                                  )
+                                                      .contains("income"))
-                                                : [],
+                                                  ? generateChartData(
+                                                      EntryType.income,
+                                                    )
+                                                  : [],
+                                            ),
                                           ),
                               ),
                             ],
                           ),
                         ),
                       ),
+                      const SizedBox(
+                        height: 25,
+                      ),
+                      Container(
+                        decoration: BoxDecoration(
+                          borderRadius: BorderRadius.circular(8),
+                          color:
+                              Theme.of(context).colorScheme.secondaryContainer,
+                        ),
+                        width: MediaQuery.of(context).size.width * 0.95,
+                        height: MediaQuery.of(context).size.height * 0.35,
+                        child: Padding(
+                          padding: const EdgeInsets.all(8),
+                          child: CategoriesPieChart(
+                            symbol: selectedWallet!.currency.symbol,
+                            entries: selectedWallet!.entries,
+                            categories: selectedWallet!.categories,
+                          ),
+                        ),
+                      ),
                     ],
                   ),
                 ),

lib/views/home.dart

@@ -24,6 +24,7 @@ import 'package:prasule/pw/platformbutton.dart';
 import 'package:prasule/pw/platformdialog.dart';
 import 'package:prasule/pw/platformroute.dart';
 import 'package:prasule/util/drawer.dart';
+import 'package:prasule/util/text_color.dart';
 import 'package:prasule/views/create_entry.dart';
 import 'package:prasule/views/settings/settings.dart';
 import 'package:prasule/views/settings/tessdata_list.dart';
@@ -358,14 +359,14 @@ class _HomeViewState extends State<HomeView> {
                           leading: Container(
                             decoration: BoxDecoration(
                               borderRadius: BorderRadius.circular(16),
-                              color: Theme.of(context).colorScheme.secondary,
+                              color: element.category.color,
                             ),
                             child: Padding(
                               padding: const EdgeInsets.all(8),
                               child: Icon(
                                 element.category.icon,
                                 color:
-                                    Theme.of(context).colorScheme.onSecondary,
+                                    element.category.color.calculateTextColor(),
                               ),
                             ),
                           ),

lib/views/settings/edit_categories.dart

@@ -2,6 +2,8 @@
 
 import 'dart:async';
 
+import 'package:dynamic_color/dynamic_color.dart';
+import 'package:flex_color_picker/flex_color_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:flutter_iconpicker/flutter_iconpicker.dart';
@@ -9,11 +11,14 @@ import 'package:prasule/api/category.dart';
 import 'package:prasule/api/wallet.dart';
 import 'package:prasule/api/walletmanager.dart';
 import 'package:prasule/main.dart';
+import 'package:prasule/pw/platformbutton.dart';
 import 'package:prasule/pw/platformdialog.dart';
 import 'package:prasule/pw/platformfield.dart';
 import 'package:prasule/pw/platformroute.dart';
+import 'package:prasule/util/text_color.dart';
 import 'package:prasule/views/settings/settings.dart';
 import 'package:prasule/views/setup.dart';
+import 'package:shared_preferences/shared_preferences.dart';
 
 /// Allows adding, editing or removing [WalletCategory]s
 class EditCategoriesView extends StatefulWidget {
@@ -134,24 +139,64 @@ class _EditCategoriesViewState extends State<EditCategoriesView> {
                                     await FlutterIconPicker.showIconPicker(
                                   context,
                                 );
-                                if (icon == null) return;
+                                if (icon != null) {
-                                selectedWallet!.categories[i].icon = icon;
+                                  selectedWallet!.categories[i].icon = icon;
+                                }
+                                final materialEnabled =
+                                    (await SharedPreferences.getInstance())
+                                            .getBool("useMaterialYou") ??
+                                        false;
+                                if (!mounted) return;
+                                await showDialog(
+                                  context: context,
+                                  builder: (c) => PlatformDialog(
+                                    actions: [
+                                      PlatformButton(
+                                        text: AppLocalizations.of(context).done,
+                                        onPressed: () {
+                                          Navigator.of(c).pop();
+                                        },
+                                      ),
+                                    ],
+                                    title:
+                                        AppLocalizations.of(context).pickColor,
+                                    content: Column(
+                                      children: [
+                                        ColorPicker(
+                                          pickersEnabled: {
+                                            ColorPickerType.wheel: true,
+                                            ColorPickerType.primary: false,
+                                            ColorPickerType.custom: false,
+                                            ColorPickerType.bw: false,
+                                            ColorPickerType.accent:
+                                                materialEnabled,
+                                          },
+                                          color: selectedWallet!
+                                              .categories[i].color,
+                                          onColorChanged: (color) {
+                                            selectedWallet!
+                                                .categories[i].color = color;
+                                            setState(() {});
+                                          },
+                                        ),
+                                      ],
+                                    ),
+                                  ),
+                                );
                                 await WalletManager.saveWallet(selectedWallet!);
                                 setState(() {});
                               },
                               child: Container(
                                 decoration: BoxDecoration(
                                   borderRadius: BorderRadius.circular(16),
-                                  color:
+                                  color: selectedWallet!.categories[i].color,
-                                      Theme.of(context).colorScheme.secondary,
                                 ),
                                 child: Padding(
                                   padding: const EdgeInsets.all(8),
                                   child: Icon(
                                     selectedWallet!.categories[i].icon,
-                                    color: Theme.of(context)
+                                    color: selectedWallet!.categories[i].color
-                                        .colorScheme
+                                        .calculateTextColor(),
-                                        .onSecondary,
                                   ),
                                 ),
                               ),
@@ -230,6 +275,9 @@ class _EditCategoriesViewState extends State<EditCategoriesView> {
                           Icons.question_mark.codePoint,
                           fontFamily: 'MaterialIcons',
                         ),
+                        color: Colors.blueGrey.harmonizeWith(
+                          Theme.of(context).colorScheme.primary,
+                        ),
                       ),
                     );
                     await WalletManager.saveWallet(selectedWallet!);

lib/views/setup.dart

@@ -1,6 +1,8 @@
 // ignore_for_file: inference_failure_on_function_invocation
 
 import 'package:currency_picker/currency_picker.dart';
+import 'package:dynamic_color/dynamic_color.dart';
+import 'package:flex_color_picker/flex_color_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@@ -13,7 +15,9 @@ import 'package:prasule/pw/platformbutton.dart';
 import 'package:prasule/pw/platformdialog.dart';
 import 'package:prasule/pw/platformfield.dart';
 import 'package:prasule/pw/platformroute.dart';
+import 'package:prasule/util/text_color.dart';
 import 'package:prasule/views/home.dart';
+import 'package:shared_preferences/shared_preferences.dart';
 
 /// View that shows on first-time setup
 class SetupView extends StatefulWidget {
@@ -58,6 +62,7 @@ class _SetupViewState extends State<SetupView> {
             Icons.payments.codePoint,
             fontFamily: 'MaterialIcons',
           ),
+          color: Theme.of(context).colorScheme.secondary,
         ),
         WalletCategory(
           name: AppLocalizations.of(context).categoryHealth,
@@ -66,23 +71,31 @@ class _SetupViewState extends State<SetupView> {
             Icons.medical_information.codePoint,
             fontFamily: 'MaterialIcons',
           ),
+          color: Colors.red.shade700
+              .harmonizeWith(Theme.of(context).colorScheme.primary),
         ),
         WalletCategory(
           name: AppLocalizations.of(context).categoryCar,
           id: 2,
           icon:
               IconData(Icons.car_repair.codePoint, fontFamily: 'MaterialIcons'),
+          color: Colors.purple
+              .harmonizeWith(Theme.of(context).colorScheme.primary),
         ),
         WalletCategory(
           name: AppLocalizations.of(context).categoryFood,
           id: 3,
           icon:
               IconData(Icons.restaurant.codePoint, fontFamily: 'MaterialIcons'),
+          color: Colors.green.shade700
+              .harmonizeWith(Theme.of(context).colorScheme.primary),
         ),
         WalletCategory(
           name: AppLocalizations.of(context).categoryTravel,
           id: 4,
           icon: IconData(Icons.train.codePoint, fontFamily: 'MaterialIcons'),
+          color: Colors.orange.shade700
+              .harmonizeWith(Theme.of(context).colorScheme.primary),
         ),
       ];
       setState(() {});
@@ -282,24 +295,61 @@ class _SetupViewState extends State<SetupView> {
                                         await FlutterIconPicker.showIconPicker(
                                       context,
                                     );
-                                    if (icon == null) return;
+                                    if (icon != null) categories[i].icon = icon;
-                                    categories[i].icon = icon;
+                                    final materialEnabled =
+                                        (await SharedPreferences.getInstance())
+                                                .getBool("useMaterialYou") ??
+                                            false;
+                                    if (!mounted) return;
+                                    await showDialog(
+                                      context: context,
+                                      builder: (c) => PlatformDialog(
+                                        actions: [
+                                          PlatformButton(
+                                            text: AppLocalizations.of(context)
+                                                .done,
+                                            onPressed: () {
+                                              Navigator.of(c).pop();
+                                            },
+                                          ),
+                                        ],
+                                        title: AppLocalizations.of(context)
+                                            .pickColor,
+                                        content: Column(
+                                          children: [
+                                            ColorPicker(
+                                              pickersEnabled: {
+                                                ColorPickerType.wheel: true,
+                                                ColorPickerType.primary: false,
+                                                ColorPickerType.custom: false,
+                                                ColorPickerType.bw: false,
+                                                ColorPickerType.accent:
+                                                    materialEnabled,
+                                              },
+                                              color: categories[i].color,
+                                              onColorChanged: (color) {
+                                                categories[i].color = color;
+                                                setState(() {});
+                                              },
+                                            ),
+                                          ],
+                                        ),
+                                      ),
+                                    );
                                     setState(() {});
                                   },
                                   child: Container(
                                     decoration: BoxDecoration(
                                       borderRadius: BorderRadius.circular(16),
-                                      color: Theme.of(context)
+                                      color: categories[i].color,
-                                          .colorScheme
-                                          .secondary,
                                     ),
                                     child: Padding(
                                       padding: const EdgeInsets.all(8),
                                       child: Icon(
                                         categories[i].icon,
-                                        color: Theme.of(context)
+                                        color: categories[i]
-                                            .colorScheme
+                                            .color
-                                            .onSecondary,
+                                            .calculateTextColor(),
                                       ),
                                     ),
                                   ),
@@ -322,8 +372,9 @@ class _SetupViewState extends State<SetupView> {
                                         actions: [
                                           TextButton(
                                             onPressed: () {
-                                              if (controller.text.isEmpty)
+                                              if (controller.text.isEmpty) {
                                                 return;
+                                              }
                                               categories[i].name =
                                                   controller.text;
                                               Navigator.of(context).pop();
@@ -347,7 +398,8 @@ class _SetupViewState extends State<SetupView> {
                                         content: SizedBox(
                                           width: 400,
                                           child: PlatformField(
-                                              controller: controller),
+                                            controller: controller,
+                                          ),
                                         ),
                                       ),
                                     );
@@ -355,7 +407,8 @@ class _SetupViewState extends State<SetupView> {
                                   child: Text(
                                     categories[i].name,
                                     style: const TextStyle(
-                                        fontWeight: FontWeight.bold),
+                                      fontWeight: FontWeight.bold,
+                                    ),
                                   ),
                                 ),
                               ),
@@ -379,6 +432,9 @@ class _SetupViewState extends State<SetupView> {
                               Icons.question_mark.codePoint,
                               fontFamily: 'MaterialIcons',
                             ),
+                            color: Colors.blueGrey.harmonizeWith(
+                              Theme.of(context).colorScheme.primary,
+                            ),
                           ),
                         );
                         setState(() {});

pubspec.lock

@@ -21,10 +21,10 @@ packages:
     dependency: transitive
     description:
       name: archive
-      sha256: "7b875fd4a20b165a3084bd2d210439b22ebc653f21cea4842729c0c30c82596b"
+      sha256: "22600aa1e926be775fa5fe7e6894e7fb3df9efda8891c73f70fb3262399a432d"
       url: "https://pub.dev"
     source: hosted
-    version: "3.4.9"
+    version: "3.4.10"
   args:
     dependency: transitive
     description:
@@ -321,6 +321,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.66.0"
+  flex_color_picker:
+    dependency: "direct main"
+    description:
+      name: flex_color_picker
+      sha256: f37476ab3e80dcaca94e428e159944d465dd16312fda9ff41e07e86f04bfa51c
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.3.0"
+  flex_seed_scheme:
+    dependency: transitive
+    description:
+      name: flex_seed_scheme
+      sha256: "29c12aba221eb8a368a119685371381f8035011d18de5ba277ad11d7dfb8657f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.0"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -531,26 +547,26 @@ packages:
     dependency: "direct main"
     description:
       name: image_picker
-      sha256: fc712337719239b0b6e41316aa133350b078fa39b6cbd706b61f3fd421b03c77
+      sha256: "340efe08645537d6b088a30620ee5752298b1630f23a829181172610b868262b"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.5"
+    version: "1.0.6"
   image_picker_android:
     dependency: transitive
     description:
       name: image_picker_android
-      sha256: ecdc963d2aa67af5195e723a40580f802d4392e31457a12a562b3e2bd6a396fe
+      sha256: "1a27bf4cc0330389cebe465bab08fe6dec97e44015b4899637344bb7297759ec"
       url: "https://pub.dev"
     source: hosted
-    version: "0.8.9+1"
+    version: "0.8.9+2"
   image_picker_for_web:
     dependency: transitive
     description:
       name: image_picker_for_web
-      sha256: "50bc9ae6a77eea3a8b11af5eb6c661eeb858fdd2f734c2a4fd17086922347ef7"
+      sha256: e2423c53a68b579a7c37a1eda967b8ae536c3d98518e5db95ca1fe5719a730a3
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.1"
+    version: "3.0.2"
   image_picker_ios:
     dependency: transitive
     description:
@@ -579,10 +595,10 @@ packages:
     dependency: transitive
     description:
       name: image_picker_platform_interface
-      sha256: ed9b00e63977c93b0d2d2b343685bed9c324534ba5abafbb3dfbd6a780b1b514
+      sha256: "0e827c156e3a90edd3bbe7f6de048b39247b16e58173b08a835b7eb00aba239e"
       url: "https://pub.dev"
     source: hosted
-    version: "2.9.1"
+    version: "2.9.2"
   image_picker_windows:
     dependency: transitive
     description:
@@ -760,10 +776,10 @@ packages:
     dependency: transitive
     description:
       name: path_provider_android
-      sha256: e595b98692943b4881b219f0a9e3945118d3c16bd7e2813f98ec6e532d905f72
+      sha256: "477184d672607c0a3bf68fbbf601805f92ef79c82b64b4d6eb318cbca4c48668"
       url: "https://pub.dev"
     source: hosted
-    version: "2.2.1"
+    version: "2.2.2"
   path_provider_foundation:
     dependency: transitive
     description:
@@ -816,10 +832,10 @@ packages:
     dependency: transitive
     description:
       name: plugin_platform_interface
-      sha256: f4f88d4a900933e7267e2b353594774fc0d07fb072b47eedcd5b54e1ea3269f8
+      sha256: "4820fbfdb9478b1ebae27888254d445073732dae3d6ea81f0b7e06d5dedc3f02"
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.7"
+    version: "2.1.8"
   pointycastle:
     dependency: transitive
     description:
@@ -1165,18 +1181,18 @@ packages:
     dependency: transitive
     description:
       name: win32
-      sha256: b0f37db61ba2f2e9b7a78a1caece0052564d1bc70668156cf3a29d676fe4e574
+      sha256: "464f5674532865248444b4c3daca12bd9bf2d7c47f759ce2617986e7229494a8"
       url: "https://pub.dev"
     source: hosted
-    version: "5.1.1"
+    version: "5.2.0"
   xdg_directories:
     dependency: transitive
     description:
       name: xdg_directories
-      sha256: "589ada45ba9e39405c198fe34eb0f607cddb2108527e658136120892beac46d2"
+      sha256: faea9dee56b520b55a566385b84f2e8de55e7496104adada9962e0bd11bcff1d
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.3"
+    version: "1.0.4"
   xml:
     dependency: transitive
     description:

pubspec.yaml

@@ -18,6 +18,7 @@ dependencies:
   dio: ^5.3.0
   dynamic_color: ^1.6.6
   fl_chart: ^0.66.0
+  flex_color_picker: ^3.3.0
   flutter:
     sdk: flutter
   flutter_iconpicker: ^3.2.4