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

Fixed mobile layout

Browse Source
This commit is contained in:
gltron
2024-02-18 14:42:50 +01:00
parent b2175ddafd
commit 2006ebf5cb
10 changed files with 220 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/pages/transactions/transactions_page.dart
View File

@@ -8,11 +8,13 @@ class TransactionsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
MediaQueryData mediaQuery = MediaQuery.of(context);
return Center(
child: ConstrainedBox(
child: Container(
constraints: const BoxConstraints(
maxWidth: 1000
),
padding: mediaQuery.padding,
child: const Column(
children: [
TransactionsActions(),

156
lib/pages/transactions/widgets/transaction_line.dart
View File

@@ -9,8 +9,121 @@ class TransactionLine extends StatelessWidget {
const TransactionLine({super.key, required this.transaction, required this.subTotal});
List<Widget> _largeScreenLayout(BuildContext context) {
return [
SizedBox(
width: 100,
child: Text(
DateFormat('dd/MM/yyyy', 'fr_FR').format(transaction.date),
style: const TextStyle(
fontWeight: FontWeight.w300,
fontSize: 15
)
)
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
transaction.category,
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 18)
),
Text(
transaction.description,
style: const TextStyle(fontWeight: FontWeight.w300, fontSize: 15)
),
],
),
),
SizedBox(
width: 100,
child: Text(transaction.account),
),
SizedBox(
width: 120,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
NumberFormat(transaction.value > 0 ? '+#######.00 €' : '#######.00 €', 'fr_FR').format(transaction.value),
style: TextStyle(
color: transaction.value > 0 ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.error
)
),
Text(
NumberFormat('#######.00 €', 'fr_FR').format(subTotal),
style: TextStyle(
fontWeight: FontWeight.w300,
fontSize: 15,
color: subTotal > 0 ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.error
)
),
],
),
)
];
}
List<Widget> _smallScreenLayout(BuildContext context) {
return [
SizedBox(
width: 100,
child: Text(
DateFormat('dd/MM/yyyy', 'fr_FR').format(transaction.date),
style: const TextStyle(
fontWeight: FontWeight.w300,
fontSize: 15
)
)
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
transaction.category,
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 18)
),
Text(
transaction.description,
style: const TextStyle(fontWeight: FontWeight.w300, fontSize: 15)
),
Text(
transaction.account,
style: const TextStyle(fontWeight: FontWeight.w300, fontSize: 15)
),
],
),
),
SizedBox(
width: 120,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
NumberFormat(transaction.value > 0 ? '+#######.00 €' : '#######.00 €', 'fr_FR').format(transaction.value),
style: TextStyle(
color: transaction.value > 0 ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.error
)
),
Text(
NumberFormat('#######.00 €', 'fr_FR').format(subTotal),
style: TextStyle(
fontWeight: FontWeight.w300,
fontSize: 15,
color: subTotal > 0 ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.error
)
),
],
),
)
];
}
@override
Widget build(BuildContext context) {
bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
return InkWell(
onTap: () => TransactionAddDialog.show(context, transaction),
child: MergeSemantics(
@@ -19,48 +132,7 @@ class TransactionLine extends StatelessWidget {
margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 100,
child: Text(DateFormat('dd-MM-yyyy', 'fr_FR').format(transaction.date))
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
transaction.category,
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 18)
),
Text(transaction.description),
],
),
),
SizedBox(
width: 100,
child: Text(transaction.account),
),
SizedBox(
width: 120,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
NumberFormat(transaction.value > 0 ? '+#######.00 €' : '#######.00 €', 'fr_FR').format(transaction.value),
style: TextStyle(
color: transaction.value > 0 ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.error
)
),
Text(
NumberFormat('#######.00 €', 'fr_FR').format(subTotal),
style: TextStyle(
color: subTotal > 0 ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.error
)
),
],
),
)
],
children: smallVerticalScreen ? _smallScreenLayout(context) : _largeScreenLayout(context),
)
)
)

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

@@ -23,7 +23,7 @@ class TransactionsActions extends StatelessWidget {
),
FilledButton.icon(
onPressed: () => TransactionAddDialog.show(context, null),
label: const Text('Add transaction'),
label: const Text('Add'),
icon: const Icon(
Icons.add
)

75
lib/pages/transactions/widgets/transactions_header.dart
View File

@@ -3,39 +3,66 @@ import 'package:flutter/material.dart';
class TransactionsHeader extends StatelessWidget {
const TransactionsHeader({super.key});
List<Widget> _largeScreenLayout() {
return const [
SizedBox(
width: 100,
child: Text('Date')
),
Expanded(
child: Text('Description')
),
SizedBox(
width: 100,
child: Text('Account'),
),
SizedBox(
width: 120,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text('Amount'),
Text('SubTotal'),
],
),
)
];
}
List<Widget> _smallScreenLayout() {
return const [
SizedBox(
width: 100,
child: Text('Date')
),
Expanded(
child: Text('Description')
),
SizedBox(
width: 120,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text('Amount'),
Text('SubTotal'),
],
),
)
];
}
@override
Widget build(BuildContext context) {
bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
return Container(
padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 10),
margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.black))
),
child: const Row(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 100,
child: Text('Date')
),
Expanded(
child: Text('Description')
),
SizedBox(
width: 100,
child: Text('Account'),
),
SizedBox(
width: 120,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text('Amount'),
Text('SubTotal'),
],
),
)
],
children: smallVerticalScreen ? _smallScreenLayout() : _largeScreenLayout(),
),
);
}