9

lib/13/02/pages/app.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:iroute/13/02/store/app_state.dart';
+import '../route/parser.dart';
+import '../route/route_state.dart';
+
+class App extends StatefulWidget {
+  const App({super.key});
+
+  @override
+  State<App> createState() => _AppState();
+}
+
+class _AppState extends State<App> {
+  late final RootRouterDelegate _delegate;
+  late final AppRouteParser _parser;
+  late final AppState _appState;
+  late final RouteState _routeState;
+
+  @override
+  void initState() {
+    super.initState();
+    _parser = AppRouteParser(initialRoute: '/color', allowPaths: [
+      '/color',
+      '/color/add',
+      '/color/detail/:colorHex',
+    ]);
+    _appState = AppState.initial();
+    _routeState = RouteState(_parser);
+    _delegate = RootRouterDelegate(_routeState);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AppStateScope(
+      notifier: _appState,
+      child: RouteStateScope(
+        notifier: _routeState,
+        child: MaterialApp.router(
+          routerDelegate: _delegate,
+          routeInformationParser: _parser,
+          theme: ThemeData(
+              useMaterial3: true,
+              appBarTheme: const AppBarTheme(
+                  elevation: 0,
+                  iconTheme: IconThemeData(color: Colors.black),
+                  titleTextStyle: TextStyle(
+                    color: Colors.black,
+                    fontSize: 18,
+                    fontWeight: FontWeight.bold,
+                  ))),
+          debugShowCheckedModeBanner: false,
+        ),
+      ),
+    );
+  }
+}

lib/13/02/pages/color_add_page.dart

@@ -0,0 +1,67 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+class ColorAddPage extends StatefulWidget {
+  const ColorAddPage({super.key});
+
+  @override
+  State<ColorAddPage> createState() => _ColorAddPageState();
+}
+
+class _ColorAddPageState extends State<ColorAddPage> {
+  late Color _color;
+
+  @override
+  void initState() {
+    super.initState();
+    _color = randomColor;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    String text = '# ${_color.value.toRadixString(16)}';
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('添加颜色'),
+        actions: [IconButton(onPressed: _selectColor, icon: Icon(Icons.check ))],
+      ),
+      body: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16.0,vertical: 20),
+        child: Row(
+          children: [
+            Expanded(child: Text(text,style: TextStyle(color: _color,fontSize: 24,letterSpacing: 4),)),
+            Container(
+              margin: EdgeInsets.only(left: 10),
+              width: 40,
+              height: 40,
+              child: Icon(
+                Icons.sell_outlined,
+                color: Colors.white,
+              ),
+              decoration: BoxDecoration(
+                color: _color,
+                borderRadius: BorderRadius.circular(8),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Random _random = Random();
+
+  Color get randomColor {
+    return Color.fromARGB(
+      255,
+      _random.nextInt(256),
+      _random.nextInt(256),
+      _random.nextInt(256),
+    );
+  }
+
+  void _selectColor() {
+    Navigator.of(context).pop(_color);
+  }
+}

lib/13/02/pages/home_page.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:iroute/13/02/store/app_state.dart';
+import '../route/route_state.dart';
+import 'color_add_page.dart';
+
+import '../../../common/components/colors_panel.dart';
+import '../../../common/pages/stl_color_page.dart';
+
+class HomePage extends StatefulWidget {
+  const HomePage({super.key});
+
+  @override
+  State<HomePage> createState() => _HomePageState();
+}
+
+class _HomePageState extends State<HomePage> {
+
+
+  @override
+  Widget build(BuildContext context) {
+    AppState state = AppStateScope.of(context);
+    return Scaffold(
+      appBar: AppBar(title:const Text('颜色主页')),
+      floatingActionButton: FloatingActionButton(
+        onPressed: _toAddPage,
+        child: const Icon(Icons.add),
+      ),
+      body: ColorsPanel(
+        colors: state.colors,
+        onSelect: _selectColor,
+      ),
+    );
+  }
+
+  void _selectColor(Color color){
+    String value = '#${color.value.toRadixString(16)}';
+    RouteStateScope.of(context).update('/color/detail/$value');
+  }
+
+  void _toAddPage() async {
+    RouteStateScope.of(context).update('/color/add');
+  }
+}