Flutter 插件signature签字使用

Pub插件signature

使用 按官方教程使用

官方使用为竖屏模式，我们大多数需要为横屏模式所以我们需要旋转canvas画布，但旋转画布后宽高不适应，因此我们需要旋转屏幕

1.旋转屏幕代码：需写在生命周期中

@override
  void initState() {
    super.initState();
    _controller.addListener(() => print('Value changed'));
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft, //全屏时旋转方向，左边
    ]);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp, // 结束生命周期旋转回竖屏
    ]);
  }

2.签字后得到的图片路径格式为Uint8List格式，目前我只能转为base64格式，有哪位大佬能转为png或jpg格式路径望指教

final Uint8List data = await _controller.toPngBytes();
final imageEncoded = base64.encode(data); //转换为base64格式
// Uint8List bytes = Base64Decoder().convert(imageEncoded); // 转换为uint8List   byte格式

完整实例

import 'dart:convert';
import 'dart:io';
import 'dart:typed_data';

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

class SignturePage extends StatefulWidget {
  SignturePage({Key key}) : super(key: key);

  @override
  _SignturePageState createState() => _SignturePageState();
}

class _SignturePageState extends State<SignturePage> {
  final SignatureController _controller = SignatureController(
    penStrokeWidth: 1,
    penColor: Colors.black,
    exportBackgroundColor: Colors.white,
    onDrawStart: () => print('onDrawStart called!'),
    onDrawEnd: () => print('onDrawEnd called!'),
  );

  @override
  void initState() {
    super.initState();
    _controller.addListener(() => print('Value changed'));
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft, //全屏时旋转方向，左边
    ]);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 去掉debug图标
      home: Builder(
        builder: (BuildContext context) => Scaffold(
          body: ListView(
            children: <Widget>[
              //SIGNATURE CANVAS
              Signature(
                controller: _controller,
                height: 300,
                backgroundColor: Colors.white,
              ),
              //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();
                          final imageEncoded =
                              base64.encode(data); //转换为base64格式
                          // Uint8List bytes = Base64Decoder()
                          //     .convert(imageEncoded); // 转换为uint8List   byte格式
                          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());
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

注：如本文对你有所帮助，还望三连，谢谢。如有更佳教程，还望大佬指教。