add line style (dashed/dotted/solid) to demo app

baumths · Sep 11, 2023 · ce26def · ce26def
1 parent cecaf19
commit ce26def
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 0 deletions.
diff --git a/example/lib/src/examples.dart b/example/lib/src/examples.dart
@@ -71,6 +71,8 @@ class TreeIndentGuideScope extends StatelessWidget {
           thickness: state.lineThickness,
           origin: state.lineOrigin,
           roundCorners: state.roundedCorners,
+          strokeCap: StrokeCap.round,
+          pathModifier: state.lineStyle.toPathModifier(),
         );
         break;
       case IndentType.scopingLines:
@@ -79,6 +81,8 @@ class TreeIndentGuideScope extends StatelessWidget {
           color: Theme.of(context).colorScheme.outline,
           thickness: state.lineThickness,
           origin: state.lineOrigin,
+          strokeCap: StrokeCap.round,
+          pathModifier: state.lineStyle.toPathModifier(),
         );
         break;
       case IndentType.blank:

diff --git a/example/lib/src/settings/categories.dart b/example/lib/src/settings/categories.dart
@@ -24,6 +24,7 @@ class SettingsCategories extends StatelessWidget {
         if (indentType == IndentType.connectingLines) ...[
           const RoundedConnections(),
         ],
+        const LineStyleSelector(),
         const LineThickness(),
         const LineOrigin(),
       ],
@@ -333,6 +334,54 @@ class LineOrigin extends StatelessWidget {
   }
 }
 
+//* Line Style -----------------------------------------------------------------
+
+class LineStyleSelector extends StatelessWidget {
+  const LineStyleSelector({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final selectedLineStyle = context.select<SettingsController, LineStyle>(
+      (controller) => controller.state.lineStyle,
+    );
+
+    return ListTile(
+      title: const Text('Line Style'),
+      subtitle: Text(
+        selectedLineStyle.title,
+        style: TextStyle(
+          color: Theme.of(context).colorScheme.primary,
+        ),
+      ),
+      trailing: const Icon(Icons.chevron_right),
+      contentPadding: const EdgeInsetsDirectional.only(start: 16, end: 8),
+      onTap: () async {
+        final controller = context.read<SettingsController>();
+
+        final RenderBox tile = context.findRenderObject()! as RenderBox;
+        final Offset offset = tile.localToGlobal(Offset.zero);
+        final Rect(:top, :right) = offset & tile.size;
+
+        final LineStyle? newLineStyle = await showMenu<LineStyle>(
+          context: context,
+          position: RelativeRect.fromLTRB(right, top, tile.size.width, 0),
+          items: <PopupMenuEntry<LineStyle>>[
+            for (final LineStyle lineStyle in LineStyle.values)
+              PopupMenuItem(
+                value: lineStyle,
+                enabled: lineStyle != selectedLineStyle,
+                child: Text(lineStyle.title),
+              ),
+          ],
+        );
+
+        if (newLineStyle == null) return;
+        controller.updateLineStyle(newLineStyle);
+      },
+    );
+  }
+}
+
 //* Rounded Line Connections ---------------------------------------------------
 
 class RoundedConnections extends StatelessWidget {

diff --git a/example/lib/src/settings/controller.dart b/example/lib/src/settings/controller.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:path_drawing/path_drawing.dart';
 
 enum IndentType {
   connectingLines('Connecting Lines'),
@@ -14,6 +15,29 @@ enum IndentType {
   }
 }
 
+enum LineStyle {
+  dashed('Dashed'),
+  dotted('Dotted'),
+  solid('Solid');
+
+  final String title;
+  const LineStyle(this.title);
+
+  Path Function(Path)? toPathModifier() => switch (this) {
+        dashed => (Path path) => dashPath(
+              path,
+              dashArray: CircularIntervalList(const [6, 4]),
+              dashOffset: const DashOffset.absolute(6 / 4),
+            ),
+        dotted => (Path path) => dashPath(
+              path,
+              dashArray: CircularIntervalList(const [0.5, 3.5]),
+              dashOffset: const DashOffset.absolute(0.5 * 3.5),
+            ),
+        solid => null,
+      };
+}
+
 class SettingsState {
   const SettingsState({
     this.animateExpansions = true,
@@ -25,6 +49,7 @@ class SettingsState {
     this.lineThickness = 2.0,
     this.roundedCorners = false,
     this.textDirection = TextDirection.ltr,
+    this.lineStyle = LineStyle.solid,
   });
 
   final bool animateExpansions;
@@ -36,6 +61,7 @@ class SettingsState {
   final double lineThickness;
   final bool roundedCorners;
   final TextDirection textDirection;
+  final LineStyle lineStyle;
 
   SettingsState copyWith({
     bool? animateExpansions,
@@ -47,6 +73,7 @@ class SettingsState {
     double? lineThickness,
     bool? roundedCorners,
     TextDirection? textDirection,
+    LineStyle? lineStyle,
   }) {
     return SettingsState(
       animateExpansions: animateExpansions ?? this.animateExpansions,
@@ -58,6 +85,7 @@ class SettingsState {
       lineThickness: lineThickness ?? this.lineThickness,
       roundedCorners: roundedCorners ?? this.roundedCorners,
       textDirection: textDirection ?? this.textDirection,
+      lineStyle: lineStyle ?? this.lineStyle,
     );
   }
 }
@@ -123,4 +151,9 @@ class SettingsController with ChangeNotifier {
     if (state.textDirection == value) return;
     state = state.copyWith(textDirection: value);
   }
+
+  void updateLineStyle(LineStyle value) {
+    if (state.lineStyle == value) return;
+    state = state.copyWith(lineStyle: value);
+  }
 }
diff --git a/example/pubspec.yaml b/example/pubspec.yaml
@@ -11,6 +11,7 @@ dependencies:
     sdk: flutter
   flutter_fancy_tree_view:
     path: ../
+  path_drawing: ^1.0.1
   provider: ^6.0.5
 
 dev_dependencies: