Flutter表单处理插件formx_sdk_flutter的使用

Flutter表单处理插件formx_sdk_flutter的使用

简介

formx_sdk_flutter 是一个用于在 Flutter 应用程序中集成 FormX SDK 的插件。FormX SDK 可以帮助开发者更方便地处理表单验证和数据提取等任务。

平台支持

Android iOS MacOS Web Linux Windows
✅ (SDK 26+) ✅ (iOS 14.0+)

安装

pubspec.yaml 文件的 dependencies: 部分添加以下行:

dependencies:
  formx_sdk_flutter: ^1.0.2

然后运行 flutter pub get 来安装依赖。

设置

Android

  1. android/app/build.gradle 中设置 minSdkVersion:
android {
    defaultConfig {
        minSdkVersion 26
    }
}
  1. 将主活动替换为 FlutterFragmentActivity:
class MainActivity: FlutterFragmentActivity() {
}

iOS

  1. 更新 Podfile:
target 'Runner' do

  ....skiped...

  pod 'FormX', :git => 'https://github.com/oursky/formx-sdk.git', tag: '0.3.0'

  ....skiped...
end
  1. 设置最小部署版本为 14.0

示例用法

FormXCameraView

FormXCameraView 是一个原生相机视图,用于检测文档。

  1. 获取相机权限:

要使用 FormXCameraView,必须授予 Camera 权限。建议使用 permission_handler 插件来处理权限请求。

  1. 在 Flutter 应用中使用 FormXCameraView 组件:
Scaffold(
  body: _cameraPermissionStatus == PermissionStatus.granted
      ? FormXCameraView(
          controller: _controller,
          onClose: _onCloseCamera,
          onCaptured: _onCaptured,
          onCaptureError: _onCaptureError,
        )
      : Center(child: Text('Camera permission not granted')),
);

完整示例

以下是完整的示例代码,展示了如何使用 formx_sdk_flutter 插件。

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

import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:formx_sdk_flutter/formx_sdk_flutter.dart';
import 'package:formx_sdk_flutter_example/screens/camera_screen.dart';
import 'package:formx_sdk_flutter_example/screens/extraction_screen.dart';
import 'package:formx_sdk_flutter_example/screens/home_screen.dart';
import 'package:formx_sdk_flutter_example/screens/preview_image_screen.dart';
import 'package:formx_sdk_flutter_example/screens/sdk_methods_demo_screen.dart';
import 'package:go_router/go_router.dart';

Future<void> main() async {
  await dotenv.load();

  final apiHost = dotenv.maybeGet("FORMX_API_HOST", fallback: "")!;
  await FormXSDK.init(
    extractorId: dotenv.env["FORMX_EXTRACTOR_ID"] ?? "<FILL_IN_EXTRACTOR_ID>",
    accessToken: dotenv.env["FORMX_ACCESS_TOKEN"] ?? "<FILL_IN_ACCESS_TOKEN>",
    apiHost: apiHost.isNotEmpty ? apiHost : null,
  );
  runApp(const MyApp());
}

final _router = GoRouter(routes: [
  GoRoute(path: "/", builder: (_, __) => const HomeScreen()),
  GoRoute(
    path: "/sdk_demo",
    builder: (_, __) => const SDKMethodsDemoScreen(),
  ),
  GoRoute(
    path: "/camera",
    builder: (_, __) => const CameraScreen(),
  ),
  GoRoute(
    path: "/preview",
    builder: (_, state) => PreviewImageScreen(state.extra as Uri),
  ),
  GoRoute(
    path: "/extraction",
    builder: (_, state) => ExtractionScreen(state.extra as Uri),
  ),
]);

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

更多关于Flutter表单处理插件formx_sdk_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter表单处理插件formx_sdk_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用 formx_sdk_flutter 插件来处理 Flutter 表单的示例代码。这个插件通常用于简化和增强表单验证及处理。

首先,确保你已经在 pubspec.yaml 文件中添加了 formx_sdk_flutter 依赖:

dependencies:
  flutter:
    sdk: flutter
  formx_sdk_flutter: ^最新版本号

然后,运行 flutter pub get 来安装依赖。

接下来,我们可以创建一个简单的表单,使用 formx_sdk_flutter 来处理输入和验证。

示例代码

import 'package:flutter/material.dart';
import 'package:formx/formx.dart';
import 'package:formx_sdk_flutter/formx_sdk_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FormX SDK Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final _form = FBFormGroup({
    'email': FormXControl<String>(
      validators: [
        Validators.required(),
        Validators.email(),
      ],
    ),
    'password': FormXControl<String>(
      validators: [
        Validators.required(),
        Validators.minLength(6),
      ],
    ),
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FormX SDK Flutter Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormXConsumer(
          formGroup: _form,
          builder: (context, form, child) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FormXField(
                  formControlName: 'email',
                  decoration: InputDecoration(labelText: 'Email'),
                ),
                SizedBox(height: 16),
                FormXField(
                  formControlName: 'password',
                  decoration: InputDecoration(labelText: 'Password'),
                  obscureText: true,
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () async {
                    final isValid = await form.validate();
                    if (isValid) {
                      // Handle valid form submission
                      print('Form is valid');
                      print('Email: ${form.value['email']}');
                      print('Password: ${form.value['password']}');
                    } else {
                      // Handle invalid form
                      print('Form is invalid');
                    }
                  },
                  child: Text('Submit'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

解释

  1. 依赖添加:确保在 pubspec.yaml 中添加了 formx_sdk_flutter 依赖。

  2. 表单定义:在 MyHomePage 中,我们定义了一个 FBFormGroup 实例 _form,其中包含两个字段:emailpassword。每个字段都使用了 FormXControl 并设置了相应的验证器。

  3. 表单渲染:使用 FormXConsumer 包装表单,并在 builder 函数中渲染表单字段。FormXField 用于渲染每个表单控件,并根据 formControlName 绑定到 _form 中的相应控件。

  4. 表单提交:在提交按钮的 onPressed 回调中,调用 form.validate() 来验证表单。如果表单有效,则执行相应的处理逻辑(例如打印表单值);如果无效,则处理无效表单(例如打印提示信息)。

这个示例展示了如何使用 formx_sdk_flutter 来简化 Flutter 表单的处理和验证。你可以根据需要扩展和修改这个示例,以适应你的具体需求。

回到顶部