Initial commit

lib/02/01/main.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.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,
+      ),
+      home:  const HomePage(),
+    );
+  }
+}
+
+

lib/02/01/pages/color_add_page.dart

@@ -0,0 +1,68 @@
+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/01/pages/home_page.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+
+import '../../../common/components/colors_panel.dart';
+import '../../../common/pages/stl_color_page.dart';
+
+class HomePage extends StatelessWidget {
+  const HomePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: ColorsPanel(
+        colors: const [
+          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,
+        ],
+        onSelect: (Color color) => selectColor(context, color),
+      ),
+    );
+  }
+
+  void selectColor(BuildContext context,Color color){
+    Route route = MaterialPageRoute(builder: (ctx) => StlColorPage(color: color));
+    Navigator.of(context).push(route);
+  }
+
+}

lib/common/components/colors_panel.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+class ColorsPanel extends StatelessWidget {
+  final List<Color> colors;
+  final ValueChanged<Color> onSelect;
+  const ColorsPanel({super.key, required this.colors, required this.onSelect});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Wrap(
+        spacing: 8,
+        runSpacing: 8,
+        children: colors
+            .asMap()
+            .keys
+            .map((int index) => GestureDetector(
+          onTap: () => onSelect(colors[index]),
+          child: Container(
+            alignment: Alignment.center,
+            width: 60,
+            height: 60,
+            decoration: BoxDecoration(
+                color: colors[index],
+                borderRadius: BorderRadius.circular(8)),
+            child: Text(
+              '$index',
+              style: TextStyle(color: Colors.white),
+            ),
+          ),
+        ))
+            .toList(),
+      ),
+    );
+  }
+}

lib/common/pages/stl_color_page.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+class StlColorPage extends StatelessWidget {
+  final Color color;
+  const StlColorPage({super.key, required this.color});
+
+  @override
+  Widget build(BuildContext context) {
+
+    const TextStyle style = TextStyle(
+      fontSize: 32,
+      fontWeight: FontWeight.bold,
+      color: Colors.white
+    );
+    String text = '# ${color.value.toRadixString(16)}';
+    return Scaffold(
+      appBar: AppBar(
+          systemOverlayStyle: SystemUiOverlayStyle(
+              statusBarColor: Colors.transparent,
+              statusBarIconBrightness: Brightness.light
+          ),
+        iconTheme: IconThemeData(color: Colors.white),
+        titleTextStyle:TextStyle(color: Colors.white,fontSize: 18) ,
+        backgroundColor: color,
+        title: Text('颜色界面',),),
+      body: Container(
+        alignment: Alignment.center,
+        color: color,
+        child: Text(text ,style: style,),
+      ),
+    );
+  }
+}

lib/main.dart

@@ -0,0 +1,125 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  // This widget is the root of your application.
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        // This is the theme of your application.
+        //
+        // TRY THIS: Try running your application with "flutter run". You'll see
+        // the application has a blue toolbar. Then, without quitting the app,
+        // try changing the seedColor in the colorScheme below to Colors.green
+        // and then invoke "hot reload" (save your changes or press the "hot
+        // reload" button in a Flutter-supported IDE, or press "r" if you used
+        // the command line to start the app).
+        //
+        // Notice that the counter didn't reset back to zero; the application
+        // state is not lost during the reload. To reset the state, use hot
+        // restart instead.
+        //
+        // This works for code too, not just values: Most code changes can be
+        // tested with just a hot reload.
+        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
+        useMaterial3: true,
+      ),
+      home: const MyHomePage(title: 'Flutter Demo Home Page'),
+    );
+  }
+}
+
+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<MyHomePage> createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  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(
+        // TRY THIS: Try changing the color here to a specific color (to
+        // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
+        // change color while the other colors stay the same.
+        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        // 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: MainAxisAlignment.center,
+          children: <Widget>[
+            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),
+      ), // This trailing comma makes auto-formatting nicer for build methods.
+    );
+  }
+}