Flutter – Signature View Widget
Last Updated :
31 Oct, 2022
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() {
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) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
title: 'Flutter - Signature View' ,
theme: ThemeData(primarySwatch: Colors.green),
home: Scaffold(
appBar: AppBar(
title: Text( "Signature View" ),
),
body: SignatureView(
backgroundColor: Colors.white30,
penStyle: Paint()
..color = Color.fromARGB(255, 9, 150, 84)
..strokeCap = StrokeCap.round
..strokeWidth = 5.0,
onSigned: (data) {
print( "On change $data" );
},
),
),
);
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...