v

lib/05/01/main.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const OverlayPage());
+}
+
+class OverlayPage extends StatelessWidget{
+  const OverlayPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final OverlayEntry home = OverlayEntry(builder: (BuildContext context) => const HomePage());
+
+    return Directionality(
+      textDirection: TextDirection.ltr,
+      child: Overlay(
+        initialEntries: [home],
+      ),
+    );
+  }
+}
+
+class HomePage extends StatelessWidget {
+  const HomePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const ColoredBox(
+      color: Colors.white,
+      child: Align(
+        child: FlutterLogo(size: 60,),
+      ),
+    );
+  }
+}
+

lib/05/02/main.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const OverlayPage());
+}
+
+class OverlayPage extends StatelessWidget{
+  const OverlayPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final OverlayEntry home = OverlayEntry(builder: (BuildContext context) => const HomePage());
+    final OverlayEntry circle = OverlayEntry(builder: (BuildContext context) => const Center(child:  Circle()));
+
+    return Directionality(
+      textDirection: TextDirection.ltr,
+      child: Overlay(
+        initialEntries: [home,circle],
+      ),
+    );
+  }
+}
+
+class HomePage extends StatelessWidget {
+  const HomePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const ColoredBox(
+      color: Colors.white,
+      child: Align(
+        child: FlutterLogo(
+          size: 60,
+        ),
+      ),
+    );
+  }
+}
+
+class Circle extends StatelessWidget {
+  const Circle({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 20,
+      height: 20,
+      decoration: const BoxDecoration(
+        color: Colors.redAccent,
+        shape: BoxShape.circle
+      ),
+    );
+  }
+}

lib/05/03/main.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const OverlayPage());
+}
+
+class OverlayPage extends StatelessWidget{
+  const OverlayPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final OverlayEntry home =
+        OverlayEntry(builder: (BuildContext context) => const HomePage());
+
+    final OverlayEntry circle = OverlayEntry(
+        builder: (BuildContext context) => Positioned(
+              top: 50,
+              left: 50,
+              child: const Circle(),
+            ));
+
+    return Directionality(
+      textDirection: TextDirection.ltr,
+      child: Overlay(
+        initialEntries: [home, circle],
+      ),
+    );
+  }
+}
+
+class HomePage extends StatelessWidget {
+  const HomePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const ColoredBox(
+      color: Colors.white,
+      child: Align(
+        child: FlutterLogo(
+          size: 60,
+        ),
+      ),
+    );
+  }
+}
+
+class Circle extends StatelessWidget {
+  const Circle({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 20,
+      height: 20,
+      decoration:
+          const BoxDecoration(color: Colors.redAccent, shape: BoxShape.circle),
+    );
+  }
+}

lib/05/04/main.dart

@@ -0,0 +1,77 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const OverlayPage());
+}
+
+class OverlayPage extends StatefulWidget {
+  const OverlayPage({super.key});
+
+  @override
+  State<OverlayPage> createState() => _OverlayPageState();
+}
+
+class _OverlayPageState extends State<OverlayPage> {
+  double _left = 0;
+  double _top = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    final OverlayEntry home =
+        OverlayEntry(builder: (BuildContext context) => const HomePage());
+
+    final OverlayEntry circle = OverlayEntry(
+        builder: (BuildContext context) => Positioned(
+              top: 50,
+              left: 50,
+              child: GestureDetector(
+                onPanUpdate: _updatePosition,
+                child: const Circle(),
+              ),
+            ));
+
+    return Directionality(
+      textDirection: TextDirection.ltr,
+      child: Overlay(
+        initialEntries: [home, circle],
+      ),
+    );
+  }
+
+  void _updatePosition(DragUpdateDetails details) {
+    setState(() {
+      _top += details.delta.dy;
+      _left += details.delta.dx;
+    });
+  }
+}
+
+class HomePage extends StatelessWidget {
+  const HomePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const ColoredBox(
+      color: Colors.white,
+      child: Align(
+        child: FlutterLogo(
+          size: 60,
+        ),
+      ),
+    );
+  }
+}
+
+class Circle extends StatelessWidget {
+  const Circle({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 20,
+      height: 20,
+      decoration:
+          const BoxDecoration(color: Colors.redAccent, shape: BoxShape.circle),
+    );
+  }
+}

lib/05/05/main.dart

@@ -0,0 +1,127 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const OverlayPage());
+}
+
+class OverlayPage extends StatefulWidget {
+  const OverlayPage({super.key});
+
+  @override
+  State<OverlayPage> createState() => _OverlayPageState();
+}
+
+class _OverlayPageState extends State<OverlayPage> {
+  @override
+  Widget build(BuildContext context) {
+    final OverlayEntry home = OverlayEntry(builder: (BuildContext context) => const HomePage());
+    return Directionality(
+      textDirection: TextDirection.ltr,
+      child: Overlay(
+        initialEntries: [home],
+      ),
+    );
+  }
+}
+
+class HomePage extends StatefulWidget {
+  const HomePage({super.key});
+
+  @override
+  State<HomePage> createState() => _HomePageState();
+}
+
+class _HomePageState extends State<HomePage> {
+
+  OverlayEntry? entry;
+
+  @override
+  Widget build(BuildContext context) {
+    return ColoredBox(
+      color: Colors.white,
+      child: Align(
+        child: GestureDetector(
+          onTap: _toggle,
+          child: const FlutterLogo(
+            size: 60,
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _toggle() {
+    if(entry==null){
+      entry = _createPoint();
+      Overlay.of(context).insert(entry!);
+    }else{
+      entry!.remove();
+      entry = null;
+    }
+  }
+
+  OverlayEntry _createPoint() {
+    return OverlayEntry(
+      builder: (BuildContext context) => Positioned(
+        width: 20,
+        height: 20,
+        left:  20,
+        top: 20,
+        child: GestureDetector(child: const Circle()),
+      ),
+    );
+  }
+}
+
+class ClickShowPage extends StatefulWidget {
+  const ClickShowPage({super.key});
+
+  @override
+  State<ClickShowPage> createState() => _ClickShowPageState();
+}
+
+class _ClickShowPageState extends State<ClickShowPage> {
+  Offset _position = Offset.zero;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: _addPoint,
+      onTapDown: _onTapDown,
+    );
+  }
+
+  void _addPoint() {
+    OverlayEntry entry = _createPoint();
+    Overlay.of(context).insert(entry);
+  }
+
+  OverlayEntry _createPoint() {
+    return OverlayEntry(
+      builder: (BuildContext context) => Positioned(
+          width: 20,
+          height: 20,
+          left: _position.dx - 10,
+          top: _position.dy - 10,
+          child: Circle()),
+    );
+  }
+
+  void _onTapDown(TapDownDetails details) {
+    _position = details.localPosition;
+  }
+}
+
+class Circle extends StatelessWidget {
+  const Circle({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 20,
+      height: 20,
+      decoration:
+          const BoxDecoration(color: Colors.redAccent, shape: BoxShape.circle),
+    );
+  }
+}

lib/05/06/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/05/06/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/05/06/pages/home_page.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.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> {
+  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: _colors,
+        onSelect: _selectColor,
+      ),
+    );
+  }
+
+  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);
+      });
+    }
+  }
+}