From 8f2340bc6129fdf0613a5ccbb4e1b0942c7edf81 Mon Sep 17 00:00:00 2001 From: Reboot-Codes Date: Sat, 23 May 2026 23:12:02 -0700 Subject: [PATCH] Scaffold out Spanner properly. --- .../configurator/components/shell.dart | 134 ++++++++++++++++++ .../configurator/screens/apps/apps_list.dart | 10 ++ .../screens/gestures/quick_settings.dart | 10 ++ .../screens/modules/overview.dart | 10 ++ .../configurator/screens/overview.dart | 10 ++ .../configurator/screens/repos/repo_list.dart | 10 ++ .../features/settings/screens/categories.dart | 74 ++++++++++ .../lib/features/welcome/screens/landing.dart | 32 +++++ .../lib/features/wizard/components/shell.dart | 16 +++ .../features/wizard/screens/from_scratch.dart | 10 ++ .../features/wizard/screens/get_started.dart | 10 ++ toolbox/spanner/lib/main.dart | 87 +----------- toolbox/spanner/lib/router.dart | 86 +++++++++++ toolbox/spanner/pubspec.lock | 23 ++- toolbox/spanner/pubspec.yaml | 1 + 15 files changed, 438 insertions(+), 85 deletions(-) create mode 100644 toolbox/spanner/lib/features/configurator/components/shell.dart create mode 100644 toolbox/spanner/lib/features/configurator/screens/apps/apps_list.dart create mode 100644 toolbox/spanner/lib/features/configurator/screens/gestures/quick_settings.dart create mode 100644 toolbox/spanner/lib/features/configurator/screens/modules/overview.dart create mode 100644 toolbox/spanner/lib/features/configurator/screens/overview.dart create mode 100644 toolbox/spanner/lib/features/configurator/screens/repos/repo_list.dart create mode 100644 toolbox/spanner/lib/features/settings/screens/categories.dart create mode 100644 toolbox/spanner/lib/features/welcome/screens/landing.dart create mode 100644 toolbox/spanner/lib/features/wizard/components/shell.dart create mode 100644 toolbox/spanner/lib/features/wizard/screens/from_scratch.dart create mode 100644 toolbox/spanner/lib/features/wizard/screens/get_started.dart create mode 100644 toolbox/spanner/lib/router.dart diff --git a/toolbox/spanner/lib/features/configurator/components/shell.dart b/toolbox/spanner/lib/features/configurator/components/shell.dart new file mode 100644 index 0000000..6e562fe --- /dev/null +++ b/toolbox/spanner/lib/features/configurator/components/shell.dart @@ -0,0 +1,134 @@ +import 'package:flutter/material.dart'; +import 'package:go_router/go_router.dart'; + +class NavDestinationConfig { + final String id; // Unique identifier for reordering/keys + final String label; // Text shown below the icon + final String routePath; // The router path (base) target + final IconData icon; // Default outlined icon + final IconData selectedIcon; // Filled icon when active + + const NavDestinationConfig({ + required this.id, + required this.label, + required this.routePath, + required this.icon, + required this.selectedIcon, + }); +} + +// Your default layout ordering blueprint +const List defaultNavDestinations = [ + NavDestinationConfig( + id: 'overview', + label: 'Overview', + routePath: '/configurator', + icon: Icons.settings_outlined, + selectedIcon: Icons.settings, + ), + NavDestinationConfig( + id: 'modules', + label: 'Modules', + routePath: '/configurator/modules', + icon: Icons.extension_outlined, + selectedIcon: Icons.extension, + ), + NavDestinationConfig( + id: 'gestures', + label: 'Gestures', + routePath: '/configurator/gestures', + icon: Icons.gesture_outlined, + selectedIcon: Icons.gesture, + ), + NavDestinationConfig( + id: 'apps', + label: 'Apps', + routePath: '/configurator/apps', + icon: Icons.code_outlined, + selectedIcon: Icons.code, + ), + NavDestinationConfig( + id: 'repos', + label: 'Repos', + routePath: '/configurator/repos', + icon: Icons.cloud_outlined, + selectedIcon: Icons.cloud, + ), +]; + +class ConfiguratorShell extends StatelessWidget { + final StatefulNavigationShell navigationShell; + // TODO: Store the order of navbar destinations in settings + final List activeDestinations = defaultNavDestinations; + + const ConfiguratorShell({super.key, required this.navigationShell}); + + void _onTabSelected(int index) { + navigationShell.goBranch( + index, + initialLocation: index == navigationShell.currentIndex, + ); + } + + @override + Widget build(BuildContext context) { + final int selectedIndex = navigationShell.currentIndex; + + return LayoutBuilder( + builder: (context, constraints) { + final bool isSmall = constraints.maxWidth < 600; + + return Scaffold( + appBar: AppBar( + title: Text("Spanner"), + actions: [ + Container( + padding: EdgeInsetsGeometry.only(right: 6.0), + child: IconButton( + icon: Icon(Icons.settings_outlined), + onPressed: () { + context.push("/settings"); + }, + ), + ), + ], + ), + bottomNavigationBar: isSmall + ? NavigationBar( + selectedIndex: selectedIndex, + onDestinationSelected: _onTabSelected, + destinations: activeDestinations.map((dest) { + return NavigationDestination( + icon: Icon(dest.icon), + selectedIcon: Icon(dest.selectedIcon), + label: dest.label, + ); + }).toList(), + ) + : null, + + body: Row( + children: [ + if (!isSmall) ...[ + NavigationRail( + selectedIndex: selectedIndex, + onDestinationSelected: _onTabSelected, + labelType: NavigationRailLabelType.all, + destinations: activeDestinations.map((dest) { + return NavigationRailDestination( + icon: Icon(dest.icon), + selectedIcon: Icon(dest.selectedIcon), + label: Text(dest.label), + ); + }).toList(), + ), + ], + + Expanded(child: navigationShell), + ], + ), + ); + }, + ); + } +} diff --git a/toolbox/spanner/lib/features/configurator/screens/apps/apps_list.dart b/toolbox/spanner/lib/features/configurator/screens/apps/apps_list.dart new file mode 100644 index 0000000..29a5b0f --- /dev/null +++ b/toolbox/spanner/lib/features/configurator/screens/apps/apps_list.dart @@ -0,0 +1,10 @@ +import 'package:flutter/material.dart'; + +class AppsList extends StatelessWidget { + const AppsList({super.key}); + + @override + Widget build(BuildContext context) { + return Text("Apps List"); + } +} diff --git a/toolbox/spanner/lib/features/configurator/screens/gestures/quick_settings.dart b/toolbox/spanner/lib/features/configurator/screens/gestures/quick_settings.dart new file mode 100644 index 0000000..71e6eb9 --- /dev/null +++ b/toolbox/spanner/lib/features/configurator/screens/gestures/quick_settings.dart @@ -0,0 +1,10 @@ +import 'package:flutter/material.dart'; + +class GestureQuickSettings extends StatelessWidget { + const GestureQuickSettings({super.key}); + + @override + Widget build(BuildContext context) { + return Text("Gesture Quick Settings"); + } +} diff --git a/toolbox/spanner/lib/features/configurator/screens/modules/overview.dart b/toolbox/spanner/lib/features/configurator/screens/modules/overview.dart new file mode 100644 index 0000000..0023b12 --- /dev/null +++ b/toolbox/spanner/lib/features/configurator/screens/modules/overview.dart @@ -0,0 +1,10 @@ +import 'package:flutter/material.dart'; + +class ModulesOverview extends StatelessWidget { + const ModulesOverview({super.key}); + + @override + Widget build(BuildContext context) { + return Text("Modules Overview"); + } +} diff --git a/toolbox/spanner/lib/features/configurator/screens/overview.dart b/toolbox/spanner/lib/features/configurator/screens/overview.dart new file mode 100644 index 0000000..b1d7570 --- /dev/null +++ b/toolbox/spanner/lib/features/configurator/screens/overview.dart @@ -0,0 +1,10 @@ +import 'package:flutter/material.dart'; + +class ConfiguratorOverview extends StatelessWidget { + const ConfiguratorOverview({super.key}); + + @override + Widget build(BuildContext context) { + return Text("Overview"); + } +} diff --git a/toolbox/spanner/lib/features/configurator/screens/repos/repo_list.dart b/toolbox/spanner/lib/features/configurator/screens/repos/repo_list.dart new file mode 100644 index 0000000..3868769 --- /dev/null +++ b/toolbox/spanner/lib/features/configurator/screens/repos/repo_list.dart @@ -0,0 +1,10 @@ +import 'package:flutter/material.dart'; + +class RepoList extends StatelessWidget { + const RepoList({super.key}); + + @override + Widget build(BuildContext context) { + return Text("Repo List"); + } +} diff --git a/toolbox/spanner/lib/features/settings/screens/categories.dart b/toolbox/spanner/lib/features/settings/screens/categories.dart new file mode 100644 index 0000000..1bf69ea --- /dev/null +++ b/toolbox/spanner/lib/features/settings/screens/categories.dart @@ -0,0 +1,74 @@ +import 'package:flutter/material.dart'; +import 'package:go_router/go_router.dart'; + +class SettingCategory { + final String id; + final String name; + final Icon icon; + final String description; + + const SettingCategory({ + required this.id, + required this.name, + required this.icon, + required this.description, + }); +} + +const List settingsCategories = [ + SettingCategory( + id: "connection", + name: "Connection", + icon: Icon(Icons.wifi), + description: "Manage connections to C.L.O.V.E.R. instances", + ), +]; + +class SettingsCategories extends StatelessWidget { + const SettingsCategories({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + leading: IconButton( + icon: Icon(Icons.arrow_back), + onPressed: () { + context.pop(); + }, + ), + title: Text("Settings"), + ), + body: Container( + padding: EdgeInsets.all(16.0), + child: Column( + children: [ + TextField( + decoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'Search', + icon: Icon(Icons.search), + ), + ), + Expanded( + child: Container( + padding: EdgeInsets.only(top: 8.0), + child: ListView.builder( + itemCount: settingsCategories.length, + itemBuilder: (context, index) { + final category = settingsCategories[index]; + return ListTile( + leading: category.icon, + title: Text(category.name), + subtitle: Text(category.description), + ); + }, + ), + ), + ), + ], + ), + ), + ); + } +} diff --git a/toolbox/spanner/lib/features/welcome/screens/landing.dart b/toolbox/spanner/lib/features/welcome/screens/landing.dart new file mode 100644 index 0000000..a437ca3 --- /dev/null +++ b/toolbox/spanner/lib/features/welcome/screens/landing.dart @@ -0,0 +1,32 @@ +import 'package:flutter/material.dart'; +import 'package:go_router/go_router.dart'; + +class LandingPage extends StatelessWidget { + const LandingPage({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: Text("Spanner")), + body: Column( + children: [ + Text("Welcome to Spanner!"), + TextButton( + child: Text("Connect to an Existing Instance"), + onPressed: () { + context.go("/configurator"); + }, + ), + // TODO: Fix Dividers + Row(children: [Divider(), Text("OR"), Divider()]), + TextButton( + child: Text("Try the config wizard!"), + onPressed: () { + context.go("/wizard"); + }, + ), + ], + ), + ); + } +} diff --git a/toolbox/spanner/lib/features/wizard/components/shell.dart b/toolbox/spanner/lib/features/wizard/components/shell.dart new file mode 100644 index 0000000..6d69a5a --- /dev/null +++ b/toolbox/spanner/lib/features/wizard/components/shell.dart @@ -0,0 +1,16 @@ +import 'package:flutter/material.dart'; + +class WizardShell extends StatelessWidget { + final Widget child; + + const WizardShell({super.key, required this.child}); + + @override + Widget build(BuildContext context) { + return Scaffold( + // TODO: Add progress bar. + appBar: AppBar(title: Text("Setup Wizard")), + body: child, + ); + } +} diff --git a/toolbox/spanner/lib/features/wizard/screens/from_scratch.dart b/toolbox/spanner/lib/features/wizard/screens/from_scratch.dart new file mode 100644 index 0000000..f25bdc6 --- /dev/null +++ b/toolbox/spanner/lib/features/wizard/screens/from_scratch.dart @@ -0,0 +1,10 @@ +import 'package:flutter/material.dart'; + +class WizardFromScratch extends StatelessWidget { + const WizardFromScratch({super.key}); + + @override + Widget build(BuildContext context) { + return Text("From Scratch."); + } +} diff --git a/toolbox/spanner/lib/features/wizard/screens/get_started.dart b/toolbox/spanner/lib/features/wizard/screens/get_started.dart new file mode 100644 index 0000000..23a7fd9 --- /dev/null +++ b/toolbox/spanner/lib/features/wizard/screens/get_started.dart @@ -0,0 +1,10 @@ +import 'package:flutter/material.dart'; + +class WizardGetStarted extends StatelessWidget { + const WizardGetStarted({super.key}); + + @override + Widget build(BuildContext context) { + return Text("Get Started with C.L.O.V.E.R.!"); + } +} diff --git a/toolbox/spanner/lib/main.dart b/toolbox/spanner/lib/main.dart index 4e8dadd..7ca91b6 100644 --- a/toolbox/spanner/lib/main.dart +++ b/toolbox/spanner/lib/main.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'router.dart'; void main() { runApp(const MyApp()); @@ -10,7 +11,8 @@ class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { - return MaterialApp( + return MaterialApp.router( + routerConfig: router, title: 'Spanner', theme: ThemeData( brightness: Brightness.light, @@ -23,89 +25,6 @@ class MyApp extends StatelessWidget { useMaterial3: true, ), themeMode: ThemeMode.system, - home: const MyHomePage(title: 'Spanner'), - ); - } -} - -class MyHomePage extends StatefulWidget { - const MyHomePage({super.key, required this.title}); - - // This widget is the home page of your application. It is stateful, meaning - // that it has a State object (defined below) that contains fields that affect - // how it looks. - - // This class is the configuration for the state. It holds the values (in this - // case the title) provided by the parent (in this case the App widget) and - // used by the build method of the State. Fields in a Widget subclass are - // always marked "final". - - final String title; - - @override - State createState() => _MyHomePageState(); -} - -class _MyHomePageState extends State { - int _counter = 0; - - void _incrementCounter() { - setState(() { - // This call to setState tells the Flutter framework that something has - // changed in this State, which causes it to rerun the build method below - // so that the display can reflect the updated values. If we changed - // _counter without calling setState(), then the build method would not be - // called again, and so nothing would appear to happen. - _counter++; - }); - } - - @override - Widget build(BuildContext context) { - // This method is rerun every time setState is called, for instance as done - // by the _incrementCounter method above. - // - // The Flutter framework has been optimized to make rerunning build methods - // fast, so that you can just rebuild anything that needs updating rather - // than having to individually change instances of widgets. - return Scaffold( - appBar: AppBar( - // Here we take the value from the MyHomePage object that was created by - // the App.build method, and use it to set our appbar title. - title: Text(widget.title), - ), - body: Center( - // Center is a layout widget. It takes a single child and positions it - // in the middle of the parent. - child: Column( - // Column is also a layout widget. It takes a list of children and - // arranges them vertically. By default, it sizes itself to fit its - // children horizontally, and tries to be as tall as its parent. - // - // Column has various properties to control how it sizes itself and - // how it positions its children. Here we use mainAxisAlignment to - // center the children vertically; the main axis here is the vertical - // axis because Columns are vertical (the cross axis would be - // horizontal). - // - // TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint" - // action in the IDE, or press "p" in the console), to see the - // wireframe for each widget. - mainAxisAlignment: .center, - children: [ - const Text('You have pushed the button this many times:'), - Text( - '$_counter', - style: Theme.of(context).textTheme.headlineMedium, - ), - ], - ), - ), - floatingActionButton: FloatingActionButton( - onPressed: _incrementCounter, - tooltip: 'Increment', - child: const Icon(Icons.add), - ), ); } } diff --git a/toolbox/spanner/lib/router.dart b/toolbox/spanner/lib/router.dart new file mode 100644 index 0000000..4ce3d82 --- /dev/null +++ b/toolbox/spanner/lib/router.dart @@ -0,0 +1,86 @@ +import 'package:go_router/go_router.dart'; + +import 'package:spanner/features/welcome/screens/landing.dart'; + +import 'package:spanner/features/settings/screens/categories.dart'; + +import 'features/configurator/components/shell.dart'; +import 'features/configurator/screens/overview.dart'; +import 'features/configurator/screens/modules/overview.dart'; +import 'features/configurator/screens/gestures/quick_settings.dart'; +import 'features/configurator/screens/apps/apps_list.dart'; +import 'features/configurator/screens/repos/repo_list.dart'; + +import 'features/wizard/components/shell.dart'; +import 'features/wizard/screens/get_started.dart'; + +// GoRouter configuration +final router = GoRouter( + initialLocation: '/', + routes: [ + StatefulShellRoute.indexedStack( + builder: (context, state, navigationShell) { + return ConfiguratorShell(navigationShell: navigationShell); + }, + branches: [ + StatefulShellBranch( + routes: [ + GoRoute( + path: '/configurator', + builder: (context, state) => const ConfiguratorOverview(), + ), + ], + ), + StatefulShellBranch( + routes: [ + GoRoute( + path: '/configurator/modules', + builder: (context, state) => const ModulesOverview(), + ), + ], + ), + StatefulShellBranch( + routes: [ + GoRoute( + path: '/configurator/gestures', + builder: (context, state) => const GestureQuickSettings(), + ), + ], + ), + StatefulShellBranch( + routes: [ + GoRoute( + path: '/configurator/apps', + builder: (context, state) => const AppsList(), + ), + ], + ), + StatefulShellBranch( + routes: [ + GoRoute( + path: '/configurator/repos', + builder: (context, state) => const RepoList(), + ), + ], + ), + ], + ), + ShellRoute( + builder: (context, state, child) { + return WizardShell(child: child); + }, + routes: [ + GoRoute( + path: "/wizard", + builder: (context, state) => const WizardGetStarted(), + ), + ], + ), + // TODO: Move to ShellRoute for desktop/tablet optimization + GoRoute( + path: "/settings", + builder: (context, state) => const SettingsCategories(), + ), + GoRoute(path: "/", builder: (context, state) => const LandingPage()), + ], +); diff --git a/toolbox/spanner/pubspec.lock b/toolbox/spanner/pubspec.lock index d051cbd..b9eb275 100644 --- a/toolbox/spanner/pubspec.lock +++ b/toolbox/spanner/pubspec.lock @@ -75,6 +75,19 @@ packages: description: flutter source: sdk version: "0.0.0" + flutter_web_plugins: + dependency: transitive + description: flutter + source: sdk + version: "0.0.0" + go_router: + dependency: "direct main" + description: + name: go_router + sha256: "92d8cee7c57dff0a6c409c05597b460002434eccf7424a712283225b3962d03f" + url: "https://pub.dev" + source: hosted + version: "17.2.3" leak_tracker: dependency: transitive description: @@ -107,6 +120,14 @@ packages: url: "https://pub.dev" source: hosted version: "6.1.0" + logging: + dependency: transitive + description: + name: logging + sha256: c8245ada5f1717ed44271ed1c26b8ce85ca3228fd2ffdb75468ab01979309d61 + url: "https://pub.dev" + source: hosted + version: "1.3.0" matcher: dependency: transitive description: @@ -210,4 +231,4 @@ packages: version: "15.2.0" sdks: dart: ">=3.10.0 <4.0.0" - flutter: ">=3.18.0-18.0.pre.54" + flutter: ">=3.35.0" diff --git a/toolbox/spanner/pubspec.yaml b/toolbox/spanner/pubspec.yaml index 8b9e714..cf2c483 100644 --- a/toolbox/spanner/pubspec.yaml +++ b/toolbox/spanner/pubspec.yaml @@ -32,6 +32,7 @@ dependencies: # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.8 + go_router: ^17.2.3 dev_dependencies: flutter_test: -- 2.51.2