add some new icon and a sidebar with pen and eraser buttons

2022-10-29 12:33:47 +02:00 · 2022-10-29 12:33:47 +02:00 · be3b54f258
commit be3b54f258
parent 57cff08218
6 changed files with 206 additions and 56 deletions
--- a/lib/all_notes_page.dart
+++ b/lib/all_notes_page.dart
@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:notes/icon_material_button.dart';
 import 'package:notes/note_tile.dart';

 class AllNotesPage extends StatefulWidget {
@ -27,38 +28,20 @@ class _AllNotesPageState extends State<AllNotesPage> {
                  color: Color.fromRGBO(255, 255, 255, .85), fontSize: 22),
            ),
            Expanded(child: Container()),
-            Material(
-              color: Colors.transparent,
-              shape: const CircleBorder(),
-              clipBehavior: Clip.hardEdge,
-              child: IconButton(
-                icon: const Icon(Icons.picture_as_pdf_outlined),
-                iconSize: 28,
-                color: const Color.fromRGBO(255, 255, 255, .85),
-                onPressed: () {},
-              ),
+            IconMaterialButton(
+              icon: const Icon(Icons.picture_as_pdf_outlined),
+              color: const Color.fromRGBO(255, 255, 255, .85),
+              onPressed: () {},
            ),
-            Material(
-              color: Colors.transparent,
-              shape: const CircleBorder(),
-              clipBehavior: Clip.hardEdge,
-              child: IconButton(
-                icon: const Icon(Icons.search),
-                iconSize: 28,
-                color: const Color.fromRGBO(255, 255, 255, .85),
-                onPressed: () {},
-              ),
+            IconMaterialButton(
+              icon: const Icon(Icons.search),
+              color: const Color.fromRGBO(255, 255, 255, .85),
+              onPressed: () {},
            ),
-            Material(
-              color: Colors.transparent,
-              shape: const CircleBorder(),
-              clipBehavior: Clip.hardEdge,
-              child: IconButton(
-                icon: const Icon(Icons.more_vert),
-                iconSize: 28,
-                color: const Color.fromRGBO(255, 255, 255, .85),
-                onPressed: () {},
-              ),
+            IconMaterialButton(
+              icon: const Icon(Icons.more_vert),
+              color: const Color.fromRGBO(255, 255, 255, .85),
+              onPressed: () {},
            ),
            const SizedBox(
              width: 15,
--- a/lib/canvas/drawing_page.dart
+++ b/lib/canvas/drawing_page.dart
@ -1,9 +1,15 @@
 import 'dart:math';
 import 'dart:ui';
+import 'package:adwaita_icons/adwaita_icons.dart';
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/material.dart';
+import 'package:iconify_flutter/iconify_flutter.dart';
+import 'package:iconify_flutter/icons/emojione_monotone.dart';
+import 'package:iconify_flutter/icons/jam.dart';
 import 'package:notes/canvas/my_painter.dart';
 import 'package:notes/canvas/screen_document_mapping.dart';

+import '../icon_material_button.dart';
 import 'document_types.dart';

 class DrawingPage extends StatefulWidget {
@ -38,17 +44,75 @@ class _DrawingPageState extends State<DrawingPage> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.blueGrey, actions: [
-        // todo temp icon only
-        IconButton(
-          icon: const Icon(Icons.edit),
-          onPressed: () {
-            setState(() {
-              eraseractive = !eraseractive;
-            });
-          },
-        )
+        IconMaterialButton(
+          icon: const Icon(FluentIcons.book_open_48_filled),
+          color: const Color.fromRGBO(255, 255, 255, .85),
+          onPressed: () {},
+        ),
+        IconMaterialButton(
+          icon: const Icon(FluentIcons.document_one_page_24_regular),
+          color: const Color.fromRGBO(255, 255, 255, .85),
+          onPressed: () {},
+        ),
+        IconMaterialButton(
+          icon: const Icon(Icons.attachment_outlined),
+          color: const Color.fromRGBO(255, 255, 255, .85),
+          onPressed: () {},
+          rotation: -pi / 4,
+        ),
+        IconMaterialButton(
+          icon: const Icon(Icons.more_vert),
+          color: const Color.fromRGBO(255, 255, 255, .85),
+          onPressed: () {},
+        ),
      ]),
-      body: _buildCanvas(),
+      body: Row(
+        children: [
+          Container(
+            color: const Color(0xff3f3f3f),
+            width: 45,
+            child: Column(
+              children: [
+                const SizedBox(
+                  height: 10,
+                ),
+                IconMaterialButton(
+                  icon: const Iconify(EmojioneMonotone.fountain_pen, color: Color.fromRGBO(255, 255, 255, .85),),
+                  color: const Color.fromRGBO(255, 255, 255, .85),
+                  onPressed: () => setState(() => eraseractive = false),
+                  selected: !eraseractive,
+                  iconSize: 24,
+                ),
+                IconMaterialButton(
+                  icon: const Iconify(Jam.highlighter, color: Color.fromRGBO(255, 255, 255, .85),),
+                  color: const Color.fromRGBO(255, 255, 255, .85),
+                  onPressed: () => setState(() => eraseractive = false),
+                  selected: false,
+                  iconSize: 24,
+                ),
+                IconMaterialButton(
+                  icon: Transform.translate(
+                    offset: const Offset(-2.0, .0),
+                    child: const AdwaitaIcon(AdwaitaIcons.eraser2),
+                  ),
+                  color: const Color.fromRGBO(255, 255, 255, .85),
+                  onPressed: () => setState(() => eraseractive = true),
+                  iconSize: 24,
+                  selected: eraseractive,
+                ),
+                IconMaterialButton(
+                  icon: const Icon(FluentIcons.select_object_24_regular),
+                  color: const Color.fromRGBO(255, 255, 255, .85),
+                  onPressed: () => setState(() => eraseractive = false),
+                  selected: false,
+                  iconSize: 24,
+                ),
+              ],
+            ),
+          ),
+          Expanded(child: RepaintBoundary(child: _buildCanvas())),
+        ],
+      ),
    );
  }

@ -155,6 +219,8 @@ class _DrawingPageState extends State<DrawingPage> {
  Widget _buildCanvas() {
    final size = MediaQuery.of(context).size;

+    final canvasSize = Size(size.width - 45, size.height);
+
    return Listener(
      behavior: HitTestBehavior.opaque,
      onPointerMove: (e) => _onPointerMove(e, size),
@ -218,8 +284,12 @@ class _DrawingPageState extends State<DrawingPage> {
          print('tertiary button');
        },
        child: CustomPaint(
-          painter: MyPainter(strokes: _strokes, offset: offset, zoom: zoom),
-          size: Size.infinite,
+          painter: MyPainter(
+              strokes: _strokes,
+              offset: offset,
+              zoom: zoom,
+              canvasSize: canvasSize),
+          size: canvasSize,
        ),
      ),
    );
--- a/lib/canvas/my_painter.dart
+++ b/lib/canvas/my_painter.dart
@ -12,8 +12,13 @@ class MyPainter extends CustomPainter {
  List<Stroke> strokes;
  double zoom;
  Offset offset;
+  Size canvasSize;

-  MyPainter({required this.strokes, required this.zoom, required this.offset});
+  MyPainter(
+      {required this.strokes,
+      required this.zoom,
+      required this.offset,
+      required this.canvasSize});

  Offset _translatept(Offset pt, Size canvasSize) {
    final scale = calcPageDependentScale(zoom, a4Page, canvasSize);
@ -28,7 +33,10 @@ class MyPainter extends CustomPainter {
      ..color = Colors.blue
      ..strokeCap = StrokeCap.square;

-    canvas.drawColor(const Color(0xff3f3f3f), BlendMode.src);
+    // clipping canvas to reqired size
+    canvas.clipRect(Offset.zero & size);
+
+    canvas.drawColor(const Color(0xff6e6e6e), BlendMode.src);
    canvas.drawRect(
        Rect.fromPoints(_translatept(const Offset(0, .0), size),
            _translatept(a4Page.bottomRight, size)),
--- a/lib/icon_material_button.dart
+++ b/lib/icon_material_button.dart
@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+class IconMaterialButton extends StatelessWidget {
+  const IconMaterialButton(
+      {Key? key,
+      required this.icon,
+      required this.color,
+      required this.onPressed,
+      this.selected,
+      this.iconSize,
+      this.rotation})
+      : super(key: key);
+
+  final Widget icon;
+  final Color color;
+  final void Function() onPressed;
+  final bool? selected;
+  final double? iconSize;
+  final double? rotation;
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: selected ?? false ? const Color(0xff6e6e6e) : Colors.transparent,
+      shape: const CircleBorder(),
+      clipBehavior: Clip.hardEdge,
+      child: IconButton(
+        icon: _buildIcon(),
+        iconSize: iconSize ?? 28,
+        color: color,
+        onPressed: onPressed,
+      ),
+    );
+  }
+
+  Widget _buildIcon() {
+    return rotation == null
+        ? icon
+        : Transform.rotate(
+            angle: rotation!,
+            child: icon,
+          );
+  }
+}
--- a/pubspec.lock
+++ b/pubspec.lock
@ -1,6 +1,13 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  adwaita_icons:
+    dependency: "direct main"
+    description:
+      name: adwaita_icons
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.2.1"
  async:
    dependency: transitive
    description:
@ -36,6 +43,13 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "1.16.0"
+  colorful_iconify_flutter:
+    dependency: transitive
+    description:
+      name: colorful_iconify_flutter
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.0.3"
  cupertino_icons:
    dependency: "direct main"
    description:
@ -43,13 +57,6 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "1.0.5"
-  equations:
-    dependency: "direct main"
-    description:
-      name: equations
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "4.1.0"
  fake_async:
    dependency: transitive
    description:
@ -57,6 +64,13 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "1.3.1"
+  fluentui_system_icons:
+    dependency: "direct main"
+    description:
+      name: fluentui_system_icons
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.185"
  flutter:
    dependency: "direct main"
    description: flutter
@ -69,18 +83,25 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "2.0.1"
+  flutter_svg:
+    dependency: transitive
+    description:
+      name: flutter_svg
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.6"
  flutter_test:
    dependency: "direct dev"
    description: flutter
    source: sdk
    version: "0.0.0"
-  fraction:
-    dependency: transitive
+  iconify_flutter:
+    dependency: "direct main"
    description:
-      name: fraction
+      name: iconify_flutter
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "4.1.4"
+    version: "0.0.5"
  lints:
    dependency: transitive
    description:
@ -116,6 +137,20 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "1.8.2"
+  path_drawing:
+    dependency: transitive
+    description:
+      name: path_drawing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.1"
+  path_parsing:
+    dependency: transitive
+    description:
+      name: path_parsing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.1"
  petitparser:
    dependency: transitive
    description:
@ -177,5 +212,13 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "2.1.2"
+  xml:
+    dependency: transitive
+    description:
+      name: xml
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.1.0"
 sdks:
  dart: ">=2.18.2 <3.0.0"
+  flutter: ">=3.0.0"
--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -35,7 +35,9 @@ dependencies:
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
-  equations: ^4.1.0
+  adwaita_icons: ^0.2.1
+  iconify_flutter: ^0.0.5
+  fluentui_system_icons: ^1.1.185

 dev_dependencies:
  flutter_test: