lukas/notes
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lukas-heiligenbrunner
2022-10-29 12:33:47 +02:00
parent 57cff08218
commit be3b54f258
6 changed files with 206 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
lib/all_notes_page.dart
View File

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

94
lib/canvas/drawing_page.dart
View File

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

12
lib/canvas/my_painter.dart
View File

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

44
lib/icon_material_button.dart Normal file
View File

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