Improved mobile layout

This commit is contained in:
2024-02-18 12:59:45 +01:00
parent 57ed6f44cd
commit b2175ddafd
8 changed files with 160 additions and 78 deletions

View File

@@ -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 (
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)
],
),
]
)
)
),
smallVerticalScreen ? _smallScreenHeader(state) : _largeScreenHeader(state),
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 (
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),
],
)
)
)
),
smallVerticalScreen ? _smallScreenTotalsCharts(state) : _largeScreenTotalsCharts(state),
],
)
),