diff --git a/lib/all_notes_page.dart b/lib/all_notes_page.dart index 096436a..9448630 100644 --- 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 { 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, diff --git a/lib/canvas/drawing_page.dart b/lib/canvas/drawing_page.dart index b5d43ac..0980b2a 100644 --- 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 { 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 { 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 { 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, ), ), ); diff --git a/lib/canvas/my_painter.dart b/lib/canvas/my_painter.dart index bae0b73..cc94d60 100644 --- a/lib/canvas/my_painter.dart +++ b/lib/canvas/my_painter.dart @@ -12,8 +12,13 @@ class MyPainter extends CustomPainter { List 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)), diff --git a/lib/icon_material_button.dart b/lib/icon_material_button.dart new file mode 100644 index 0000000..11618a9 --- /dev/null +++ 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, + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index eef9558..6fe185f 100644 --- 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" diff --git a/pubspec.yaml b/pubspec.yaml index e983850..2a6f796 100644 --- 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: