Flutter signature upload to firebase storage

Viewed 276

I'm creating a form app and I need to savethe signature in database. I don't know what to save this signature plugin from the pub.dev, can someone help me with this? I can't find something in google. I have this seperated code, I'm trying to save it to firebase storage.

   import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:signature/signature.dart';

/// example widget showing how to use signature widget
class Sig extends StatefulWidget {
  @override
  _SigState createState() => _SigState();
}

class _SigState extends State<Sig> {
  final SignatureController _controller = SignatureController(
    penStrokeWidth: 1,
    penColor: Colors.red,
    exportBackgroundColor: Colors.white,
  );

  @override
  void initState() {
    super.initState();
    _controller.addListener(() => print('Value changed'));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (BuildContext context) => Scaffold(
          body: ListView(
            children: <Widget>[
              Signature(
                controller: _controller,
                height: 300,
                backgroundColor: Colors.lightBlueAccent,
              ),
              //OK AND CLEAR BUTTONS
              Container(
                decoration: const BoxDecoration(color: Colors.black),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    //SHOW EXPORTED IMAGE IN NEW ROUTE
                    IconButton(
                      icon: const Icon(Icons.check),
                      color: Colors.blue,
                      onPressed: () async {
                        if (_controller.isNotEmpty) {
                          final Uint8List data = await _controller.toPngBytes();
                          if (data != null) {
                            await Navigator.of(context).push(
                              MaterialPageRoute<void>(
                                builder: (BuildContext context) {
                                  return Scaffold(
                                    appBar: AppBar(),
                                    body: Center(
                                      child: Container(
                                        color: Colors.grey[300],
                                        child: Image.memory(data),
                                      ),
                                    ),
                                  );
                                },
                              ),
                            );
                          }
                        }
                      },
                    ),
                    //CLEAR CANVAS
                    IconButton(
                      icon: const Icon(Icons.clear),
                      color: Colors.blue,
                      onPressed: () {
                        setState(() => _controller.clear());
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I want to upload it in firebase storage and also view it from firebase storage but I don't know how to do it.

1 Answers

If the plugin that are you are using can export the data to coordinates point, maybe you can store the signature on the database without any problems. You can check this for a possible solution:

Changing colour of CustomPaint changes for all previous points

I see this on your code:

final Uint8List data = await _controller.toPngBytes();

So maybe you can check if this data can be exported as a coordinate points or maybe as a base64 image in order to save it on a database.

I hope this can be helpful.

Related