Improved mobile layout

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

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,13 +7,36 @@ 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),
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        child: Row(
+          children: [
+            const Text (
+              'Transactions',
+              style: TextStyle(
+                fontWeight: FontWeight.w900,
+                fontSize: 35,
+              ),
+            ),
+            FilledButton.icon(
+              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(
@@ -23,7 +46,7 @@ class TransactionsActions extends StatelessWidget {
             fontSize: 35,
           ),
         ),
-            CategoryFilter(),
+        const CategoryFilter(),
         IconButton(
           onPressed: () => TransactionAddDialog.show(context, null),
           icon: const Icon(
@@ -31,7 +54,17 @@ class TransactionsActions extends StatelessWidget {
           )
         ),
       ],
-        )
+    );
+  }
+
+  @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),
       )
     );
   }