Flutter表单与分享功能插件modern_form_esys_flutter_share的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter表单与分享功能插件modern_form_esys_flutter_share的使用

简介

modern_form_esys_flutter_share 是一个用于在Flutter应用中与其他应用程序共享文件和文本的插件。它是从 esys_flutter_share 分支出来的，以支持空安全（null-safety）。

重要提示

  • iOS项目注意事项：如果你是一个新的Flutter项目，请使用 flutter create -i swift 创建项目，否则可能会遇到以下错误：
    The "Swift Language Version" (SWIFT_VERSION) build setting must be set to a supported value for targets which use Swift. Supported values are: 3.0, 4.0, 4.2.
    如果你仍然遇到问题，可以尝试编辑 Podfile 文件如下：
    target 'Runner' do
  use_frameworks!  # required by simple_permission
  ...
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['SWIFT_VERSION'] = '4.0'  # required by simple_permission
      config.build_settings['ENABLE_BITCODE'] = 'NO'
    end
  end
end

使用方法

  1. 导入插件 在你的Dart文件中导入 modern_form_esys_flutter_share：

    import 'package:modern_form_esys_flutter_share/modern_form_esys_flutter_share.dart';

  2. 分享文本 你可以使用 Share.text 方法来分享文本：

    Share.text('my text title', 'This is my text to share with other applications.', 'text/plain');

  3. 分享文件 你可以使用 Share.file 方法来分享文件。例如，分享一个图片文件：

    final ByteData bytes = await rootBundle.load('assets/image1.png');
await Share.file('esys image', 'esys.png', bytes.buffer.asUint8List(), 'image/png', text: 'My optional text.');

  4. 分享多个文件 你可以使用 Share.files 方法来分享多个文件。例如，分享多个图片文件：

    final ByteData bytes1 = await rootBundle.load('assets/image1.png');
final ByteData bytes2 = await rootBundle.load('assets/image2.png');

await Share.files(
    'esys images',
    {
      'esys.png': bytes1.buffer.asUint8List(),
      'bluedan.png': bytes2.buffer.asUint8List(),
    },
    'image/png');

  5. 从URL分享文件 你可以从网络URL加载文件并进行分享。例如，分享一个图片文件：

    var request = await HttpClient().getUrl(Uri.parse('https://shop.esys.eu/media/image/6f/8f/af/amlog_transport-berwachung.jpg'));
var response = await request.close();
Uint8List bytes = await consolidateHttpClientResponseBytes(response);
await Share.file('ESYS AMLOG', 'amlog.jpg', bytes, 'image/jpg');

完整示例Demo

以下是一个完整的示例代码，展示了如何使用 modern_form_esys_flutter_share 插件来实现不同的分享功能：

import 'dart:async';
import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:modern_form_esys_flutter_share/modern_form_esys_flutter_share.dart';

void main() => runApp(MaterialApp(
      home: MyHomePage(),
    ));

class MyHomePage extends StatefulWidget {
  MyHomePage();

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Modern Form Esys Share Plugin Sample'),
        ),
        body: Container(
            padding: const EdgeInsets.all(20.0),
            child: ListView(
              children: <Widget>[
                MaterialButton(
                  child: Text('Share text'),
                  onPressed: () async => await _shareText(),
                ),
                MaterialButton(
                  child: Text('Share image'),
                  onPressed: () async => await _shareImage(),
                ),
                MaterialButton(
                  child: Text('Share images'),
                  onPressed: () async => await _shareImages(),
                ),
                MaterialButton(
                  child: Text('Share CSV'),
                  onPressed: () async => await _shareCSV(),
                ),
                MaterialButton(
                  child: Text('Share mixed'),
                  onPressed: () async => await _shareMixed(),
                ),
                MaterialButton(
                  child: Text('Share image from url'),
                  onPressed: () async => await _shareImageFromUrl(),
                ),
              ],
            )));
  }

  Future<void> _shareText() async {
    try {
      // 分享文本
      Share.text('my text title', 'This is my text to share with other applications.', 'text/plain');
    } catch (e) {
      print('error: $e');
    }
  }

  Future<void> _shareImage() async {
    try {
      // 分享单个图片文件
      final ByteData bytes = await rootBundle.load('assets/image1.png');
      await Share.file(
          'esys image', 'esys.png', bytes.buffer.asUint8List(), 'image/png',
          text: 'My optional text.');
    } catch (e) {
      print('error: $e');
    }
  }

  Future<void> _shareImages() async {
    try {
      // 分享多个图片文件
      final ByteData bytes1 = await rootBundle.load('assets/image1.png');
      final ByteData bytes2 = await rootBundle.load('assets/image2.png');

      await Share.files(
          'esys images',
          {
            'esys.png': bytes1.buffer.asUint8List(),
            'bluedan.png': bytes2.buffer.asUint8List(),
          },
          'image/png');
    } catch (e) {
      print('error: $e');
    }
  }

  Future<void> _shareCSV() async {
    try {
      // 分享CSV文件
      final ByteData bytes = await rootBundle.load('assets/addresses.csv');
      await Share.file(
          'addresses', 'addresses.csv', bytes.buffer.asUint8List(), 'text/csv');
    } catch (e) {
      print('error: $e');
    }
  }

  Future<void> _shareMixed() async {
    try {
      // 分享混合文件类型
      final ByteData bytes1 = await rootBundle.load('assets/image1.png');
      final ByteData bytes2 = await rootBundle.load('assets/image2.png');
      final ByteData bytes3 = await rootBundle.load('assets/addresses.csv');

      await Share.files(
          'esys images',
          {
            'esys.png': bytes1.buffer.asUint8List(),
            'bluedan.png': bytes2.buffer.asUint8List(),
            'addresses.csv': bytes3.buffer.asUint8List(),
          },
          '*/*',
          text: 'My optional text.');
    } catch (e) {
      print('error: $e');
    }
  }

  Future<void> _shareImageFromUrl() async {
    try {
      // 从URL分享图片文件
      var request = await HttpClient().getUrl(Uri.parse(
          'https://shop.esys.eu/media/image/6f/8f/af/amlog_transport-berwachung.jpg'));
      var response = await request.close();
      Uint8List bytes = await consolidateHttpClientResponseBytes(response);
      await Share.file('ESYS AMLOG', 'amlog.jpg', bytes, 'image/jpg');
    } catch (e) {
      print('error: $e');
    }
  }
}

更多关于Flutter表单与分享功能插件modern_form_esys_flutter_share的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter表单与分享功能插件modern_form_esys_flutter_share的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用modern_form和esys_flutter_share插件来实现表单和分享功能的代码示例。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加modern_form和esys_flutter_share的依赖：

dependencies:
  flutter:
    sdk: flutter
  modern_form: ^x.y.z  # 请将x.y.z替换为最新版本号
  esys_flutter_share: ^x.y.z  # 请将x.y.z替换为最新版本号

然后在你的项目根目录下运行flutter pub get来安装依赖。

2. 使用modern_form创建表单

在你的Dart文件中，使用modern_form包来创建一个简单的表单。例如：

import 'package:flutter/material.dart';
import 'package:modern_form/modern_form.dart';

class MyFormScreen extends StatefulWidget {
  @override
  _MyFormScreenState createState() => _MyFormScreenState();
}

class _MyFormScreenState extends State<MyFormScreen> {
  final _formKey = GlobalKey<FormState>();
  String? _name;
  String? _email;

  void _submit() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      // 在这里处理表单数据，例如分享
      _shareFormData();
    }
  }

  void _shareFormData() {
    final RenderBox box = context.findRenderObject();
    Share.share(
      'Name: $_name\nEmail: $_email',
      sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              ModernFormTextField(
                labelText: 'Name',
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your name';
                  }
                  return null;
                },
                onSaved: (value) {
                  _name = value;
                },
              ),
              ModernFormTextField(
                labelText: 'Email',
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value == null || value.isEmpty || !value.contains('@')) {
                    return 'Please enter a valid email';
                  }
                  return null;
                },
                onSaved: (value) {
                  _email = value;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submit,
                child: Text('Submit & Share'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 使用esys_flutter_share进行分享

在上面的代码中，_shareFormData方法用于分享表单数据。Share.share方法接受一个字符串作为要分享的内容，并可选地接受一个sharePositionOrigin参数，用于指定分享按钮的位置。

4. 完整示例

将上述代码片段整合到一个完整的Flutter应用中：

import 'package:flutter/material.dart';
import 'package:modern_form/modern_form.dart';
import 'package:esys_flutter_share/esys_flutter_share.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Form and Share Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyFormScreen(),
    );
  }
}

class MyFormScreen extends StatefulWidget {
  @override
  _MyFormScreenState createState() => _MyFormScreenState();
}

class _MyFormScreenState extends State<MyFormScreen> {
  final _formKey = GlobalKey<FormState>();
  String? _name;
  String? _email;

  void _submit() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      // 在这里处理表单数据，例如分享
      _shareFormData();
    }
  }

  void _shareFormData() {
    final RenderBox box = context.findRenderObject();
    Share.share(
      'Name: $_name\nEmail: $_email',
      sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              ModernFormTextField(
                labelText: 'Name',
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your name';
                  }
                  return null;
                },
                onSaved: (value) {
                  _name = value;
                },
              ),
              ModernFormTextField(
                labelText: 'Email',
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value == null || value.isEmpty || !value.contains('@')) {
                    return 'Please enter a valid email';
                  }
                  return null;
                },
                onSaved: (value) {
                  _email = value;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submit,
                child: Text('Submit & Share'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何使用modern_form创建表单，并使用esys_flutter_share进行分享。你可以根据实际需求进一步定制和扩展这些功能。

回到顶部