nouvelle transaction: fond dynamique vert/rouge + titre gras centré

This commit is contained in:
alexis 2026-07-12 01:09:30 +02:00
parent bb3d4ebe2a
commit d140548e5f
2 changed files with 89 additions and 64 deletions

View file

@ -60,80 +60,106 @@ class _YnabAppState extends ConsumerState<YnabApp> {
DateTime date = DateTime.now(); DateTime date = DateTime.now();
bool isExpense = true; bool isExpense = true;
final colorScheme = Theme.of(context).colorScheme;
await showModalBottomSheet( await showModalBottomSheet(
context: context, context: context,
isScrollControlled: true, isScrollControlled: true,
useSafeArea: true, useSafeArea: true,
backgroundColor: Colors.transparent,
builder: (ctx) => StatefulBuilder( builder: (ctx) => StatefulBuilder(
builder: (context, setSheetState) => Padding( builder: (context, setSheetState) => Container(
padding: EdgeInsets.fromLTRB(24, 0, 24, MediaQuery.of(context).viewInsets.bottom + 24), decoration: BoxDecoration(
child: Column( color: isExpense ? colorScheme.errorContainer : colorScheme.primaryContainer,
mainAxisSize: MainAxisSize.min, borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
crossAxisAlignment: CrossAxisAlignment.stretch, ),
children: [ child: Padding(
const SizedBox(height: 8), padding: EdgeInsets.fromLTRB(24, 0, 24, MediaQuery.of(context).viewInsets.bottom + 24),
Text('Nouvelle transaction', style: Theme.of(context).textTheme.titleLarge), child: Column(
const SizedBox(height: 20), mainAxisSize: MainAxisSize.min,
TextField( crossAxisAlignment: CrossAxisAlignment.stretch,
controller: payeeCtrl, children: [
decoration: const InputDecoration(labelText: 'Bénéficiaire', hintText: 'Ex: Supermarché'), const SizedBox(height: 12),
autofocus: true, Center(
), child: Container(
const SizedBox(height: 12), width: 32,
TextField( height: 4,
controller: amountCtrl, decoration: BoxDecoration(
decoration: const InputDecoration(labelText: 'Montant', hintText: '0,00'), color: colorScheme.onSurfaceVariant.withAlpha(80),
keyboardType: const TextInputType.numberWithOptions(decimal: true), borderRadius: BorderRadius.circular(2),
), ),
const SizedBox(height: 12), ),
SegmentedButton<bool>(
segments: const [
ButtonSegment(value: true, label: Text('Dépense'), icon: Icon(Icons.arrow_upward)),
ButtonSegment(value: false, label: Text('Revenu'), icon: Icon(Icons.arrow_downward)),
],
selected: {isExpense},
onSelectionChanged: (v) => setSheetState(() => isExpense = v.first),
style: ButtonStyle(
visualDensity: VisualDensity.compact,
), ),
), const SizedBox(height: 16),
const SizedBox(height: 12), Text(
DropdownMenu<int>( 'Nouvelle transaction',
initialSelection: accountId, textAlign: TextAlign.center,
label: const Text('Compte'), style: Theme.of(context).textTheme.titleLarge?.copyWith(
expandedInsets: EdgeInsets.zero, fontWeight: FontWeight.bold,
dropdownMenuEntries: accounts ),
.map((a) => DropdownMenuEntry(value: a.id, label: a.name)) ),
.toList(), const SizedBox(height: 20),
onSelected: (v) { TextField(
if (v != null) accountId = v; controller: payeeCtrl,
}, decoration: const InputDecoration(labelText: 'Bénéficiaire', hintText: 'Ex: Supermarché'),
), autofocus: true,
const SizedBox(height: 24), ),
FilledButton( const SizedBox(height: 12),
onPressed: () async { TextField(
final payee = payeeCtrl.text.trim(); controller: amountCtrl,
final amountStr = amountCtrl.text.trim().replaceAll(',', '.'); decoration: const InputDecoration(labelText: 'Montant', hintText: '0,00'),
final raw = double.tryParse(amountStr); keyboardType: const TextInputType.numberWithOptions(decimal: true),
if (payee.isEmpty || raw == null || accountId == null) return; ),
final amount = isExpense ? -raw.abs() : raw.abs(); const SizedBox(height: 12),
await db.into(db.transactions).insert(TransactionsCompanion.insert( SegmentedButton<bool>(
accountId: accountId!, segments: const [
payee: payee, ButtonSegment(value: true, label: Text('Dépense'), icon: Icon(Icons.arrow_upward)),
amount: amount, ButtonSegment(value: false, label: Text('Revenu'), icon: Icon(Icons.arrow_downward)),
date: date, ],
)); selected: {isExpense},
if (context.mounted) Navigator.pop(context); onSelectionChanged: (v) => setSheetState(() => isExpense = v.first),
}, style: ButtonStyle(
child: const Text('Ajouter'), visualDensity: VisualDensity.compact,
), ),
], ),
const SizedBox(height: 12),
DropdownMenu<int>(
initialSelection: accountId,
label: const Text('Compte'),
expandedInsets: EdgeInsets.zero,
dropdownMenuEntries: accounts
.map((a) => DropdownMenuEntry(value: a.id, label: a.name))
.toList(),
onSelected: (v) {
if (v != null) accountId = v;
},
),
const SizedBox(height: 24),
FilledButton(
onPressed: () async {
final payee = payeeCtrl.text.trim();
final amountStr = amountCtrl.text.trim().replaceAll(',', '.');
final raw = double.tryParse(amountStr);
if (payee.isEmpty || raw == null || accountId == null) return;
final amount = isExpense ? -raw.abs() : raw.abs();
await db.into(db.transactions).insert(TransactionsCompanion.insert(
accountId: accountId!,
payee: payee,
amount: amount,
date: date,
));
if (context.mounted) Navigator.pop(context);
},
child: const Text('Ajouter'),
),
const SizedBox(height: 8),
],
),
), ),
), ),
), ),
); );
}
}
void _toggleSearch() { void _toggleSearch() {
setState(() { setState(() {
_searchActive = !_searchActive; _searchActive = !_searchActive;

View file

@ -109,7 +109,6 @@ final ThemeData ynabTheme = ThemeData(
), ),
bottomSheetTheme: const BottomSheetThemeData( bottomSheetTheme: const BottomSheetThemeData(
backgroundColor: kSurfaceCard, backgroundColor: kSurfaceCard,
showDragHandle: true,
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(20)), borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
), ),