v

lib/02/01/pages/color_add_page.dart

@@ -21,7 +21,6 @@ class _ColorAddPageState extends State<ColorAddPage> {
   @override
   Widget build(BuildContext context) {
     String text = '# ${_color.value.toRadixString(16)}';
-
     return Scaffold(
       appBar: AppBar(
         title: Text('添加颜色'),

lib/02/01/pages/home_page.dart

@@ -1,29 +1,51 @@
 import 'package:flutter/material.dart';
+import 'package:iroute/02/01/pages/color_add_page.dart';
 
 import '../../../common/components/colors_panel.dart';
 import '../../../common/pages/stl_color_page.dart';
 
-class HomePage extends StatelessWidget {
+class HomePage extends StatefulWidget {
   const HomePage({super.key});
 
+  @override
+  State<HomePage> createState() => _HomePageState();
+}
+
+class _HomePageState extends State<HomePage> {
+  final List<Color> _colors = [
+    Colors.red, Colors.black, Colors.blue, Colors.green, Colors.orange,
+    Colors.pink, Colors.purple, Colors.indigo, Colors.amber, Colors.cyan,
+    Colors.redAccent, Colors.grey, Colors.blueAccent, Colors.greenAccent, Colors.orangeAccent,
+    Colors.pinkAccent, Colors.purpleAccent, Colors.indigoAccent, Colors.amberAccent, Colors.cyanAccent,
+  ];
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      appBar: AppBar(title:const Text('颜色主页')),
+      floatingActionButton: FloatingActionButton(
+        onPressed: _toAddPage,
+        child: const Icon(Icons.add),
+      ),
       body: ColorsPanel(
-        colors: const [
+        colors: _colors,
-          Colors.red, Colors.black, Colors.blue, Colors.green, Colors.orange,
+        onSelect: _selectColor,
-          Colors.pink, Colors.purple, Colors.indigo, Colors.amber, Colors.cyan,
-          Colors.redAccent, Colors.grey, Colors.blueAccent, Colors.greenAccent, Colors.orangeAccent,
-          Colors.pinkAccent, Colors.purpleAccent, Colors.indigoAccent, Colors.amberAccent, Colors.cyanAccent,
-        ],
-        onSelect: (Color color) => selectColor(context, color),
       ),
     );
   }
 
-  void selectColor(BuildContext context,Color color){
+  void _selectColor(Color color){
     Route route = MaterialPageRoute(builder: (ctx) => StlColorPage(color: color));
     Navigator.of(context).push(route);
   }
 
+  void _toAddPage() async {
+    Route<Color> route = MaterialPageRoute<Color>(builder: (ctx) => const ColorAddPage());
+    Color? color = await Navigator.of(context).push(route);
+    if (color != null) {
+      setState(() {
+        _colors.add(color);
+      });
+    }
+  }
 }

lib/02/02/main.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:iroute/02/01/pages/color_add_page.dart';
+import '../../common/pages/stl_color_page.dart';
+import 'pages/empty_page.dart';
+import 'pages/home_page.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      debugShowCheckedModeBanner: false,
+      theme: ThemeData(
+        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
+        useMaterial3: true,
+      ),
+      routes: routeMap,
+      // initialRoute: '/add_color',
+      onUnknownRoute: _onUnknownRoute,
+      onGenerateRoute: _onGenerateRoute,
+    );
+  }
+
+  /// 路由映射 [字符串 --> 组件构造器]
+  Map<String, WidgetBuilder> get routeMap => {
+        '/': (ctx) => const HomePage(),
+        '/add_color': (ctx) => const ColorAddPage(),
+      };
+
+  /// 根据路由配置 [settings] 创建路由
+  Route? _onGenerateRoute(RouteSettings settings) {
+    String? name = settings.name;
+    Widget? child;
+    if (name == '/color_detail') {
+      Color color = settings.arguments as Color;
+      child = StlColorPage(color: color);
+    }
+
+    if (child != null) {
+      return MaterialPageRoute(
+        builder: (ctx) => child!,
+        settings: settings,
+      );
+    }
+    return null;
+  }
+
+  Route? _onUnknownRoute(RouteSettings settings) {
+    return MaterialPageRoute(
+      builder: (ctx) => const EmptyPage(),
+      settings: settings,
+    );
+  }
+}

lib/02/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/02/02/pages/empty_page.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+class EmptyPage extends StatelessWidget {
+  const EmptyPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('界面走丢了'),
+      ),
+      body: Scaffold(
+        body: Center(
+          child: Wrap(
+            spacing: 16,
+            crossAxisAlignment: WrapCrossAlignment.center,
+            direction: Axis.vertical,
+            children: [
+              Icon(Icons.nearby_error,size: 64, color: Colors.grey),
+              Text(
+                '404 界面丢失',
+                style: TextStyle(fontSize: 24, color: Colors.grey),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/02/02/pages/home_page.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+import 'package:iroute/02/01/pages/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> {
+  final List<Color> _colors = [
+    Colors.red, Colors.black, Colors.blue, Colors.green, Colors.orange,
+    Colors.pink, Colors.purple, Colors.indigo, Colors.amber, Colors.cyan,
+    Colors.redAccent, Colors.grey, Colors.blueAccent, Colors.greenAccent, Colors.orangeAccent,
+    Colors.pinkAccent, Colors.purpleAccent, Colors.indigoAccent, Colors.amberAccent, Colors.cyanAccent,
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title:const Text('颜色主页 V2')),
+      floatingActionButton: FloatingActionButton(
+        onPressed: _toAddPage,
+        child: const Icon(Icons.add),
+      ),
+      body: ColorsPanel(
+        colors: _colors,
+        onSelect: _selectColor,
+      ),
+    );
+  }
+
+  void _selectColor(Color color){
+    Navigator.of(context).pushNamed('/color_detail1',arguments: color);
+  }
+
+  void _toAddPage() async {
+    dynamic color = await Navigator.of(context).pushNamed('/add_color');
+    if (color != null) {
+      setState(() {
+        _colors.add(color);
+      });
+    }
+  }
+}

lib/02/03/main.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:iroute/02/01/pages/color_add_page.dart';
+import '../../common/pages/stl_color_page.dart';
+import 'pages/empty_page.dart';
+import 'pages/home_page.dart';
+import 'router1/router1.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      debugShowCheckedModeBanner: false,
+      theme: ThemeData(
+        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
+        useMaterial3: true,
+      ),
+      routes: Router1.routeMap,
+      navigatorKey: Router1.globalNavKey,
+      onUnknownRoute: Router1.onUnknownRoute,
+      initialRoute: Router1.initialRoute,
+      onGenerateRoute: Router1.onGenerateRoute,
+    );
+  }
+
+
+
+
+}

lib/02/03/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/02/03/pages/empty_page.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+class EmptyPage extends StatelessWidget {
+  const EmptyPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('界面走丢了'),
+      ),
+      body: Scaffold(
+        body: Center(
+          child: Wrap(
+            spacing: 16,
+            crossAxisAlignment: WrapCrossAlignment.center,
+            direction: Axis.vertical,
+            children: [
+              Icon(Icons.nearby_error,size: 64, color: Colors.grey),
+              Text(
+                '404 界面丢失',
+                style: TextStyle(fontSize: 24, color: Colors.grey),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/02/03/pages/home_page.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:iroute/02/01/pages/color_add_page.dart';
+import 'package:iroute/02/03/router1/router1.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> {
+  final List<Color> _colors = [
+    Colors.red, Colors.black, Colors.blue, Colors.green, Colors.orange,
+    Colors.pink, Colors.purple, Colors.indigo, Colors.amber, Colors.cyan,
+    Colors.redAccent, Colors.grey, Colors.blueAccent, Colors.greenAccent, Colors.orangeAccent,
+    Colors.pinkAccent, Colors.purpleAccent, Colors.indigoAccent, Colors.amberAccent, Colors.cyanAccent,
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title:const Text('颜色主页 V3')),
+      floatingActionButton: FloatingActionButton(
+        onPressed: _toAddPage,
+        child: const Icon(Icons.add),
+      ),
+      body: ColorsPanel(
+        colors: _colors,
+        onSelect: _selectColor,
+      ),
+    );
+  }
+
+  void _selectColor(Color color){
+    Router1.nav.pushNamed(Router1.kColorDetail,arguments: color);
+  }
+
+  void _toAddPage() async {
+    dynamic color = await Router1.nav.pushNamed(Router1.kAddColor);
+    if (color != null) {
+      setState(() {
+        _colors.add(color);
+      });
+    }
+  }
+}

lib/02/03/router1/router1.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+
+import '../../../common/pages/stl_color_page.dart';
+import '../pages/color_add_page.dart';
+import '../pages/empty_page.dart';
+import '../pages/home_page.dart';
+
+class Router1 {
+
+  /// 主页面 [HomePage]
+  static const String kHome = '/';
+
+  /// 颜色详情页 [StlColorPage]
+  static const String kColorDetail = '${kHome}color_detail';
+
+  /// 添加颜色页 [ColorAddPage]
+  static const String kAddColor = '${kHome}add_color';
+
+
+  static String get initialRoute => kHome;
+
+  static final GlobalKey<NavigatorState> globalNavKey = GlobalKey();
+
+  static NavigatorState get nav => globalNavKey.currentState!;
+
+  /// 路由映射 [字符串 --> 组件构造器]
+  static Map<String, WidgetBuilder> get routeMap => {
+        kHome: (ctx) => const HomePage(),
+        kAddColor: (ctx) => const ColorAddPage(),
+  };
+
+  /// 根据路由配置 [settings] 创建路由
+  static Route? onGenerateRoute(RouteSettings settings) {
+    String? name = settings.name;
+    Widget? child;
+    if (name == kColorDetail) {
+      Color color = settings.arguments as Color;
+      child = StlColorPage(color: color);
+    }
+
+    if (child != null) {
+      return MaterialPageRoute(
+        builder: (ctx) => child!,
+        settings: settings,
+      );
+    }
+    return null;
+  }
+
+  static Route? onUnknownRoute(RouteSettings settings) {
+    return MaterialPageRoute(
+      builder: (ctx) => const EmptyPage(),
+      settings: settings,
+    );
+  }
+}