Improved mobile layout
This commit is contained in:
@@ -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),
|
||||
],
|
||||
)
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user