M3 compatibility: AppBar (header), ListTile in accounts, trailing simplifications
This commit is contained in:
parent
e677e7897e
commit
1353194122
76
lib/app.dart
76
lib/app.dart
|
|
@ -137,41 +137,9 @@ class _YnabAppState extends ConsumerState<YnabApp> {
|
||||||
final colorScheme = theme.colorScheme;
|
final colorScheme = theme.colorScheme;
|
||||||
|
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
bottomNavigationBar: NavigationBar(
|
appBar: AppBar(
|
||||||
selectedIndex: selectedIndex,
|
title: _searchActive
|
||||||
onDestinationSelected: (int index) {
|
? TextField(
|
||||||
setState(() {
|
|
||||||
_searchActive = false;
|
|
||||||
_searchController.clear();
|
|
||||||
ref.read(searchQueryProvider.notifier).state = '';
|
|
||||||
});
|
|
||||||
ref.read(_selectedIndexProvider.notifier).state = index;
|
|
||||||
},
|
|
||||||
destinations: _navItems.map((item) {
|
|
||||||
return NavigationDestination(
|
|
||||||
icon: Icon(item.icon),
|
|
||||||
selectedIcon: Icon(item.selectedIcon),
|
|
||||||
label: item.label,
|
|
||||||
);
|
|
||||||
}).toList(),
|
|
||||||
),
|
|
||||||
body: SafeArea(
|
|
||||||
child: Column(
|
|
||||||
children: [
|
|
||||||
// Header
|
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: colorScheme.surface,
|
|
||||||
border: Border(
|
|
||||||
bottom: BorderSide(color: colorScheme.outlineVariant, width: 0.5),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
if (_searchActive)
|
|
||||||
Expanded(
|
|
||||||
child: TextField(
|
|
||||||
controller: _searchController,
|
controller: _searchController,
|
||||||
autofocus: true,
|
autofocus: true,
|
||||||
decoration: const InputDecoration(
|
decoration: const InputDecoration(
|
||||||
|
|
@ -180,18 +148,9 @@ class _YnabAppState extends ConsumerState<YnabApp> {
|
||||||
isDense: true,
|
isDense: true,
|
||||||
),
|
),
|
||||||
onChanged: (v) => ref.read(searchQueryProvider.notifier).state = v,
|
onChanged: (v) => ref.read(searchQueryProvider.notifier).state = v,
|
||||||
),
|
|
||||||
)
|
)
|
||||||
else
|
: Text(_navItems[selectedIndex].label),
|
||||||
Text(
|
actions: [
|
||||||
_navItems[selectedIndex].label,
|
|
||||||
style: TextStyle(
|
|
||||||
color: colorScheme.onSurface,
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const Spacer(),
|
|
||||||
if (_searchActive)
|
if (_searchActive)
|
||||||
IconButton(
|
IconButton(
|
||||||
icon: const Icon(Icons.close),
|
icon: const Icon(Icons.close),
|
||||||
|
|
@ -212,16 +171,27 @@ class _YnabAppState extends ConsumerState<YnabApp> {
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
body: AnimatedSwitcher(
|
||||||
// Content
|
|
||||||
Expanded(
|
|
||||||
child: AnimatedSwitcher(
|
|
||||||
duration: const Duration(milliseconds: 200),
|
duration: const Duration(milliseconds: 200),
|
||||||
child: _screens[selectedIndex],
|
child: _screens[selectedIndex],
|
||||||
),
|
),
|
||||||
),
|
bottomNavigationBar: NavigationBar(
|
||||||
],
|
selectedIndex: selectedIndex,
|
||||||
),
|
onDestinationSelected: (int index) {
|
||||||
|
setState(() {
|
||||||
|
_searchActive = false;
|
||||||
|
_searchController.clear();
|
||||||
|
ref.read(searchQueryProvider.notifier).state = '';
|
||||||
|
});
|
||||||
|
ref.read(_selectedIndexProvider.notifier).state = index;
|
||||||
|
},
|
||||||
|
destinations: _navItems.map((item) {
|
||||||
|
return NavigationDestination(
|
||||||
|
icon: Icon(item.icon),
|
||||||
|
selectedIcon: Icon(item.selectedIcon),
|
||||||
|
label: item.label,
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -50,43 +50,20 @@ class _AccountCard extends StatelessWidget {
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Card(
|
return Card(
|
||||||
margin: const EdgeInsets.only(bottom: 8),
|
margin: const EdgeInsets.only(bottom: 8),
|
||||||
child: Padding(
|
child: ListTile(
|
||||||
padding: const EdgeInsets.all(16),
|
leading: CircleAvatar(
|
||||||
child: Row(
|
backgroundColor: Theme.of(context).colorScheme.primaryContainer,
|
||||||
children: [
|
|
||||||
Container(
|
|
||||||
width: 44,
|
|
||||||
height: 44,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: Theme.of(context).colorScheme.primaryContainer,
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
),
|
|
||||||
child: Icon(_icon(), color: Theme.of(context).colorScheme.onSurfaceVariant, size: 22),
|
child: Icon(_icon(), color: Theme.of(context).colorScheme.onSurfaceVariant, size: 22),
|
||||||
),
|
),
|
||||||
const SizedBox(width: 14),
|
title: Text(account.name, style: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w600)),
|
||||||
Expanded(
|
subtitle: Text(_label(), style: Theme.of(context).textTheme.bodySmall),
|
||||||
child: Column(
|
trailing: Text(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Text(account.name,
|
|
||||||
style: Theme.of(context)
|
|
||||||
.textTheme
|
|
||||||
.bodyMedium
|
|
||||||
?.copyWith(fontWeight: FontWeight.w600)),
|
|
||||||
const SizedBox(height: 2),
|
|
||||||
Text(_label(), style: Theme.of(context).textTheme.bodySmall),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Text(
|
|
||||||
formatCurrency(account.balance),
|
formatCurrency(account.balance),
|
||||||
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||||
fontWeight: FontWeight.w700,
|
fontWeight: FontWeight.w700,
|
||||||
color: account.balance >= 0 ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.error,
|
color: account.balance >= 0 ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.error,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,20 +36,14 @@ class TransactionsScreen extends ConsumerWidget {
|
||||||
DateFormat('dd/MM/yy').format(t.date),
|
DateFormat('dd/MM/yy').format(t.date),
|
||||||
style: Theme.of(context).textTheme.bodySmall,
|
style: Theme.of(context).textTheme.bodySmall,
|
||||||
),
|
),
|
||||||
trailing: Column(
|
trailing: Text(
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.end,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
formatCurrency(t.amount),
|
formatCurrency(t.amount),
|
||||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||||
fontWeight: FontWeight.w600,
|
fontWeight: FontWeight.w600,
|
||||||
color: t.amount >= 0 ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.error,
|
color: t.amount >= 0 ? Theme.of(context).colorScheme.primary : Theme.of(context).colorScheme.error,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
), // ListTile
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue