A Simplified, Declarative Implementation Of CustomPaint For Flutter

Related tags

Templates dart flutter
Overview

✍️ Etch

A Simplified, Declarative Implementation Of CustomPaint For Flutter

Features

  • Create your CustomPaint widget declaratively.

    EtchCanvas(
        etchElements: [
            EtchCircle.alignment(
                centerAlignment: Offset.zero,
                radius: 50.0,
            ),
        ],
        child: SizedBox(
          width: 100.0,
          height: 100.0,
        ),
    ),
  • Use either points or alignments to define points everywhere

    EtchCanvas(
        etchElements: [
            EtchCircle(
              center: Offset(100, 100),
              radius: 50.0,
            ),
            EtchCircle.alignment(
               centerAlignment: Offset.zero,
               radius: 50.0,
               etchStyle: EtchStyle(
                   color: Colors.red,
               ),
           ),
        ],
        child: SizedBox(
          width: 100.0,
          height: 100.0,
        ),
    ),
  • Easy support for Paths

    EtchCanvas(
      etchElements: [
        EtchPath(
          etchPathElements: [
            EtchPathMoveTo(point: Offset(0, 0)),
            EtchPathAddPolygon.alignment(
              pointAlignments: [
                Offset(-1, -1),
                Offset(1, -1),
                Offset(1, 1),
              ],
            ),
            EtchPathQuadraticBezierTo.alignment(
              controlPointAlignment: Offset(1, 0.75),
              endPointAlignment: Offset(-1, 1),
            ),
            EtchPathClose(),
          ],
        ),
      ],
      child: SizedBox(
        width: 100.0,
        height: 100.0,
      ),
    ),
  • Work with canvas layers easily

    EtchCanvas(
      etchElements: [
        EtchLayer.rotate(
          rotateZ: 1.2,
          etchElements: [
            EtchRect.alignment(
              topLeftAlignment: Offset(-1, -1),
              bottomRightAlignment: Offset(1, 1),
            ),
          ],
        ),
      ],
      child: SizedBox(
        width: 100.0,
        height: 100.0,
      ),
    ),
  • Easy animations with TweenAnimationBuilder

Add animations easily using TweenAnimationBuilder or using normal animation controllers without having to pass down progress or other logic.

    TweenAnimationBuilder<double>(
      duration: const Duration(seconds: 1),
      tween: Tween(begin: 0, end: 2 * pi),
      builder: (context, val, _) {
        return EtchCanvas(
          etchElements: [
            EtchLayer.rotate(
              rotateZ: val,
              etchElements: [
                EtchRect.alignment(
                  topLeftAlignment: Offset(-1, -1),
                  bottomRightAlignment: Offset(1, 1),
                ),
              ],
            ),
          ],
          child: const SizedBox(
            width: 100.0,
            height: 100.0,
          ),
        );
      }
    ),

Getting started

  • To get started, add an EtchCanvas to your app:
    EtchCanvas(
        etchElements: [],
    ),

Any elements which have the format 'Etch----' can fit into these (EtchParagraph, EtchPath, EtchCircle, etc).

The default constructor arguments usually take in points while the .alignment constructor takes in alignments. For alignments (-1, -1) is the top left while (1, 1) is the bottom right.

    EtchCanvas(
        etchElements: [
            EtchRect.alignment(
              topLeftAlignment: Offset.zero,
              bottomRightAlignment: Offset(1, 1),
            ),
            EtchOval.alignment(
              topLeftAlignment: Offset(-1, -1),
              bottomRightAlignment: Offset(0, 0),
            ),
            EtchArc.alignment(
              topLeftAlignment: Offset(-1, -1),
              bottomRightAlignment: Offset(1, 1),
              startAngle: 0,
              sweepAngle: 2,
            ),
        ],
    ),
  • Use EtchStyle to modify paint properties.
    EtchPath(
      etchPathElements: [
        //...
      ],
      etchStyle: EtchStyle(
        style: PaintingStyle.stroke,
      ),
    ),

You can also supply your own Paint object using EtchStyle.raw().

    EtchPath(
      etchPathElements: [
        //...
      ],
      etchStyle: EtchStyle.raw(
        Paint()..color = Colors.black..// add your props,
      ),
    ),
  • To add a path to the elements, use EtchPath. Etch path elements have the naming format EtchPath--- (EtchPathAddPolygon, EtchPathAddArc, EtchPathCubicTo, etc)
    EtchCanvas(
        etchElements: [
             EtchPath(
                 etchPathElements: [
                     EtchPathMoveTo(point: Offset(0, 0)),
                     EtchPathLine(point: Offset(110, 0)),
                     EtchPathLine(point: Offset(110, 110)),
                     EtchPathClose(),
                 ],
                 etchStyle: EtchStyle(
                     style: PaintingStyle.stroke,
                 ),
             ),
        ],
    ),
  • To add a layer, use the EtchLayer element. This can have numerous EtchElements inside just like the normal EtchCanvas. Layers can have individual transformations without affecting the rest of the canvas - so you can rotate or scale one layer without affecting the others. EtchLayer, like the Transform widget, has multiple inbuilt transformations - but you can pass in your own Matrix4 using the default constructor.
    EtchCanvas(
        etchElements: [
            EtchLayer.rotate(
              rotateX: 1.2,
              etchElements: [
                EtchRect.alignment(
                  topLeftAlignment: Offset(-1, -1),
                  bottomRightAlignment: Offset(1, 1),
                ),
              ],
            ),
            EtchLayer.scale(
              scale: Offset(1, 2),
              etchElements: [
                EtchRect.alignment(
                  topLeftAlignment: Offset(-1, -1),
                  bottomRightAlignment: Offset(1, 1),
                ),
              ],
            ),
            EtchLayer(
              transform: Matrix4.identity(),
              etchElements: [
                EtchRect.alignment(
                  topLeftAlignment: Offset(-1, -1),
                  bottomRightAlignment: Offset(1, 1),
                ),
              ],
            ),
        ],
    ),

Additional information

Note: This package is currently in an experimental stage and full metrics are not yet ascertained. Please feel free to launch issues or PRs if you face something unexpected while using it.

You might also like...

Two-dimensional recursive spatial subdivision: Flutter implementation of d3-quadtree

Two-dimensional recursive spatial subdivision: Flutter implementation of d3-quadtree

d3-quadtree A quadtree recursively partitions two-dimensional space into squares, dividing each square into four equally-sized squares. Each distinct

Nov 26, 2022

Flutter plugin that provides a quick&dirty workaround for incompatibility between VMWare Airwatch MDM solution and Dart Sockets implementation

airwatch_socket_workaround This plugin has been created to enable flutter apps to reach endpoints that are only reachable using a VMWare airwatch per

Nov 11, 2022

🦀🦀 High performance Crypto library of Rust implementation for Flutter

r_crypto Rust backend support crypto flutter library, much faster than Dart-implementation library, light-weight library. Some crypto support hardware

Dec 17, 2022

An implementation for flutter secure file storage

Flutter secure file storage An implementation for flutter secure file storage. F

Oct 29, 2022

A Flutter implementation of splash screen. Supports Android and IOS.

A Flutter implementation of splash screen. Supports Android and IOS.

your_splash A Flutter implementation of splash screen. Supports Android and IOS. Features Supports splash screen with the Future callback Supports spl

Sep 27, 2022

ESP-Touch Dart API for Flutter. Platform-specific implementation for Android (Java) and iOS (Objective-C).

ESP-Touch Dart API for Flutter. Platform-specific implementation for Android (Java) and iOS (Objective-C).

esptouch_flutter Flutter plugin for ESP-Touch to configure network for ESP-8266 and ESP-32 devices. Runs on iOS and Android. esptouch_flutter is Flutt

Dec 10, 2022

Implementation of different design challenges in flutter.

Implementation of different design challenges in flutter.

my_flutter_ui_challenges Different set of screens implemented using flutter. Home Screen Car Rental App Design concept taken from https://www.uplabs.c

Dec 9, 2022

A Flutter implementation of the rough.js library

A Flutter implementation of the rough.js library

Rough Rough is a library that allows you draw in a sketchy, hand-drawn-like style. It's a direct port of Rough.js. Installation In the dependencies: s

Dec 21, 2022

Flutterkotlinlottie - A sample flutter app illustrating the implementation of a lottie splash screen natively through kotlin

Flutterkotlinlottie - A sample flutter app illustrating the implementation of a lottie splash screen natively through kotlin

flutter_lottie_splash_app A Flutter application to demonstrate how to add an ani

Jan 1, 2022
Comments
  • EtchGestureDetector

    EtchGestureDetector

    I would like some sort of easy way to have a callback invoked when a touch is registered within a Etch geometry.

    Not sure the best API design. Hit tests occur even if a cursor is just hovered/moved over a point on the screen I believe, and it is important to distinguish that from actual clicks, I would like to know about both though. Which means the custom paint would need to be wrapped in a GestureDetector or Listener widget or possibly both.

    The main advantage over doing it outside of the etch package is that the transforms and shapes of the geometries are already given to etch, and so it seems natural to defer the bounds / intersection testing to etch as well.

    opened by TimWhiting 1
Releases(v0.2.1)
Owner
Deven Joshi
Google Developer Expert, Flutter | Technical Writer | Speaker
Deven Joshi
An extension to the bloc state management library which lets you create State Machine using a declarative API

An extension to the bloc state management library which lets you create State Machine using a declarative API

null 25 Nov 28, 2022
Get It - Simple direct Service Locator that allows to decouple the interface from a concrete implementation and to access the concrete implementation from everywhere in your App. Maintainer: @escamoteur

❤️ Sponsor get_it This is a simple Service Locator for Dart and Flutter projects with some additional goodies highly inspired by Splat. It can be used

Flutter Community 1k Jan 1, 2023
Flutter firebase auth - Simple implementation of Firebase Authentication using Flutter

FlutterFire Authentication Sample A simple implementation of Firebase Authentica

Souvik Biswas 4 Apr 2, 2022
Sardor Makhmudov 0 Feb 7, 2022
[Flutter SDK V.2] - Youtube Video is a Flutter application built to demonstrate the use of Modern development tools with best practices implementation like Clean Architecture, Modularization, Dependency Injection, BLoC, etc.

[Flutter SDK V.2] - Youtube Video is a Flutter application built to demonstrate the use of Modern development tools with best practices implementation like Clean Architecture, Modularization, Dependency Injection, BLoC, etc.

R. Rifa Fauzi Komara 17 Jan 2, 2023
DropdownButton, ToggleButton & CheckboxListTile implementation in Flutter as a Mobile App Development exercise.

Sort & Filter UI A new Flutter project. Getting Started This project is a starting point for a Flutter application. ⏮ Preview A few resources to get y

Ehmad Saeed⚡ 8 Sep 29, 2021
Interview questions and answers for preparation, built in pure flutter also have CI implementation for learning.

toughest An app for interview preparation. Unique animations. More than 100 questions and answer. Good UI. Featured in many websites. For Vietnam user

Md Sadab Wasim 239 Dec 27, 2022
Backdrop implementation in flutter.

backdrop Backdrop implementation in flutter. This widget is in active development. Any contribution, idea, criticism or feedback is welcomed. NOTE: If

Flutter Community 267 Dec 16, 2022
Firebase dart common interface and implementation for Browser, VM, node and flutter

firebase.dart Firebase dart common interface and implementation for Browser, VM, node and flutter Firebase Initialization Usage in browser import 'pac

Tekartik 6 Nov 28, 2021