Flutter输入表单插件input_sheet的使用

flutter-input-sheet 是一个用于在 Flutter 中实现输入表单的插件。它通过将输入框嵌入到底部弹出的表单中，使得表单设计更加简洁和直观。该插件支持多种输入类型，如文本、长文本、日期、时间、选项选择等，并且提供了丰富的组件来展示表单数据。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  input_sheet: <最新版本>

还需要添加其他依赖项以支持某些输入类型（如照片和视频）：

dependencies:
  camera: ^0.5.8+1
  video_compress: ^2.0.0
  flutter_cupertino_date_picker: ^1.0.12

iOS 权限配置

在 Info.plist 文件中添加相机和麦克风权限：

<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
<key>NSMicrophoneUsageDescription</key>
<string>Can I use the mic please?</string>

Android 权限配置

在 AndroidManifest.xml 文件中添加相机和存储权限：

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="18" />

特性

• 文本输入
• 长文本输入
• 掩码输入（如电话号码）
• 数字输入
• 日期选择
• 时间选择
• 日期时间选择
• 单选选项
• 多选选项
• 照片上传
• 视频录制

基本组件

flutter-input-sheet 提供了一些基本组件来展示表单数据，例如：

• IpsCard：卡片式布局展示表单字段。
• IpsLabel：标签组件。
• IpsError：错误提示组件。
• IpsIcon：图标组件。
• IpsValue：值展示组件。
• IpsPhoto：照片预览组件。
• IpsVideo：视频预览组件。

示例代码

以下是一个完整的简单示例，展示了如何使用 flutter-input-sheet 插件创建一个包含多种输入类型的表单。

完整代码

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

import 'package:flutter/material.dart';
import 'package:input_sheet/input_sheet.dart';
import 'package:input_sheet/components/IpsCard.dart';
import 'package:input_sheet/components/IpsError.dart';
import 'package:input_sheet/components/IpsIcon.dart';
import 'package:input_sheet/components/IpsLabel.dart';
import 'package:input_sheet/components/IpsPhoto.dart';
import 'package:input_sheet/components/IpsValue.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Input Sheet Demo',
      home: MyHomePage(title: 'Input Sheet Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String _name;
  File _photo;
  Uint8List _thumbnailVideo;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(25),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 名称输入
              IpsCard(
                label: IpsLabel("Name"),
                value: IpsValue(_name ?? "Touch to edit..."),
                icon: IpsIcon(Icons.person),
                onClick: () => InputSheet(
                  context,
                  label: "Name",
                  cancelText: "Cancel",
                  doneText: "Confirm",
                ).text(
                  placeholder: "Type here...",
                  value: _name,
                  onDone: (dynamic value) => setState(() {
                    _name = value;
                  }),
                ),
              ),
              SizedBox(height: 25),

              // 照片上传
              IpsCard(
                label: IpsLabel("Upload Photo"),
                value: IpsPhoto(
                  file: _photo,
                  onClick: () => InputSheet(
                    context,
                    cancelText: "Cancel",
                    doneText: "Confirm",
                  ).photo(
                    file: _photo,
                    onDone: (File file, Uint8List thumbnail) =>
                        setState(() {
                      _photo = file;
                    }),
                  ),
                ),
              ),
              SizedBox(height: 25),

              // 视频录制
              IpsCard(
                label: IpsLabel("Record Video"),
                value: IpsVideo(
                  thumbnail: _thumbnailVideo,
                  onClick: () => InputSheet(
                    context,
                    cancelText: "Cancel",
                    doneText: "Confirm",
                  ).video(
                    file: _video,
                    onDone: (File file, Uint8List thumbnail) =>
                        setState(() {
                      _video = file;
                      _thumbnailVideo = thumbnail;
                    }),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}