dialogue transaction: AlertDialog → BottomSheet M3 expressive
This commit is contained in:
parent
0a04139396
commit
bb3d4ebe2a
28
lib/app.dart
28
lib/app.dart
|
|
@ -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'),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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)),
|
||||||
),
|
),
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue