Flutter选择题单选插件mcq_radio的使用

Flutter选择题单选插件mcq_radio的使用

MCQRadio

MCQRadio 是一个 Flutter 包，它提供了一个可自定义的单选按钮组件，用于多选题（MCQs），基于 Flutter 的 Radio 组件。它允许开发者创建一个带有字母中心的单选按钮，并可以自定义按钮及其文本的颜色、大小和样式。

特性

• 创建一个带有字母中心的单选按钮
• 自定义按钮及其文本的颜色、大小和样式
• 支持深色和浅色主题
• 与 Flutter 的 Material Design 无缝集成

开始使用

要使用 MCQRadio，首先需要将其添加到你的依赖项中：

在 pubspec.yaml 文件中添加以下内容：

dependencies:
  mcq_radio: ^1.0.0

然后在终端中运行 flutter pub get 来下载并安装包。

在 Dart 代码中导入包：

import 'package:mcq_radio/mcq_radio.dart';

使用方法

使用 MCQRadio 组件来创建单选按钮。以下是一个示例：

const one = "ক";
const two = "খ";
const three = "গ";
const four = "ঘ";
const five = "ঙ";
const unanswered = "";

enum OptionTitles { one, two, three, four, five, unanswered }

OptionTitles _optionTitle = OptionTitles.unanswered;

MCQRadio<OptionTitles>(
    fillColor: MaterialStateColor.resolveWith(
        (states) => Colors.black), // 单选按钮的颜色
    value: OptionTitles.one, // 单选按钮的值 (枚举) 例如 ক, খ, গ, ঘ, ঙ 等
    groupValue: _optionTitle, // 当前选中的单选按钮的值
    mcqOptionAlphabetStyle: const TextStyle(
        fontSize: 20,
        fontFamily: "SolaimanLipi",
        color: Colors.black, // 单选按钮字母的颜色
    ), // 单选按钮文本的样式
    circleRadius: 20, // 单选按钮的半径
    mcqOptionAlphabet: one,
    onChanged: (OptionTitles? value) {
        setState(() {
        _optionTitle = value!;
        });
    },
);

示例代码

以下是完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  static const String _title = 'MCQ Radio buttons Example';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.black,
        colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.black),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text(_title),
          backgroundColor: Colors.amber[900],
        ),
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

const one = "ক";
const two = "খ";
const three = "গ";
const four = "ঘ";
const five = "ঙ";
const unanswered = "";

enum OptionTitles { one, two, three, four, five, unanswered }

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  OptionTitles _optionTitle = OptionTitles.unanswered;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        const Padding(
          padding: EdgeInsets.all(8.0),
          child: Text(
            "1. Which one is the capital of Bangladesh?",
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              fontFamily: "SolaimanLipi",
            ),
          ),
        ),
        MCQRadio<OptionTitles>(
          fillColor: MaterialStateColor.resolveWith(
              (states) => Colors.black), // 单选按钮的颜色
          value: OptionTitles.one, // 单选按钮的值 (枚举) 例如 ক, খ, গ, ঘ, ঙ 等
          groupValue: _optionTitle, // 当前选中的单选按钮的值
          mcqOptionAlphabetStyle: const TextStyle(
            fontSize: 20,
            fontFamily: "SolaimanLipi",
            color: Colors.black, // 单选按钮字母的颜色
          ), // 单选按钮文本的样式
          circleRadius: 20, // 单选按钮的半径
          mcqOptionAlphabet: one,
          onChanged: (OptionTitles? value) {
            setState(() {
              _optionTitle = value!;
            });
          },
        ),
        MCQRadio<OptionTitles>(
          fillColor: MaterialStateColor.resolveWith((states) => Colors.black),
          value: OptionTitles.two,
          groupValue: _optionTitle,
          mcqOptionAlphabet: two,
          onChanged: (OptionTitles? value) {
            setState(() {
              _optionTitle = value!;
            });
          },
        ),
        MCQRadio<OptionTitles>(
          fillColor: MaterialStateColor.resolveWith((states) => Colors.black),
          value: OptionTitles.three,
          groupValue: _optionTitle,
          mcqOptionAlphabet: three,
          onChanged: (OptionTitles? value) {
            setState(() {
              _optionTitle = value!;
            });
          },
        ),
        MCQRadio<OptionTitles>(
          fillColor: MaterialStateColor.resolveWith((states) => Colors.black),
          value: OptionTitles.four,
          groupValue: _optionTitle,
          mcqOptionAlphabet: four,
          onChanged: (OptionTitles? value) {
            setState(() {
              _optionTitle = value!;
            });
          },
        ),
        MCQRadio<OptionTitles>(
          fillColor: MaterialStateColor.resolveWith((states) => Colors.black),
          value: OptionTitles.five,
          groupValue: _optionTitle,
          mcqOptionAlphabet: five,
          onChanged: (OptionTitles? value) {
            print(value);
            setState(() {
              _optionTitle = value!;
            });
          },
        ),
      ],
    );
  }
}