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,15 +60,20 @@ 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: [
const SizedBox(height: 8),
Text('Nouvelle transaction', style: Theme.of(context).textTheme.titleLarge),
const SizedBox(height: 20),
TextField( TextField(
controller: payeeCtrl, controller: payeeCtrl,
decoration: const InputDecoration(labelText: 'Bénéficiaire', hintText: 'Ex: Supermarché'), decoration: const InputDecoration(labelText: 'Bénéficiaire', hintText: 'Ex: Supermarché'),
@ -88,7 +92,7 @@ class _YnabAppState extends ConsumerState<YnabApp> {
ButtonSegment(value: false, label: Text('Revenu'), icon: Icon(Icons.arrow_downward)), ButtonSegment(value: false, label: Text('Revenu'), icon: Icon(Icons.arrow_downward)),
], ],
selected: {isExpense}, selected: {isExpense},
onSelectionChanged: (v) => setDialogState(() => isExpense = v.first), onSelectionChanged: (v) => setSheetState(() => isExpense = v.first),
style: ButtonStyle( style: ButtonStyle(
visualDensity: VisualDensity.compact, visualDensity: VisualDensity.compact,
), ),
@ -105,14 +109,7 @@ class _YnabAppState extends ConsumerState<YnabApp> {
if (v != null) accountId = v; if (v != null) accountId = v;
}, },
), ),
], const SizedBox(height: 24),
),
),
actions: [
FilledButton.tonal(
onPressed: () => Navigator.pop(ctx),
child: const Text('Annuler'),
),
FilledButton( FilledButton(
onPressed: () async { onPressed: () async {
final payee = payeeCtrl.text.trim(); final payee = payeeCtrl.text.trim();
@ -126,13 +123,14 @@ class _YnabAppState extends ConsumerState<YnabApp> {
amount: amount, amount: amount,
date: date, date: date,
)); ));
if (ctx.mounted) Navigator.pop(ctx); if (context.mounted) Navigator.pop(context);
}, },
child: const Text('Ajouter'), 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)),
), ),