feat(#17): responsive settings shell + intent categories + path-hash
Replace the monolithic card+dialog settings screen with a responsive master-detail shell (rail+pane when wide, list+push when narrow; layout chosen by width via LayoutBuilder). Regroup the existing settings into intent categories and surface Path Hash Size (1/2/3-byte) in Radio and range, the first device-config-parity gap (previously repeater/CLI-only). No settings lost: every existing control stays reachable. Phase 0 of #7. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>pull/20/head
Strycher
1 month ago
parent
54d3ee4856
commit
7d0080f2cd
@ -0,0 +1,145 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// One entry in the responsive settings shell: an icon, a title, an optional
|
||||
/// subtitle, and a builder for the category's detail pane.
|
||||
class SettingsCategory {
|
||||
final IconData icon;
|
||||
final String title;
|
||||
final String? subtitle;
|
||||
final WidgetBuilder builder;
|
||||
|
||||
const SettingsCategory({
|
||||
required this.icon,
|
||||
required this.title,
|
||||
this.subtitle,
|
||||
required this.builder,
|
||||
});
|
||||
}
|
||||
|
||||
/// Responsive master-detail container for settings.
|
||||
///
|
||||
/// Wide layouts (>= [_wideBreakpoint] logical pixels) show a pinned category
|
||||
/// rail beside the selected detail pane. Narrow layouts show the category list
|
||||
/// and push the detail onto the navigator. Same categories, same code, every
|
||||
/// platform — the layout is chosen from the available width, not the OS.
|
||||
class SettingsShell extends StatefulWidget {
|
||||
final String title;
|
||||
final List<SettingsCategory> categories;
|
||||
final PreferredSizeWidget? appBarBottom;
|
||||
|
||||
const SettingsShell({
|
||||
super.key,
|
||||
required this.title,
|
||||
required this.categories,
|
||||
this.appBarBottom,
|
||||
});
|
||||
|
||||
@override
|
||||
State<SettingsShell> createState() => _SettingsShellState();
|
||||
}
|
||||
|
||||
class _SettingsShellState extends State<SettingsShell> {
|
||||
static const double _wideBreakpoint = 720;
|
||||
static const double _railWidth = 280;
|
||||
|
||||
int _selected = 0;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
return constraints.maxWidth >= _wideBreakpoint
|
||||
? _buildWide(context)
|
||||
: _buildNarrow(context);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
PreferredSizeWidget _appBar(String title) {
|
||||
return AppBar(
|
||||
title: Text(title),
|
||||
centerTitle: true,
|
||||
bottom: widget.appBarBottom,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildWide(BuildContext context) {
|
||||
final categories = widget.categories;
|
||||
final selected = _selected.clamp(0, categories.length - 1);
|
||||
return Scaffold(
|
||||
appBar: _appBar(widget.title),
|
||||
body: SafeArea(
|
||||
top: false,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: _railWidth,
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
itemCount: categories.length,
|
||||
itemBuilder: (context, i) {
|
||||
final category = categories[i];
|
||||
return ListTile(
|
||||
leading: Icon(category.icon),
|
||||
title: Text(category.title),
|
||||
selected: i == selected,
|
||||
selectedTileColor:
|
||||
Theme.of(context).colorScheme.surfaceContainerHighest,
|
||||
onTap: () => setState(() => _selected = i),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
const VerticalDivider(width: 1),
|
||||
Expanded(
|
||||
child: KeyedSubtree(
|
||||
key: ValueKey<int>(selected),
|
||||
child: categories[selected].builder(context),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildNarrow(BuildContext context) {
|
||||
final categories = widget.categories;
|
||||
return Scaffold(
|
||||
appBar: _appBar(widget.title),
|
||||
body: SafeArea(
|
||||
top: false,
|
||||
child: ListView.builder(
|
||||
itemCount: categories.length,
|
||||
itemBuilder: (context, i) {
|
||||
final category = categories[i];
|
||||
return ListTile(
|
||||
leading: Icon(category.icon),
|
||||
title: Text(category.title),
|
||||
subtitle:
|
||||
category.subtitle != null ? Text(category.subtitle!) : null,
|
||||
trailing: const Icon(Icons.chevron_right),
|
||||
onTap: () => _openDetail(context, category),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _openDetail(BuildContext context, SettingsCategory category) {
|
||||
Navigator.of(context).push(
|
||||
MaterialPageRoute(
|
||||
builder: (context) => Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(category.title),
|
||||
centerTitle: true,
|
||||
bottom: widget.appBarBottom,
|
||||
),
|
||||
body: SafeArea(top: false, child: category.builder(context)),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue