Flutter问卷调查插件survey_form的使用

Flutter问卷调查插件survey_form的使用

survey_form包

survey_form 包是一个全面的解决方案，用于创建问卷调查表单。

特性

• 问卷调查页面：该包包含几个页面，如 survey_form.dart、survey_form_boundary_view.dart 和 survey_form_view.dart，这些页面提供了创建问卷调查表单的用户界面。

  

  

  

  

• 问卷调查BLoCs：它提供了多种BLoCs用于状态管理，使用了BLoC模式。这些BLoCs处理了问卷调查表单的业务逻辑。

• 问卷调查模型：定义了各种数据模型，如 ServiceModel 和 ServiceDefinitionModel 等，用于问卷调查表单的创建过程。

• 问卷调查仓库：该包提供了抽象类作为数据仓库，如 ServiceDefinitionLocalRepository、ServiceLocalRepository、ServiceDefinitionRemoteRepository 和 ServiceRemoteRepository，可以扩展以创建不同服务模型的数据仓库。它还包括错误处理，如 InvalidApiResponseException。

入门指南

要使用此包，请将以下依赖项添加到您的 pubspec.yaml 文件中：

dependencies:
  survey_form: ^any

使用方法

要导航到任何屏幕，请首先将 survey_form_router 添加到您的主应用路由中：

context.router.push(SurveyFormWrapperRoute());

SurveyForm 包需要从主应用传递以下数据：

String _projectId = '';
String _projectName = '';
String _loggedInIndividualId = '';
String _loggedInUserUuid = '';
String _appVersion = '';
String _tenantId = '';
Object _roles;
bool _isHealthFacilityWorker;
BoundaryModel? _boundaryModel;
PersistenceConfiguration _persistenceConfiguration;

完整示例

以下是一个完整的示例代码，展示了如何使用 survey_form 包。

import 'dart:convert';

import 'package:digit_ui_components/digit_components.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:survey_form/blocs/app_localization.dart';
import 'package:survey_form/blocs/survey_form_localization_delegate.dart';
import 'package:survey_form/pages/acknowledgement.dart';

import 'localizedString.dart';

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

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Survey Form Package Example'),
    );
  }
}

Future<List> loadLocalizedStrings() async {
  String jsonString = await rootBundle.loadString('lib/data.json');
  // 解码JSON字符串
  List<dynamic> jsonList = jsonDecode(jsonString);

  // 将动态列表转换为LocalizedString对象列表
  return jsonList
      .map((jsonItem) => LocalizedString.fromJson(jsonItem))
      .toList();
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  late Future<dynamic> localizedStrings;
  final languages = [
    {"label": "PORTUGUÊS", "value": "pt_MZ"},
    {"label": "FRENCH", "value": "fr_MZ"},
    {"label": "ENGLISH", "value": "en_MZ"}
  ];

  [@override](/user/override)
  void initState() {
    super.initState();
    localizedStrings = loadLocalizedStrings();

    SurveyFormLocalizationDelegate delegate =
        SurveyFormLocalizationDelegate(localizedStrings, languages);
    delegate.load(const Locale("en", "MZ"));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: SizedBox(
          width: 300,
          child: DigitButton(
            label: "Acknowledgement Page",
            size: DigitButtonSize.large,
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (BuildContext context) =>
                      SurveyFormAcknowledgementPage(
                        appLocalizations: SurveyFormLocalization(
                            const Locale("en", "MZ"),
                            localizedStrings,
                            languages),
                      )));
            },
            type: DigitButtonType.primary,
          ),
        ),
      ),
    );
  }
}