Flutter – Signature View Widget

Last Updated : 26 Apr, 2025

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:

Flutter - TabView Widget

ms471841

Improve

Article Tags :

Flutter – Signature View Widget

How to use

Dart

Step By Step Implementation

Dart

Dart

Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?