gltron/Krezus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved mobile layout

Browse Source
This commit is contained in:
gltron
2024-02-18 12:59:45 +01:00
parent 57ed6f44cd
commit b2175ddafd
8 changed files with 160 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/pages/budgets/budgets_page.dart
View File

@@ -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(),

14
lib/pages/budgets/widgets/budgets_actions.dart
View File

@@ -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),
margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
child: Row(
padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 0),
margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 0),
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
)
),
],
)
)

2
lib/pages/data/data_page.dart
View File

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

93
lib/pages/stats/stats_page.dart
View File

@@ -14,18 +14,10 @@ import 'package:tunas/repositories/transactions/transactions_repository.dart';
class StatsPage extends StatelessWidget {
const StatsPage({super.key});
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => ChartBloc(
metadataRepository: RepositoryProvider.of<MetadataRepository>(context),
transactionsRepository: RepositoryProvider.of<TransactionsRepository>(context),
),
child: BlocBuilder<ChartBloc, ChartState>(
builder: (context, state) => ListView(
children: [
Center (
child: ConstrainedBox(
Widget _largeScreenHeader(ChartState state) {
return Center (
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
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(
height: 200,
child: GlobalTotalChart(monthlyTotals: state.scopedMonthlyTotals)
child: Column(
children: [
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),
],
)
),

2
lib/pages/stats/widgets/account_counters.dart
View File

@@ -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,

12
lib/pages/stats/widgets/categories_totals_chart.dart
View File

@@ -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
)
),

2
lib/pages/stats/widgets/global_counter.dart
View File

@@ -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,

51
lib/pages/transactions/widgets/transactions_actions.dart
View File

@@ -7,13 +7,36 @@ import 'package:tunas/pages/transactions/widgets/transaction_add_dialog.dart';
class TransactionsActions extends StatelessWidget {
const TransactionsActions({super.key});
@override
Widget build(BuildContext context) {
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: Row(
Widget _smallScreenLayout(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
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),
)
);
}