Improved mobile layout

android/app/src/main/AndroidManifest.xml

@@ -2,7 +2,7 @@
     <application
         android:label="tunas"
         android:name="${applicationName}"
-        android:icon="@mipmap/ic_launcher">
+        android:icon="@mipmap/launcher_icon">
         <activity
             android:name=".MainActivity"
             android:exported="true"

lib/pages/budgets/budgets_page.dart

@@ -8,10 +8,12 @@ class BudgetsPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Center(
-      child: ConstrainedBox(
+      child: Container(
         constraints: const BoxConstraints(
           maxWidth: 1000 
         ),
+        padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 10),
+        margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
         child: const Column(
           children: [
             BudgetsActions(),

lib/pages/budgets/widgets/budgets_actions.dart

@@ -9,24 +9,18 @@ class BudgetsActions extends StatelessWidget {
   Widget build(BuildContext context) {
     return BlocBuilder<AccountBloc, AccountState>(
       builder: (context, state) => Container(
-        padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 10),
+        padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 0),
-        margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
+        margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 0),
-        child: Row(
+        child: const Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            const Text(
+            Text(
               'Budgets',
               style: TextStyle(
                 fontWeight: FontWeight.w900,
                 fontSize: 35,
               ),
             ),
-            IconButton(
-              onPressed: () => null,
-              icon: const Icon(
-                Icons.add
-              )
-            ),
           ],
         )
       )

lib/pages/data/data_page.dart

@@ -29,8 +29,8 @@ class DataPage extends StatelessWidget {
               child: ListView(
                 children: const [
                   ImportSettings(),
-                  CategoriesSettings(),
                   AccountSettings(),
+                  CategoriesSettings(),
                 ]
               )
             ),

lib/pages/stats/stats_page.dart

@@ -14,8 +14,103 @@ import 'package:tunas/repositories/transactions/transactions_repository.dart';
 class StatsPage extends StatelessWidget {
   const StatsPage({super.key});
 
+  Widget _largeScreenHeader(ChartState state) {
+    return Center (
+      child: Container(
+        margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
+        constraints: const BoxConstraints(
+          maxWidth: 1000
+        ),
+        child: Column(
+          children: [
+            Row(
+              children: [
+                Expanded(
+                  flex: 2,
+                  child: GlobalCounter(value: state.globalTotal)
+                ),
+                const SizedBox(width: 10),
+                Expanded(
+                  flex: 1,
+                  child: AccountCounter(accountsTotals: state.accountsTotals)
+                ),
+              ],
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                const YearSelector(),
+                ProfitIndicator(profit: state.scoppedProfit)
+              ],
+            ),
+          ]
+        )
+      )
+    );
+  }
+
+  Widget _smallScreenHeader(ChartState state) {
+    return Center (
+      child: Container(
+        margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
+        constraints: const BoxConstraints(
+          maxWidth: 1000
+        ),
+        child: Column(
+          children: [
+            GlobalCounter(value: state.globalTotal),
+            AccountCounter(accountsTotals: state.accountsTotals),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                ProfitIndicator(profit: state.scoppedProfit),
+                const YearSelector(),
+              ],
+            ),
+          ]
+        )
+      )
+    );
+  }
+
+  Widget _largeScreenTotalsCharts(ChartState state) {
+    return Center (
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(
+          maxWidth: 1500
+        ),
+        child: SizedBox(
+          height: 450,
+          child: Row(
+            children: [
+              CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesPositiveTotals, categoriesTotalsPercents: state.scopedSimplifiedCategoriesPositiveTotalsPercents),
+              CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesNegativeTotals, categoriesTotalsPercents: state.scopedSimplifiedCategoriesNegativeTotalsPercents),
+            ],
+          )
+        )
+      )
+    );
+  }
+
+  Widget _smallScreenTotalsCharts(ChartState state) {
+    return Center (
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(
+          maxWidth: 1500
+        ),
+        child: Column(
+          children: [
+            CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesPositiveTotals, categoriesTotalsPercents: state.scopedSimplifiedCategoriesPositiveTotalsPercents),
+            CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesNegativeTotals, categoriesTotalsPercents: state.scopedSimplifiedCategoriesNegativeTotalsPercents),
+          ],
+        )
+      )
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
+    bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
     return BlocProvider(
       create: (context) => ChartBloc(
         metadataRepository: RepositoryProvider.of<MetadataRepository>(context),
@@ -24,60 +119,16 @@ class StatsPage extends StatelessWidget {
       child: BlocBuilder<ChartBloc, ChartState>(
         builder: (context, state) => ListView(
           children: [
-            Center (
+            smallVerticalScreen ? _smallScreenHeader(state) : _largeScreenHeader(state),
-              child: ConstrainedBox(
-                constraints: const BoxConstraints(
-                  maxWidth: 1000
-                ),
-                child: Column(
-                  children: [
-                    Row(
-                      children: [
-                        Expanded(
-                          flex: 2,
-                          child: GlobalCounter(value: state.globalTotal)
-                        ),
-                        Expanded(
-                          flex: 1,
-                          child: AccountCounter(accountsTotals: state.accountsTotals)
-                        ),
-                      ],
-                    ),
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      children: [
-                        const YearSelector(),
-                        ProfitIndicator(profit: state.scoppedProfit)
-                      ],
-                    ),
-                  ]
-                )
-              )
-            ),
             SizedBox(
-              height: 200,
+              height: smallVerticalScreen ? 100 : 200,
               child: GlobalTotalChart(monthlyTotals: state.scopedMonthlyTotals)
             ),
             SizedBox(
-              height: 500,
+              height: smallVerticalScreen ? 200 : 500,
               child: MonthlyCategoriesTotalChart(categoriesMonthlyTotals: state.scopedCategoriesMonthlyTotals)
             ),
-            Center (
+            smallVerticalScreen ? _smallScreenTotalsCharts(state) : _largeScreenTotalsCharts(state),
-              child: ConstrainedBox(
-                constraints: const BoxConstraints(
-                  maxWidth: 1500
-                ),
-                child: SizedBox(
-                  height: 450,
-                  child: OverflowBar(
-                    children: [
-                      CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesPositiveTotals, categoriesTotalsPercents: state.scopedSimplifiedCategoriesPositiveTotalsPercents),
-                      CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesNegativeTotals, categoriesTotalsPercents: state.scopedSimplifiedCategoriesNegativeTotalsPercents),
-                    ],
-                  )
-                )
-              )
-            ),
           ],
         )
       ),

lib/pages/stats/widgets/account_counters.dart

@@ -31,7 +31,7 @@ class AccountCounter extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       padding: const EdgeInsets.all(10),
-      margin: const EdgeInsets.all(20),
+      margin: const EdgeInsets.only(bottom: 10),
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(15),
         color: Theme.of(context).colorScheme.primaryContainer,

lib/pages/stats/widgets/categories_totals_chart.dart

@@ -11,7 +11,7 @@ class CategoriesTotalsChart extends StatelessWidget {
 
   const CategoriesTotalsChart({super.key, required this.categoriesTotals, required this.categoriesTotalsPercents});
 
-  List<PieChartSectionData> _convertDataForChart(Map<String, Color> categoriesColors) {
+  List<PieChartSectionData> _convertDataForChart(Map<String, Color> categoriesColors, bool smallVerticalScreen) {
     return categoriesTotalsPercents
       .map((item) => 
         PieChartSectionData(
@@ -21,9 +21,10 @@ class CategoriesTotalsChart extends StatelessWidget {
             fontSize: 15,
             fontWeight: FontWeight.w300
           ),
+          showTitle: !smallVerticalScreen,
           titlePositionPercentageOffset: 0.5,
           borderSide: const BorderSide(width: 0),
-          radius: 40,
+          radius: smallVerticalScreen ? 30 : 40,
           color: categoriesColors[item.label]
         ))
       .toList();
@@ -60,10 +61,11 @@ class CategoriesTotalsChart extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
     return BlocBuilder<CategoryBloc, CategoryState>(
       builder: (context, state) => Container(
         height: 320,
-        width: 500,
+        width: smallVerticalScreen ? null : 500,
         padding: const EdgeInsets.all(10),
         margin: const EdgeInsets.all(20),
         decoration: BoxDecoration(
@@ -84,11 +86,11 @@ class CategoriesTotalsChart extends StatelessWidget {
             Expanded(
               child: PieChart(
                 PieChartData(
-                  sections: _convertDataForChart(state.categoriesColors),
+                  sections: _convertDataForChart(state.categoriesColors, smallVerticalScreen),
                   borderData: FlBorderData(
                     show: false
                   ),
-                  centerSpaceRadius: 50,
+                  centerSpaceRadius: smallVerticalScreen ? 30 :50,
                   sectionsSpace: 4
                 )
               ),

lib/pages/stats/widgets/global_counter.dart

@@ -10,7 +10,7 @@ class GlobalCounter extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       padding: const EdgeInsets.all(10),
-      margin: const EdgeInsets.all(20),
+      margin: const EdgeInsets.only(bottom: 10),
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(15),
         color: Theme.of(context).colorScheme.primaryContainer,

lib/pages/transactions/widgets/transactions_actions.dart

@@ -7,31 +7,64 @@ import 'package:tunas/pages/transactions/widgets/transaction_add_dialog.dart';
 class TransactionsActions extends StatelessWidget {
   const TransactionsActions({super.key});
 
-  @override
+  Widget _smallScreenLayout(BuildContext context) {
-  Widget build(BuildContext context) {
+    return Column(
-    return BlocBuilder<TransactionBloc, TransactionState>(
+      crossAxisAlignment: CrossAxisAlignment.start,
-      builder: (context, state) => Container(
+      children: [
-        padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 10),
+        Row(
-        margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
-        child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            const Text(
+            const Text (
               'Transactions',
               style: TextStyle(
                 fontWeight: FontWeight.w900,
                 fontSize: 35,
               ),
             ),
-            CategoryFilter(),
+            FilledButton.icon(
-            IconButton(
               onPressed: () => TransactionAddDialog.show(context, null),
+              label: const Text('Add transaction'),
               icon: const Icon(
                 Icons.add
               )
             ),
           ],
-        )
+        ),
+        const CategoryFilter(),
+      ],
+    );
+  }
+
+  Widget _largeScreenLayout(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        const Text(
+          'Transactions',
+          style: TextStyle(
+            fontWeight: FontWeight.w900,
+            fontSize: 35,
+          ),
+        ),
+        const CategoryFilter(),
+        IconButton(
+          onPressed: () => TransactionAddDialog.show(context, null),
+          icon: const Icon(
+            Icons.add
+          )
+        ),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
+    return BlocBuilder<TransactionBloc, TransactionState>(
+      builder: (context, state) => Container(
+        padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 10),
+        margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
+        child: smallVerticalScreen ? _smallScreenLayout(context) : _largeScreenLayout(context),
       )
     );
   }

macos/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,68 +1,68 @@
 {
-  "images" : [
+    "info": {
-    {
+        "version": 1,
-      "size" : "16x16",
+        "author": "xcode"
-      "idiom" : "mac",
-      "filename" : "app_icon_16.png",
-      "scale" : "1x"
     },
-    {
+    "images": [
-      "size" : "16x16",
+        {
-      "idiom" : "mac",
+            "size": "16x16",
-      "filename" : "app_icon_32.png",
+            "idiom": "mac",
-      "scale" : "2x"
+            "filename": "app_icon_16.png",
-    },
+            "scale": "1x"
-    {
+        },
-      "size" : "32x32",
+        {
-      "idiom" : "mac",
+            "size": "16x16",
-      "filename" : "app_icon_32.png",
+            "idiom": "mac",
-      "scale" : "1x"
+            "filename": "app_icon_32.png",
-    },
+            "scale": "2x"
-    {
+        },
-      "size" : "32x32",
+        {
-      "idiom" : "mac",
+            "size": "32x32",
-      "filename" : "app_icon_64.png",
+            "idiom": "mac",
-      "scale" : "2x"
+            "filename": "app_icon_32.png",
-    },
+            "scale": "1x"
-    {
+        },
-      "size" : "128x128",
+        {
-      "idiom" : "mac",
+            "size": "32x32",
-      "filename" : "app_icon_128.png",
+            "idiom": "mac",
-      "scale" : "1x"
+            "filename": "app_icon_64.png",
-    },
+            "scale": "2x"
-    {
+        },
-      "size" : "128x128",
+        {
-      "idiom" : "mac",
+            "size": "128x128",
-      "filename" : "app_icon_256.png",
+            "idiom": "mac",
-      "scale" : "2x"
+            "filename": "app_icon_128.png",
-    },
+            "scale": "1x"
-    {
+        },
-      "size" : "256x256",
+        {
-      "idiom" : "mac",
+            "size": "128x128",
-      "filename" : "app_icon_256.png",
+            "idiom": "mac",
-      "scale" : "1x"
+            "filename": "app_icon_256.png",
-    },
+            "scale": "2x"
-    {
+        },
-      "size" : "256x256",
+        {
-      "idiom" : "mac",
+            "size": "256x256",
-      "filename" : "app_icon_512.png",
+            "idiom": "mac",
-      "scale" : "2x"
+            "filename": "app_icon_256.png",
-    },
+            "scale": "1x"
-    {
+        },
-      "size" : "512x512",
+        {
-      "idiom" : "mac",
+            "size": "256x256",
-      "filename" : "app_icon_512.png",
+            "idiom": "mac",
-      "scale" : "1x"
+            "filename": "app_icon_512.png",
-    },
+            "scale": "2x"
-    {
+        },
-      "size" : "512x512",
+        {
-      "idiom" : "mac",
+            "size": "512x512",
-      "filename" : "app_icon_1024.png",
+            "idiom": "mac",
-      "scale" : "2x"
+            "filename": "app_icon_512.png",
-    }
+            "scale": "1x"
-  ],
+        },
-  "info" : {
+        {
-    "version" : 1,
+            "size": "512x512",
-    "author" : "xcode"
+            "idiom": "mac",
-  }
+            "filename": "app_icon_1024.png",
-}
+            "scale": "2x"
+        }
+    ]
+}

pubspec.lock

@@ -1,6 +1,22 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  archive:
+    dependency: transitive
+    description:
+      name: archive
+      sha256: "22600aa1e926be775fa5fe7e6894e7fb3df9efda8891c73f70fb3262399a432d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.4.10"
+  args:
+    dependency: transitive
+    description:
+      name: args
+      sha256: eef6c46b622e0494a36c5a12d10d77fb4e855501a91c1b9ef9339326e58f0596
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.2"
   async:
     dependency: transitive
     description:
@@ -33,6 +49,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.0"
+  checked_yaml:
+    dependency: transitive
+    description:
+      name: checked_yaml
+      sha256: feb6bed21949061731a7a75fc5d2aa727cf160b91af9a3e464c5e3a32e28b5ff
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.3"
+  cli_util:
+    dependency: transitive
+    description:
+      name: cli_util
+      sha256: c05b7406fdabc7a49a3929d4af76bcaccbbffcbcdcf185b082e1ae07da323d19
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.4.1"
   clock:
     dependency: transitive
     description:
@@ -49,6 +81,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.18.0"
+  convert:
+    dependency: transitive
+    description:
+      name: convert
+      sha256: "0f08b14755d163f6e2134cb58222dd25ea2a2ee8a195e53983d57c075324d592"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.1"
   crypto:
     dependency: transitive
     description:
@@ -198,6 +238,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.0"
+  flutter_launcher_icons:
+    dependency: "direct dev"
+    description:
+      name: flutter_launcher_icons
+      sha256: "526faf84284b86a4cb36d20a5e45147747b7563d921373d4ee0559c54fcdbcea"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.13.1"
   flutter_lints:
     dependency: "direct dev"
     description:
@@ -245,6 +293,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.6.1"
+  image:
+    dependency: transitive
+    description:
+      name: image
+      sha256: "4c68bfd5ae83e700b5204c1e74451e7bf3cf750e6843c6e158289cf56bda018e"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.1.7"
   intl:
     dependency: "direct main"
     description:
@@ -253,6 +309,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.18.1"
+  js:
+    dependency: transitive
+    description:
+      name: js
+      sha256: c1b2e9b5ea78c45e1a0788d29606ba27dc5f71f019f32ca5140f61ef071838cf
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.1"
+  json_annotation:
+    dependency: transitive
+    description:
+      name: json_annotation
+      sha256: b10a7b2ff83d83c777edba3c6a0f97045ddadd56c944e1a23a3fdf43a1bf4467
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.8.1"
   lints:
     dependency: transitive
     description:
@@ -357,6 +429,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.2.1"
+  petitparser:
+    dependency: transitive
+    description:
+      name: petitparser
+      sha256: c15605cd28af66339f8eb6fbe0e541bfe2d1b72d5825efc6598f3e0a31b9ad27
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.0.2"
   platform:
     dependency: transitive
     description:
@@ -405,6 +485,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.10.1+2"
+  pointycastle:
+    dependency: transitive
+    description:
+      name: pointycastle
+      sha256: "43ac87de6e10afabc85c445745a7b799e04de84cebaa4fd7bf55a5e1e9604d29"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.7.4"
   provider:
     dependency: transitive
     description:
@@ -530,6 +618,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.3"
+  xml:
+    dependency: transitive
+    description:
+      name: xml
+      sha256: b015a8ad1c488f66851d762d3090a21c600e479dc75e68328c52774040cf9226
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.5.0"
+  yaml:
+    dependency: transitive
+    description:
+      name: yaml
+      sha256: "75769501ea3489fca56601ff33454fe45507ea3bfb014161abc3b43ae25989d5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.2"
 sdks:
   dart: ">=3.2.2 <4.0.0"
   flutter: ">=3.16.0"

pubspec.yaml

@@ -34,6 +34,7 @@ dev_dependencies:
     sdk: flutter
 
   flutter_lints: ^3.0.1
+  flutter_launcher_icons: "^0.13.1"
 
 flutter:
   fonts:
@@ -48,3 +49,14 @@ flutter:
         - asset: assets/fonts/16Segments-Basic.otf
   uses-material-design: true
 
+flutter_launcher_icons:
+  android: "launcher_icon"
+  ios: true
+  image_path: "assets/icon/tunas.png"
+  min_sdk_android: 21
+  web:
+    generate: true
+  windows:
+    generate: true
+  macos:
+    generate: true

web/manifest.json

@@ -32,4 +32,4 @@
             "purpose": "maskable"
         }
     ]
-}
+}