dialogue transaction: AlertDialog → BottomSheet M3 expressive

This commit is contained in:
alexis 2026-07-12 01:00:52 +02:00
parent 0a04139396
commit bb3d4ebe2a
2 changed files with 66 additions and 67 deletions

View file

@ -1,6 +1,5 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'theme/app_theme.dart';
import 'screens/dashboard_screen.dart'; import 'screens/dashboard_screen.dart';
import 'screens/budget_screen.dart'; import 'screens/budget_screen.dart';
import 'screens/accounts_screen.dart'; import 'screens/accounts_screen.dart';
@ -61,76 +60,75 @@ class _YnabAppState extends ConsumerState<YnabApp> {
DateTime date = DateTime.now(); DateTime date = DateTime.now();
bool isExpense = true; bool isExpense = true;
await showDialog( await showModalBottomSheet(
context: context, context: context,
isScrollControlled: true,
useSafeArea: true,
builder: (ctx) => StatefulBuilder( builder: (ctx) => StatefulBuilder(
builder: (context, setDialogState) => AlertDialog( builder: (context, setSheetState) => Padding(
title: const Text('Nouvelle transaction'), padding: EdgeInsets.fromLTRB(24, 0, 24, MediaQuery.of(context).viewInsets.bottom + 24),
content: SingleChildScrollView( child: Column(
child: Column( mainAxisSize: MainAxisSize.min,
mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
TextField( const SizedBox(height: 8),
controller: payeeCtrl, Text('Nouvelle transaction', style: Theme.of(context).textTheme.titleLarge),
decoration: const InputDecoration(labelText: 'Bénéficiaire', hintText: 'Ex: Supermarché'), const SizedBox(height: 20),
autofocus: true, TextField(
controller: payeeCtrl,
decoration: const InputDecoration(labelText: 'Bénéficiaire', hintText: 'Ex: Supermarché'),
autofocus: true,
),
const SizedBox(height: 12),
TextField(
controller: amountCtrl,
decoration: const InputDecoration(labelText: 'Montant', hintText: '0,00'),
keyboardType: const TextInputType.numberWithOptions(decimal: true),
),
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: 12), ),
TextField( const SizedBox(height: 12),
controller: amountCtrl, DropdownMenu<int>(
decoration: const InputDecoration(labelText: 'Montant', hintText: '0,00'), initialSelection: accountId,
keyboardType: const TextInputType.numberWithOptions(decimal: true), label: const Text('Compte'),
), expandedInsets: EdgeInsets.zero,
const SizedBox(height: 12), dropdownMenuEntries: accounts
SegmentedButton<bool>( .map((a) => DropdownMenuEntry(value: a.id, label: a.name))
segments: const [ .toList(),
ButtonSegment(value: true, label: Text('Dépense'), icon: Icon(Icons.arrow_upward)), onSelected: (v) {
ButtonSegment(value: false, label: Text('Revenu'), icon: Icon(Icons.arrow_downward)), if (v != null) accountId = v;
], },
selected: {isExpense}, ),
onSelectionChanged: (v) => setDialogState(() => isExpense = v.first), const SizedBox(height: 24),
style: ButtonStyle( FilledButton(
visualDensity: VisualDensity.compact, onPressed: () async {
), final payee = payeeCtrl.text.trim();
), final amountStr = amountCtrl.text.trim().replaceAll(',', '.');
const SizedBox(height: 12), final raw = double.tryParse(amountStr);
DropdownMenu<int>( if (payee.isEmpty || raw == null || accountId == null) return;
initialSelection: accountId, final amount = isExpense ? -raw.abs() : raw.abs();
label: const Text('Compte'), await db.into(db.transactions).insert(TransactionsCompanion.insert(
expandedInsets: EdgeInsets.zero, accountId: accountId!,
dropdownMenuEntries: accounts payee: payee,
.map((a) => DropdownMenuEntry(value: a.id, label: a.name)) amount: amount,
.toList(), date: date,
onSelected: (v) { ));
if (v != null) accountId = v; if (context.mounted) Navigator.pop(context);
}, },
), child: const Text('Ajouter'),
], ),
), ],
), ),
actions: [
FilledButton.tonal(
onPressed: () => Navigator.pop(ctx),
child: const Text('Annuler'),
),
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 (ctx.mounted) Navigator.pop(ctx);
},
child: const Text('Ajouter'),
),
],
), ),
), ),
); );

View file

@ -109,6 +109,7 @@ 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)),
), ),