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

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(
+            IconMaterialButton(
-              color: Colors.transparent,
+              icon: const Icon(Icons.picture_as_pdf_outlined),
-              shape: const CircleBorder(),
+              color: const Color.fromRGBO(255, 255, 255, .85),
-              clipBehavior: Clip.hardEdge,
+              onPressed: () {},
-              child: IconButton(
-                icon: const Icon(Icons.picture_as_pdf_outlined),
-                iconSize: 28,
-                color: const Color.fromRGBO(255, 255, 255, .85),
-                onPressed: () {},
-              ),
             ),
-            Material(
+            IconMaterialButton(
-              color: Colors.transparent,
+              icon: const Icon(Icons.search),
-              shape: const CircleBorder(),
+              color: const Color.fromRGBO(255, 255, 255, .85),
-              clipBehavior: Clip.hardEdge,
+              onPressed: () {},
-              child: IconButton(
-                icon: const Icon(Icons.search),
-                iconSize: 28,
-                color: const Color.fromRGBO(255, 255, 255, .85),
-                onPressed: () {},
-              ),
             ),
-            Material(
+            IconMaterialButton(
-              color: Colors.transparent,
+              icon: const Icon(Icons.more_vert),
-              shape: const CircleBorder(),
+              color: const Color.fromRGBO(255, 255, 255, .85),
-              clipBehavior: Clip.hardEdge,
+              onPressed: () {},
-              child: IconButton(
-                icon: const Icon(Icons.more_vert),
-                iconSize: 28,
-                color: const Color.fromRGBO(255, 255, 255, .85),
-                onPressed: () {},
-              ),
             ),
             const SizedBox(
               width: 15,

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
+        IconMaterialButton(
-        IconButton(
+          icon: const Icon(FluentIcons.book_open_48_filled),
-          icon: const Icon(Icons.edit),
+          color: const Color.fromRGBO(255, 255, 255, .85),
-          onPressed: () {
+          onPressed: () {},
-            setState(() {
+        ),
-              eraseractive = !eraseractive;
+        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),
+          painter: MyPainter(
-          size: Size.infinite,
+              strokes: _strokes,
+              offset: offset,
+              zoom: zoom,
+              canvasSize: canvasSize),
+          size: canvasSize,
         ),
       ),
     );

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)),

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,
+          );
+  }
+}

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:
+  iconify_flutter:
-    dependency: transitive
+    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"

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: