选择线条粗细

lib/paper/paper.dart

@@ -6,6 +6,7 @@ import 'package:flutter_first_station/paper/conform_dialog.dart';
 
 import 'model.dart';
 import 'paper_app_bar.dart';
+import 'stork_width_selector.dart';
 
 class Paper extends StatefulWidget {
   const Paper({Key? key}) : super(key: key);
@@ -22,14 +23,18 @@ class _PaperState extends State<Paper> {
 
   // 支持的颜色
   final List<Color> supportColors = [
-    Colors.black, Colors.red, Colors.orange,
-    Colors.yellow, Colors.green, Colors.blue,
-    Colors.indigo, Colors.purple,
+    Colors.black,
+    Colors.red,
+    Colors.orange,
+    Colors.yellow,
+    Colors.green,
+    Colors.blue,
+    Colors.indigo,
+    Colors.purple,
   ];
 
   // 支持的线粗
-  final List<double> supportStorkWidths = [1,2, 4, 6, 8, 10];
-
+  final List<double> supportStorkWidths = [1, 2, 4, 6, 8, 10];
 
   @override
   Widget build(BuildContext context) {
@@ -37,15 +42,26 @@ class _PaperState extends State<Paper> {
       appBar: PaperAppBar(
         onClear: _showClearDialog,
       ),
-      body: GestureDetector(
-        onPanStart: _onPanStart,
-        onPanUpdate: _onPanUpdate,
-        child: CustomPaint(
-          painter: PaperPainter(
-            lines: _lines
+      body: Stack(
+        children: [
+          GestureDetector(
+            onPanStart: _onPanStart,
+            onPanUpdate: _onPanUpdate,
+            child: CustomPaint(
+              painter: PaperPainter(lines: _lines),
+              child: ConstrainedBox(constraints: const BoxConstraints.expand()),
+            ),
           ),
-          child: ConstrainedBox(constraints: const BoxConstraints.expand()),
-        ),
+          Positioned(
+              bottom: 0,
+              right: 10,
+              child: StorkWidthSelector(
+                supportStorkWidths: supportStorkWidths,
+                color: Colors.black,
+                activeIndex: _activeStorkWidthIndex,
+                onSelect: _onSelectStorkWidth,
+              )),
+        ],
       ),
     );
   }
@@ -55,30 +71,37 @@ class _PaperState extends State<Paper> {
     showDialog(
         context: context,
         builder: (ctx) => ConformDialog(
-          title: '清空提示',
-          conformText: '确定',
-          msg: msg,
-          onConform: _clear,
-        ));
+              title: '清空提示',
+              conformText: '确定',
+              msg: msg,
+              onConform: _clear,
+            ));
   }
 
-  void _clear(){
+  void _clear() {
     _lines.clear();
     Navigator.of(context).pop();
-    setState(() {
-
-    });
+    setState(() {});
   }
 
   void _onPanStart(DragStartDetails details) {
-    _lines.add(Line(points: [details.localPosition],));
+    _lines.add(Line(
+      points: [details.localPosition],
+      strokeWidth: supportStorkWidths[_activeStorkWidthIndex],
+    ));
   }
 
   void _onPanUpdate(DragUpdateDetails details) {
     _lines.last.points.add(details.localPosition);
-    setState(() {
+    setState(() {});
+  }
 
-    });
+  void _onSelectStorkWidth(int index) {
+    if (index != _activeStorkWidthIndex) {
+      setState(() {
+        _activeStorkWidthIndex = index;
+      });
+    }
   }
 }
 

lib/paper/stork_width_selector.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+
+class StorkWidthSelector extends StatelessWidget {
+  final List<double> supportStorkWidths;
+  final ValueChanged<int> onSelect;
+  final int activeIndex;
+  final Color color;
+
+  const StorkWidthSelector({
+    Key? key,
+    required this.supportStorkWidths,
+    required this.activeIndex,
+    required this.onSelect,
+    required this.color,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8),
+      child: Column(
+          crossAxisAlignment: CrossAxisAlignment.end,
+          children: List.generate(
+            supportStorkWidths.length,
+            _buildByIndex,
+          )),
+    );
+  }
+
+  Widget _buildByIndex(int index) {
+    bool select = index == activeIndex;
+    return GestureDetector(
+      onTap: () => onSelect(index),
+      child: Container(
+        margin: const EdgeInsets.symmetric(horizontal: 2),
+        width: 70,
+        height: 18,
+        alignment: Alignment.center,
+        decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(8),
+            border: select ? Border.all(color: Colors.blue) : null),
+        child: Container(
+          width: 50,
+          color: color,
+          height: supportStorkWidths[index],
+        ),
+      ),
+    );
+  }
+}