Creare un signature pad in Flutter con flutter_signature_pad

Come si evince dal nome, flutter_signature_pad è una libreria per Flutter che ci consente di creare un signature pad per prendere la firma degli utenti.

Sulla pagina ufficiale si vede che è compatibile con tutte le piattaforme; io l'ho testo su Linux e Android.

Per installarlo possiamo usare questo comando:

flutter pub add flutter_signature_pad

Qui sotto un esempio della mia schermata:

import 'dart:convert';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_signature_pad/flutter_signature_pad.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setPreferredOrientations(
      [DeviceOrientation.landscapeLeft]);
  runApp(const MyApp());
  // runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ByteData _img = ByteData(0);
  var color = Colors.red;
  var strokeWidth = 5.0;
  final _sign = GlobalKey<SignatureState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.black12,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Signature(
                  color: color,
                  key: _sign,
                  onSign: () {},
                  strokeWidth: strokeWidth,
                ),
              ),
            ),
          ),
          _img.buffer.lengthInBytes == 0
              ? Container()
              : LimitedBox(
                  maxHeight: 200.0,
                  child: Image.memory(
                    _img.buffer.asUint8List(),
                  ),
                ),
          Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.lightGreen,
                    ),
                    onPressed: () async {
                      final sign = _sign.currentState;
                      final image = await sign?.getData();
                      var data = await image?.toByteData(
                          format: ui.ImageByteFormat.png);
                      sign?.clear();
                      // final encoded = base64
                      //     .encode(data?.buffer.asUint8List() as List<int>);
                      setState(() {
                        _img = data!;
                      });
                    },
                    child: const Text(
                      "Salva",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.redAccent,
                    ),
                    onPressed: () {
                      final sign = _sign.currentState;
                      sign?.clear();
                      setState(() {
                        _img = ByteData(0);
                      });
                    },
                    child: const Text(
                      "Pulisci",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ],
              ),
            ],
          )
        ],
      ),
    );
  }
}

Una volta che avete scritto qualcosa potete clicca sul tasto Salva per vedere l'immagine con quello che avete scritto.

Il tasto Pulisci, invece, cancella tutto.

Enjoy!