Flutter – Signature View Widget

Signature View is the widget in Flutter, Where we can write anything just like Microsoft Paint, This widget is useful in the scenario where are building the tutorial Application.  The signature plugin serves as a place to paint your signature and export it to many different types to store. A sample video is given below to get an idea about what we are going to do in this article.

How to use

Dart

SignatureView _signatureView = SignatureView(
      backgroundColor: Colors.white,
      penStyle: Paint()
        ..color = Colors.green
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5.0,
      onSigned: (signdata) {
        print("On change $signdata");
      },
    );

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package in the pubspec.yaml File

Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder.

From the command line:

Dart

flutter pub add flutter_signature_view

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get)

Alternatively, your editor might support flutter pub get.

Step 3: We can simply use this widget in the body of the scaffold, and assign its parameter like background color, penStyle etc.,

Dart

import 'package:flutter/material.dart';
import 'package:flutter_signature_view/flutter_signature_view.dart';

void main() {
  // main method calls the runApp that
  // takes the class as a parameter
  runApp(RunMyApp());
}

class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  @override
  Widget build(BuildContext context) {
    // materialApp building block of the app
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // title of the app
      title: 'Flutter - Signature View',
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        // appbar with title
        appBar: AppBar(
          title: Text("Signature View"),
        ),
        // Signature widget that
        // we are implement
        body: SignatureView(
          // canvas color
          backgroundColor: Colors.white30,
          penStyle: Paint()
            // pen color
            ..color = Color.fromARGB(255, 9, 150, 84)
              // type of pen point circular or rounded
            ..strokeCap = StrokeCap.round
              // pen pointer width
            ..strokeWidth = 5.0,
          // data of the canvas
          onSigned: (data) {
            print("On change $data");
          },
        ),
      ),
    );
  }
}

Output: