first
This commit is contained in:
davmar
@@ -0,0 +1,142 @@
|
||||
/// Validated form that inserts a new [Item] into [ItemController].
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../models/item.dart';
|
||||
import '../providers/item_provider.dart';
|
||||
import '../widgets/app_text_field.dart';
|
||||
import '../widgets/responsive_body.dart';
|
||||
|
||||
class AddItemScreen extends StatefulWidget {
|
||||
const AddItemScreen({super.key});
|
||||
|
||||
@override
|
||||
State<AddItemScreen> createState() => _AddItemScreenState();
|
||||
}
|
||||
|
||||
class _AddItemScreenState extends State<AddItemScreen> {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
final _title = TextEditingController();
|
||||
final _subtitle = TextEditingController();
|
||||
final _description = TextEditingController();
|
||||
ItemCategory? _category;
|
||||
bool _submitted = false;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_title.dispose();
|
||||
_subtitle.dispose();
|
||||
_description.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
String? _requiredLength(String? value, {required int min, String? label}) {
|
||||
final text = value?.trim() ?? '';
|
||||
if (text.isEmpty) return 'Enter a ${label ?? 'value'}.';
|
||||
if (text.length < min) {
|
||||
return '${label ?? 'This field'} must be at least $min characters.';
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
void _submit() {
|
||||
setState(() => _submitted = true);
|
||||
final form = _formKey.currentState;
|
||||
if (form == null || !form.validate() || _category == null) return;
|
||||
|
||||
context.read<ItemController>().addItem(
|
||||
title: _title.text,
|
||||
subtitle: _subtitle.text,
|
||||
description: _description.text,
|
||||
category: _category!,
|
||||
);
|
||||
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('Added “${_title.text.trim()}”')),
|
||||
);
|
||||
Navigator.of(context).pop();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: const Text('Add item')),
|
||||
body: ResponsiveBody(
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
autovalidateMode: _submitted
|
||||
? AutovalidateMode.onUserInteraction
|
||||
: AutovalidateMode.disabled,
|
||||
child: ListView(
|
||||
children: [
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Create a catalog entry. All fields are required.',
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
AppTextField(
|
||||
controller: _title,
|
||||
label: 'Title',
|
||||
hint: 'Give it a short name',
|
||||
autofocus: true,
|
||||
textInputAction: TextInputAction.next,
|
||||
validator: (value) =>
|
||||
_requiredLength(value, min: 3, label: 'Title'),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
AppTextField(
|
||||
controller: _subtitle,
|
||||
label: 'Summary',
|
||||
hint: 'One sentence overview',
|
||||
textInputAction: TextInputAction.next,
|
||||
validator: (value) =>
|
||||
_requiredLength(value, min: 8, label: 'Summary'),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
DropdownButtonFormField<ItemCategory>(
|
||||
initialValue: _category,
|
||||
decoration: const InputDecoration(labelText: 'Category'),
|
||||
items: [
|
||||
for (final category in ItemCategory.values)
|
||||
DropdownMenuItem(
|
||||
value: category,
|
||||
child: Text(category.label),
|
||||
),
|
||||
],
|
||||
onChanged: (value) => setState(() => _category = value),
|
||||
validator: (value) =>
|
||||
value == null ? 'Choose a category.' : null,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
AppTextField(
|
||||
controller: _description,
|
||||
label: 'Description',
|
||||
hint: 'A longer note the detail screen will show',
|
||||
maxLines: 5,
|
||||
keyboardType: TextInputType.multiline,
|
||||
validator: (value) =>
|
||||
_requiredLength(value, min: 16, label: 'Description'),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
FilledButton(
|
||||
onPressed: _submit,
|
||||
child: const Text('Save item'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
OutlinedButton(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
/// Home tab: greeting, stats, and a [ListView.builder] of catalog items.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../providers/item_provider.dart';
|
||||
import '../widgets/empty_state.dart';
|
||||
import '../widgets/item_card.dart';
|
||||
import '../widgets/loading_view.dart';
|
||||
import '../widgets/responsive_body.dart';
|
||||
import 'add_item_screen.dart';
|
||||
|
||||
class HomeScreen extends StatelessWidget {
|
||||
const HomeScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final controller = context.watch<ItemController>();
|
||||
final theme = Theme.of(context);
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: const Text('Home')),
|
||||
floatingActionButton: FloatingActionButton.extended(
|
||||
onPressed: () {
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute<void>(builder: (_) => const AddItemScreen()),
|
||||
);
|
||||
},
|
||||
icon: const Icon(Icons.add),
|
||||
label: const Text('Add item'),
|
||||
),
|
||||
body: RefreshIndicator(
|
||||
onRefresh: controller.loadItems,
|
||||
child: ResponsiveBody(
|
||||
child: _HomeBody(controller: controller, theme: theme),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _HomeBody extends StatelessWidget {
|
||||
const _HomeBody({
|
||||
required this.controller,
|
||||
required this.theme,
|
||||
});
|
||||
|
||||
final ItemController controller;
|
||||
final ThemeData theme;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (controller.isLoading && controller.items.isEmpty) {
|
||||
return const LoadingView(message: 'Fetching catalog…');
|
||||
}
|
||||
|
||||
if (controller.error != null && controller.items.isEmpty) {
|
||||
return ListView(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
children: [
|
||||
EmptyState(
|
||||
icon: Icons.error_outline,
|
||||
title: 'Something went wrong',
|
||||
message: controller.error!,
|
||||
actionLabel: 'Retry',
|
||||
onAction: controller.loadItems,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
if (controller.items.isEmpty) {
|
||||
return ListView(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
children: const [
|
||||
EmptyState(
|
||||
icon: Icons.inbox_outlined,
|
||||
title: 'No items yet',
|
||||
message: 'Add your first item with the button below.',
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// Header occupies the first slot; remaining slots are catalog cards.
|
||||
return ListView.builder(
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
padding: const EdgeInsets.only(top: 8, bottom: 96),
|
||||
itemCount: controller.items.length + 1,
|
||||
itemBuilder: (context, index) {
|
||||
if (index == 0) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_WelcomeBanner(itemCount: controller.count),
|
||||
const SizedBox(height: 20),
|
||||
Text('Featured items', style: theme.textTheme.titleMedium),
|
||||
const SizedBox(height: 12),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
final item = controller.items[index - 1];
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 12),
|
||||
child: ItemCard(item: item, heroScope: 'home'),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _WelcomeBanner extends StatelessWidget {
|
||||
const _WelcomeBanner({required this.itemCount});
|
||||
|
||||
final int itemCount;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colors = theme.colorScheme;
|
||||
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
gradient: LinearGradient(
|
||||
colors: [colors.primary, colors.tertiary],
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: colors.primary.withValues(alpha: 0.28),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 10),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Welcome back',
|
||||
style: theme.textTheme.labelMedium?.copyWith(
|
||||
color: colors.onPrimary.withValues(alpha: 0.8),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'Your catalog at a glance',
|
||||
style: theme.textTheme.headlineMedium?.copyWith(
|
||||
color: colors.onPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Row(
|
||||
children: [
|
||||
_StatPill(
|
||||
label: 'Items',
|
||||
value: '$itemCount',
|
||||
icon: Icons.collections_bookmark_outlined,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
const _StatPill(
|
||||
label: 'Theme',
|
||||
value: 'M3',
|
||||
icon: Icons.palette_outlined,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _StatPill extends StatelessWidget {
|
||||
const _StatPill({
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.icon,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final String value;
|
||||
final IconData icon;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final onPrimary = Theme.of(context).colorScheme.onPrimary;
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
color: onPrimary.withValues(alpha: 0.14),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(icon, size: 16, color: onPrimary),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'$value $label',
|
||||
style: Theme.of(context).textTheme.labelMedium?.copyWith(
|
||||
color: onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
/// Detail route opened from a list card, with a [Hero] matching the list badge.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../models/item.dart';
|
||||
import '../utils/helpers.dart';
|
||||
import '../widgets/item_hero_badge.dart';
|
||||
import '../widgets/responsive_body.dart';
|
||||
|
||||
class ItemDetailScreen extends StatelessWidget {
|
||||
const ItemDetailScreen({
|
||||
super.key,
|
||||
required this.item,
|
||||
required this.heroTag,
|
||||
});
|
||||
|
||||
final Item item;
|
||||
final String heroTag;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colors = theme.colorScheme;
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: const Text('Details')),
|
||||
body: ResponsiveBody(
|
||||
child: ListView(
|
||||
children: [
|
||||
const SizedBox(height: 16),
|
||||
Center(
|
||||
child: ItemHeroBadge(item: item, size: 96, heroTag: heroTag),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Text(item.title, style: theme.textTheme.headlineMedium),
|
||||
const SizedBox(height: 12),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
Chip(
|
||||
avatar: Icon(
|
||||
item.category.icon,
|
||||
size: 16,
|
||||
color: item.category.accent,
|
||||
),
|
||||
label: Text(item.category.label),
|
||||
side: BorderSide(
|
||||
color: item.category.accent.withValues(alpha: 0.4),
|
||||
),
|
||||
),
|
||||
Chip(
|
||||
avatar: Icon(
|
||||
Icons.calendar_today_outlined,
|
||||
size: 16,
|
||||
color: colors.onSurfaceVariant,
|
||||
),
|
||||
label: Text(formatDate(item.createdAt)),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
Text('Summary', style: theme.textTheme.titleMedium),
|
||||
const SizedBox(height: 8),
|
||||
Text(item.subtitle, style: theme.textTheme.bodyLarge),
|
||||
const SizedBox(height: 20),
|
||||
Text('Description', style: theme.textTheme.titleMedium),
|
||||
const SizedBox(height: 8),
|
||||
Text(item.description, style: theme.textTheme.bodyLarge),
|
||||
const SizedBox(height: 32),
|
||||
FilledButton.tonal(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
child: const Text('Back to list'),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
/// Host scaffold that owns the bottom navigation bar and its four tabs.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'home_screen.dart';
|
||||
import 'profile_screen.dart';
|
||||
import 'search_screen.dart';
|
||||
import 'settings_screen.dart';
|
||||
|
||||
/// Switches between Home, Search, Profile, and Settings without stacking routes.
|
||||
class MainShell extends StatefulWidget {
|
||||
const MainShell({super.key});
|
||||
|
||||
@override
|
||||
State<MainShell> createState() => _MainShellState();
|
||||
}
|
||||
|
||||
class _MainShellState extends State<MainShell> {
|
||||
int _index = 0;
|
||||
|
||||
static const _pages = [
|
||||
HomeScreen(),
|
||||
SearchScreen(),
|
||||
ProfileScreen(),
|
||||
SettingsScreen(),
|
||||
];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: IndexedStack(
|
||||
index: _index,
|
||||
children: _pages,
|
||||
),
|
||||
bottomNavigationBar: NavigationBar(
|
||||
selectedIndex: _index,
|
||||
onDestinationSelected: (index) => setState(() => _index = index),
|
||||
destinations: const [
|
||||
NavigationDestination(
|
||||
icon: Icon(Icons.home_outlined),
|
||||
selectedIcon: Icon(Icons.home),
|
||||
label: 'Home',
|
||||
),
|
||||
NavigationDestination(
|
||||
icon: Icon(Icons.search_outlined),
|
||||
selectedIcon: Icon(Icons.search),
|
||||
label: 'Search',
|
||||
),
|
||||
NavigationDestination(
|
||||
icon: Icon(Icons.person_outline),
|
||||
selectedIcon: Icon(Icons.person),
|
||||
label: 'Profile',
|
||||
),
|
||||
NavigationDestination(
|
||||
icon: Icon(Icons.settings_outlined),
|
||||
selectedIcon: Icon(Icons.settings),
|
||||
label: 'Settings',
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
/// Profile tab: avatar, stats, and a shortcut to the add-item form.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../providers/item_provider.dart';
|
||||
import '../providers/theme_provider.dart';
|
||||
import '../utils/constants.dart';
|
||||
import '../utils/helpers.dart';
|
||||
import '../widgets/responsive_body.dart';
|
||||
import 'add_item_screen.dart';
|
||||
|
||||
class ProfileScreen extends StatelessWidget {
|
||||
const ProfileScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final items = context.watch<ItemController>();
|
||||
final themeController = context.watch<ThemeController>();
|
||||
final theme = Theme.of(context);
|
||||
final colors = theme.colorScheme;
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: const Text('Profile')),
|
||||
body: ResponsiveBody(
|
||||
child: ListView(
|
||||
children: [
|
||||
const SizedBox(height: 12),
|
||||
Center(
|
||||
child: CircleAvatar(
|
||||
radius: 44,
|
||||
backgroundColor: colors.primaryContainer,
|
||||
child: Icon(
|
||||
Icons.person,
|
||||
size: 44,
|
||||
color: colors.onPrimaryContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Alex Rivera',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'[email protected]',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _ProfileStat(
|
||||
label: 'Items',
|
||||
value: '${items.count}',
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: _ProfileStat(
|
||||
label: 'Theme',
|
||||
value: labelForThemeMode(themeController.themeMode),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: _ProfileStat(
|
||||
label: 'Source',
|
||||
value: items.useRemoteData ? 'Remote' : 'Local',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Card(
|
||||
child: Column(
|
||||
children: [
|
||||
ListTile(
|
||||
leading: const Icon(Icons.add_box_outlined),
|
||||
title: const Text('Add a catalog item'),
|
||||
subtitle: const Text('Validated form with category picker'),
|
||||
trailing: const Icon(Icons.chevron_right),
|
||||
onTap: () {
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute<void>(
|
||||
builder: (_) => const AddItemScreen(),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
const Divider(height: 1),
|
||||
const ListTile(
|
||||
leading: Icon(Icons.info_outline),
|
||||
title: Text('About'),
|
||||
subtitle: Text('$kAppName · $kPackageName'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ProfileStat extends StatelessWidget {
|
||||
const _ProfileStat({required this.label, required this.value});
|
||||
|
||||
final String label;
|
||||
final String value;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.surfaceContainerLow,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: theme.shadowColor.withValues(alpha: 0.06),
|
||||
blurRadius: 12,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Text(value, style: theme.textTheme.titleLarge),
|
||||
const SizedBox(height: 4),
|
||||
Text(label, style: theme.textTheme.labelMedium),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
/// Search tab: query field plus a [ListView.builder] of matching items.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../models/item.dart';
|
||||
import '../providers/item_provider.dart';
|
||||
import '../widgets/empty_state.dart';
|
||||
import '../widgets/item_card.dart';
|
||||
import '../widgets/responsive_body.dart';
|
||||
|
||||
class SearchScreen extends StatefulWidget {
|
||||
const SearchScreen({super.key});
|
||||
|
||||
@override
|
||||
State<SearchScreen> createState() => _SearchScreenState();
|
||||
}
|
||||
|
||||
class _SearchScreenState extends State<SearchScreen> {
|
||||
final _query = TextEditingController();
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_query.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final results = context.watch<ItemController>().search(_query.text);
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: const Text('Search')),
|
||||
body: ResponsiveBody(
|
||||
child: Column(
|
||||
children: [
|
||||
const SizedBox(height: 8),
|
||||
TextField(
|
||||
controller: _query,
|
||||
textInputAction: TextInputAction.search,
|
||||
onChanged: (_) => setState(() {}),
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Title, summary, or category',
|
||||
prefixIcon: const Icon(Icons.search),
|
||||
suffixIcon: _query.text.isEmpty
|
||||
? null
|
||||
: IconButton(
|
||||
tooltip: 'Clear',
|
||||
onPressed: () {
|
||||
_query.clear();
|
||||
setState(() {});
|
||||
},
|
||||
icon: const Icon(Icons.close),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
'${results.length} result${results.length == 1 ? '' : 's'}',
|
||||
style: Theme.of(context).textTheme.labelMedium,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Expanded(child: _ResultsList(results: results, query: _query.text)),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ResultsList extends StatelessWidget {
|
||||
const _ResultsList({required this.results, required this.query});
|
||||
|
||||
final List<Item> results;
|
||||
final String query;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (results.isEmpty) {
|
||||
return EmptyState(
|
||||
icon: Icons.search_off,
|
||||
title: query.trim().isEmpty ? 'Start typing' : 'No matches',
|
||||
message: query.trim().isEmpty
|
||||
? 'Search the catalog by title, summary, or category.'
|
||||
: 'Try a different keyword.',
|
||||
);
|
||||
}
|
||||
|
||||
return ListView.builder(
|
||||
padding: const EdgeInsets.only(bottom: 24),
|
||||
itemCount: results.length,
|
||||
itemBuilder: (context, index) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 12),
|
||||
child: ItemCard(item: results[index], heroScope: 'search'),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
/// Settings tab: theme mode, data source, and about information.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../providers/item_provider.dart';
|
||||
import '../providers/theme_provider.dart';
|
||||
import '../utils/constants.dart';
|
||||
import '../utils/helpers.dart';
|
||||
import '../widgets/responsive_body.dart';
|
||||
|
||||
class SettingsScreen extends StatelessWidget {
|
||||
const SettingsScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final themeController = context.watch<ThemeController>();
|
||||
final items = context.watch<ItemController>();
|
||||
final theme = Theme.of(context);
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: const Text('Settings')),
|
||||
body: ResponsiveBody(
|
||||
child: ListView(
|
||||
children: [
|
||||
const SizedBox(height: 8),
|
||||
Text('Appearance', style: theme.textTheme.titleMedium),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Theme is saved with shared_preferences and restored on launch.',
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
SegmentedButton<ThemeMode>(
|
||||
segments: const [
|
||||
ButtonSegment(
|
||||
value: ThemeMode.system,
|
||||
label: Text('System'),
|
||||
icon: Icon(Icons.brightness_auto),
|
||||
),
|
||||
ButtonSegment(
|
||||
value: ThemeMode.light,
|
||||
label: Text('Light'),
|
||||
icon: Icon(Icons.light_mode_outlined),
|
||||
),
|
||||
ButtonSegment(
|
||||
value: ThemeMode.dark,
|
||||
label: Text('Dark'),
|
||||
icon: Icon(Icons.dark_mode_outlined),
|
||||
),
|
||||
],
|
||||
selected: {themeController.themeMode},
|
||||
onSelectionChanged: (selection) {
|
||||
themeController.setThemeMode(selection.first);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 28),
|
||||
Text('Data', style: theme.textTheme.titleMedium),
|
||||
const SizedBox(height: 8),
|
||||
Card(
|
||||
child: SwitchListTile(
|
||||
title: const Text('Use remote sample API'),
|
||||
subtitle: const Text(
|
||||
'When on, items are fetched with the http package from '
|
||||
'JSONPlaceholder. Failures fall back to local mock data.',
|
||||
),
|
||||
value: items.useRemoteData,
|
||||
onChanged: (value) => items.setUseRemoteData(value),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 28),
|
||||
Text('About', style: theme.textTheme.titleMedium),
|
||||
const SizedBox(height: 8),
|
||||
Card(
|
||||
child: Column(
|
||||
children: [
|
||||
const ListTile(
|
||||
leading: Icon(Icons.apps),
|
||||
title: Text(kAppName),
|
||||
subtitle: Text('Generic Flutter Android starter'),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
const ListTile(
|
||||
leading: Icon(Icons.fingerprint),
|
||||
title: Text('Package'),
|
||||
subtitle: Text(kPackageName),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
ListTile(
|
||||
leading: const Icon(Icons.contrast),
|
||||
title: const Text('Active theme'),
|
||||
subtitle: Text(labelForThemeMode(themeController.themeMode)),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
/// First route shown after launch. Hands off to [MainShell] after a short delay.
|
||||
library;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../utils/constants.dart';
|
||||
import 'main_shell.dart';
|
||||
|
||||
/// Branded splash with a fade-in logo. Replaced by the bottom-nav shell.
|
||||
class SplashScreen extends StatefulWidget {
|
||||
const SplashScreen({super.key});
|
||||
|
||||
@override
|
||||
State<SplashScreen> createState() => _SplashScreenState();
|
||||
}
|
||||
|
||||
class _SplashScreenState extends State<SplashScreen>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late final AnimationController _controller;
|
||||
late final Animation<double> _fade;
|
||||
late final Animation<double> _scale;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 700),
|
||||
);
|
||||
_fade = CurvedAnimation(parent: _controller, curve: Curves.easeOut);
|
||||
_scale = Tween<double>(begin: 0.92, end: 1).animate(
|
||||
CurvedAnimation(parent: _controller, curve: Curves.easeOutBack),
|
||||
);
|
||||
_controller.forward();
|
||||
_goToShell();
|
||||
}
|
||||
|
||||
Future<void> _goToShell() async {
|
||||
await Future<void>.delayed(kSplashDuration);
|
||||
if (!mounted) return;
|
||||
Navigator.of(context).pushReplacement(
|
||||
PageRouteBuilder<void>(
|
||||
pageBuilder: (_, animation, _) => FadeTransition(
|
||||
opacity: animation,
|
||||
child: const MainShell(),
|
||||
),
|
||||
transitionDuration: const Duration(milliseconds: 400),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = Theme.of(context).colorScheme;
|
||||
final textTheme = Theme.of(context).textTheme;
|
||||
|
||||
return Scaffold(
|
||||
body: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
colors.primary,
|
||||
colors.primaryContainer,
|
||||
colors.tertiary,
|
||||
],
|
||||
),
|
||||
),
|
||||
child: SafeArea(
|
||||
child: FadeTransition(
|
||||
opacity: _fade,
|
||||
child: ScaleTransition(
|
||||
scale: _scale,
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: 88,
|
||||
height: 88,
|
||||
decoration: BoxDecoration(
|
||||
color: colors.onPrimary.withValues(alpha: 0.16),
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
),
|
||||
child: Icon(
|
||||
Icons.layers_rounded,
|
||||
size: 44,
|
||||
color: colors.onPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Text(
|
||||
kAppName,
|
||||
style: textTheme.displaySmall?.copyWith(
|
||||
color: colors.onPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'A Material 3 starter template',
|
||||
style: textTheme.bodyLarge?.copyWith(
|
||||
color: colors.onPrimary.withValues(alpha: 0.85),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 40),
|
||||
SizedBox(
|
||||
width: 28,
|
||||
height: 28,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 3,
|
||||
color: colors.onPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user