Flutter:自定义单选按钮

2024-02-23

How can I create a custom radio button group like this in flutter custom radio in flutter


这是完整的代码

class CustomRadio extends StatefulWidget {
  @override
  createState() {
    return new CustomRadioState();
  }
}

class CustomRadioState extends State<CustomRadio> {
  List<RadioModel> sampleData = new List<RadioModel>();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    sampleData.add(new RadioModel(false, 'A', 'April 18'));
    sampleData.add(new RadioModel(false, 'B', 'April 17'));
    sampleData.add(new RadioModel(false, 'C', 'April 16'));
    sampleData.add(new RadioModel(false, 'D', 'April 15'));
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("ListItem"),
      ),
      body: new ListView.builder(
        itemCount: sampleData.length,
        itemBuilder: (BuildContext context, int index) {
          return new InkWell(
            //highlightColor: Colors.red,
            splashColor: Colors.blueAccent,
            onTap: () {
              setState(() {
                sampleData.forEach((element) => element.isSelected = false);
                sampleData[index].isSelected = true;
              });
            },
            child: new RadioItem(sampleData[index]),
          );
        },
      ),
    );
  }
}

class RadioItem extends StatelessWidget {
  final RadioModel _item;
  RadioItem(this._item);
  @override
  Widget build(BuildContext context) {
    return new Container(
      margin: new EdgeInsets.all(15.0),
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          new Container(
            height: 50.0,
            width: 50.0,
            child: new Center(
              child: new Text(_item.buttonText,
                  style: new TextStyle(
                      color:
                          _item.isSelected ? Colors.white : Colors.black,
                      //fontWeight: FontWeight.bold,
                      fontSize: 18.0)),
            ),
            decoration: new BoxDecoration(
              color: _item.isSelected
                  ? Colors.blueAccent
                  : Colors.transparent,
              border: new Border.all(
                  width: 1.0,
                  color: _item.isSelected
                      ? Colors.blueAccent
                      : Colors.grey),
              borderRadius: const BorderRadius.all(const Radius.circular(2.0)),
            ),
          ),
          new Container(
            margin: new EdgeInsets.only(left: 10.0),
            child: new Text(_item.text),
          )
        ],
      ),
    );
  }
}

class RadioModel {
  bool isSelected;
  final String buttonText;
  final String text;

  RadioModel(this.isSelected, this.buttonText, this.text);
}

To use :

void main() {
  runApp(new MaterialApp(
    home: new CustomRadio(),
  ));
}

Screenshot : enter image description here

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter:自定义单选按钮 的相关文章

随机推荐

  • 在 ASP.NET 应用程序之间传递会话数据

    我们将多个 ASP NET 应用程序部署到几台服务器上 是否有一种标准方法可以重用会话数据或其他一些方法 以便在用户已经通过身份验证的情况下从一个应用程序移动到另一个应用程序时不需要登录到下一个应用程序 我希望有一种你们知道的最佳实践方法
  • 在express js中向同一服务器上的端点发出请求

    在 Express js 服务器上处理请求时 我想调用同一服务器上的端点以填充部分响应 有没有办法可以调用同一服务器上的端点 就像是 app handle abc headers params type GET function err r
  • 如何显示来自搅拌机脚本的消息?

    有没有办法显示一个简单的消息框 其中包含来自搅拌机脚本的文本 例如 如果我在执行过程中遇到错误 Update 该链接不再正式存在 我停止了 Blender 的开发 旧的 2 5 食谱仍然可以在互联网档案馆中找到 https web arch
  • 警告:尝试在其视图不在窗口层次结构中的 * 上呈现 * - swift

    我试图呈现一个ViewController if数据模型中存在任何已保存的数据 但我收到以下错误 警告 尝试在 其视图不在窗口层次结构中呈现 相关代码 override func viewDidLoad super viewDidLoad
  • typescript 自动导入在 Mac 上不起作用

    我有一个项目 我正在添加一些打字稿 但打字稿不会自动导入 我不明白为什么 请参阅下面我的文件结构 tsconfig 和示例 ts配置 compilerOptions target es6 module commonjs declaratio
  • 将列中的 count 个元素插入 R 中的表中

    我在 R 中工作 我有一个矩阵A B and NA值 我想计算有多少A or B or NA每列中的值并将结果插入到表中 我使用下面的代码来计算A B and NA mydata lt matrix c rep A 8 rep B 2 re
  • 在 pydantic 日期时间字段中指定时区 [Python]

    我有一个模型 其中定义了日期时间类型字段 如下所示 class DamBaseModel BaseModel class Config allow population by field name True use enum values
  • Spring REST 中的 SSE 实现

    有人可以提供使用 Spring Rest 的 SSE 服务器发送事件 示例吗 基本上我有一个请求 它的响应将由服务器以多个块的形式发送 我希望在 Spring REST Api 中实现服务器和客户端 而不需要像 jersey 这样的第三方
  • 在我的 iOS 应用程序中添加 PayPal pod 后收到 UIWebview api 弃用消息

    我正在构建一个 iOS 应用程序 并在特定的构建版本上添加了 PayPal pod 然后 当我提交该应用程序进行试飞时 我得到了UIWebview API 弃用消息 ITMS 90809 我正在使用 pod PayPal iOS SDK 进
  • 使用 servlet 获取上下文路径

    jboss web xml 中的上下文路径被提到为 Test 但我的战争文件名是Test 0 0 1 我需要使用这个战争文件名HttpServlet 请告诉我函数名称 我试过getContextPath 但它返回测试 谢谢 以下是可用功能的
  • TypeScript:EventEmitter 子类事件的专用签名

    我有一个基类EventEmitter 其中有on将处理程序绑定到特定事件的方法 class EventEmitter on event string handler Function add handler internally prote
  • 如何在 Chrome 开发工具中显示来自特定域的流量

    我只是想知道是否可以仅在 Chrome 开发工具的 网络 选项卡中显示来自特定域的流量 是的 您可以通过输入domain localhost在过滤框中进行过滤localhost域 例如 Notes 过滤器框具有自动完成功能可以帮助您 这就是
  • 如何将TFLite模型转换为量化TFLite模型?

    我有一个 tflite 文件 我想对其进行量化 如何将TFLite模型转换为量化TFLite模型 请注意 您需要源模型来对其进行量化 由于 tflite 模型格式的限制 无法对其进行量化 您的源模型可以是 TF saving model K
  • 跨版本后缀冲突(sbt、Scala-STM、Play-JSON)

    我使用的 JSON 扩展依赖于 Mandubian 的 play json 2 2 SNAPSHOT 一切都很顺利 直到现在我有了一个基于 Scala STM 的项目 sbt 报告以下问题 error Modules were resolv
  • 在移动设备或桌面导航栏时显示汉堡菜单

    我正在进行移动优先设计 并使用 CSS 和 jQuery 制作了一个我非常喜欢的下拉汉堡菜单 但我想做的是 当页面显示在桌面上时 使该汉堡菜单消失 并替换为常规的水平菜单导航栏 我能够使菜单响应 所以至少有一个水平导航栏可以在桌面上下拉 而
  • css 两行1列框布局

    我一直在使用 Flexbox 进行两行一列布局 我使用 Flexbox 是因为我认为 css2 1 无法填充 box B 的剩余空间 在我的 jsFiddle 示例中 我无法让 box C 在右侧向上移动 也无法让 box B 垂直弯曲并填
  • 无需用户凭据的身份验证

    我正在组建一个个人 React 站点 并希望将请求发送到 AWS API 网关 然而 我只想my site能够提取数据 不会有用户模型 并且我曾经使用过的每个身份验证模型都要求用户通过登录执行某些操作 无论是用户 密码还是 AD 有人可以指
  • android-NestDK 卡住了 pincode

    我正在尝试弄清楚如何将我的 NestDK 应用程序连接到 Nest API 使用我的用户名和密码登录后 我收到 使用此 Pincode 连接 Nest XXXXXX 我该怎么办 我预计 access token 请求会在后台发生 但我卡在了
  • Windows Phone:如何禁用 ScrollViewer(列表框)中的触摸滚动?

    我有一个滚动查看器 里面有一个列表框 我需要通过触摸禁用垂直滚动 我该怎么办 换句话说 用户无法通过触摸滚动 我已经放置了按钮 但这是另一个故事
  • Flutter:自定义单选按钮

    How can I create a custom radio button group like this in flutter 这是完整的代码 class CustomRadio extends StatefulWidget overr