将切换按钮扩展到父容器宽度

2024-07-04

有什么办法可以动态地将切换按钮扩展到父容器宽度,无需硬编码任何内容。我找到了一个使用上下文 MediaQuery 的答案,该答案仅适用于全屏宽度。我还尝试将按钮包装在扩展小部件中,但这会引发错误

Container(
  width: 150.0, // hardcoded for testing purpose 
  child: ToggleButtons(
    constraints:
        BoxConstraints.expand(width: MediaQuery.of(context).size.width), // this doesn't work once inside container unless hard coding it
    borderRadius: BorderRadius.circular(5),
    children: [
      ShapeToggleButton(
        text: 'Option1',
      ),
      ShapeToggleButton(
        text: 'Option2',
      ),
    ],
    isSelected: [true, false],
    onPressed: (index) {},
  ),
);

正如上面评论中 psink 所建议的,答案是将其包装在 LayoutBuilder 中

        Container(
              width: 150.0, // hardcoded for testing purpose
              child: LayoutBuilder(builder: (context, constraints) {
        return ToggleButtons(
          renderBorder: false,
          constraints:
              BoxConstraints.expand(width: constraints.maxWidth / 2), //number 2 is number of toggle buttons
          borderRadius: BorderRadius.circular(5),
          children: [
            Text(
              'Option1',
            ),
            Text(
              'Option2',
            ),
          ],
          isSelected: [true, false],
          onPressed: (index) {},
        );
      })))
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将切换按钮扩展到父容器宽度 的相关文章

  • Flutter - SingleChildScrollView 在打开键盘时不会滚动到列底部

    我在应用程序的许多地方使用了 SingleChildScrollView 一切都很好 但是 在下面的场景中 当键盘弹出时 它无法滚动到列的底部 Future
  • 在行内颤动展开列

    I am trying to create this design My code Row mainAxisSize MainAxisSize max crossAxisAlignment CrossAxisAlignment start
  • 颤动 NO_RENEGOTIATION(ssl_lib.cc:1725)错误 268435638

    我不确定为什么我请求的这个 API 仅针对 dart 抛出此错误 由于某种原因 当我尝试发出 POST 请求时 dart 会抛出此错误 未处理的异常 NO RENEGOTIATION ssl lib cc 1725 错误268435638
  • Dart / flutter:下载或读取 Google Drive 文件的内容

    我的 Google 云端硬盘上有一个公共 任何知道链接的人都可以查看 文件 我想在我的 Android 应用程序中使用它的内容 据我目前收集到的信息 我需要 fileID OAuth 令牌和客户端 ID 这些我已经得到了 但我无法弄清楚授权
  • 在 Dart 中调用异步函数而不需要等待,就像启动一个线程一样

    我有两个功能 callee async do something that takes some time caller async await callee 在这种情况下 caller 等到callee 完成 我不想那样 我想caller
  • 显示键盘时如何拦截颤动后退按钮

    我想在颤动中拦截软键盘的后退按钮 因此 当我想通过按后退按钮关闭键盘时 我希望调用一个附加函数 我怎样才能做到这一点 键盘后退按钮 你可以使用键盘可见性 https pub dev packages keyboard visibility
  • 如何解决“Type Null is not a subtype of type ...”错误?

    当我运行下面的代码时 它会将此错误打印到屏幕上 我不知道为什么 Null 类型不是 int 类型的子类型 这是我的 API 数据模型类 class data final int id final String email final Str
  • 错误:未找到 Flutter SDK。在 local.properties 文件中使用 flutter.sdk 定义位置

    ERROR Flutter SDK not found Define location with flutter sdk in the local properties file 我已经导入了 Flutter 示例应用程序mahtab al
  • 单击 AppBar 打开抽屉

    如果您创建一个脚手架 则有一个抽屉选项 如果您现在创建此抽屉 您会自动在应用栏的前导位置获得菜单图标 但我想要另一个图标来打开抽屉 我尝试在主导位置上自己制作一个图标按钮 但该按钮无法打开抽屉 即使使用 Scafold of context
  • Flutter 错误:无法下载 bcprov-jdk15on.jar (org.bouncycastle:bcprov-jdk15on:1.56)

    我无法运行我的第一个 Flutter 应用程序 出现以下错误 Launching lib main dart on Android SDK built for x86 in debug mode Initializing gradle Re
  • Firestore - 意外读取

    各位 我确实遇到了一个有趣的问题 如果你们中的任何人能够帮助我解决这个问题 我将非常高兴 我的应用程序流程是什么 使用电子邮件 密码和其他一些详细信息注册 用户 firebase 以便对用户进行身份验证并通过电子邮件和密码创建帐户 同时我将
  • Dart 中的会话

    通常 dart 文档在几乎任何主题上都有很多有用的示例 不幸的是我在 Dart 中找不到任何关于会话的内容 任何人都可以验证这种方法是否是进行会议的正确方法 浏览器向服务器发送 GET 请求 服务器通过网络客户端响应 Web 客户端发送用户
  • 如何在 Flutter 中使用 http post 多部分请求发送 json 对象

    我必须发送一个包含图像 正文和标头的多部分 HTTP POST 请求 请查找正文格式 body Id Id Details name Name centroid centroid attribute boundaryOpacity boun
  • Flutter - 在容器中显示相机/条形码扫描仪

    我想将相机功能存储在一个单独的容器中 如标题所示 这意味着 如果相机启动 它仅显示在红色容器中 此时我该如何实现这一点 我的屏幕图片 https i stack imgur com R5INL jpg https i stack imgur
  • Dart Set 如何比较项目? [复制]

    这个问题在这里已经有答案了 我刚刚塞了一堆MyClass里面一个Set在达特中 MyClass不实施Comparable 并且没有 运算符定义 它编译得很好 为了这Set为了正确检测重复项 我是否必须实施Comparable接口 或者只是覆
  • Dart Set 如何比较项目? [复制]

    这个问题在这里已经有答案了 我刚刚塞了一堆MyClass里面一个Set在达特中 MyClass不实施Comparable 并且没有 运算符定义 它编译得很好 为了这Set为了正确检测重复项 我是否必须实施Comparable接口 或者只是覆
  • 如何从 Dart 中的字符串中删除换行符?

    如何从 Dart 中的字符串中删除换行符 例如 我想转换 hello nworld to hello world 您可以使用replaceAll 模式 替换 main var multiline hello nworld var singl
  • 如何在 Flutter 中创建过滤后的图像

    我正在尝试创建一个图像过滤器 我想知道的是 是否可以将颜色过滤器应用于图像 然后保存应用了颜色过滤器的图像 如果是的话怎么办 现在我已经能够使用以下代码将滤色器应用于图像 但我们想要的是保存该图像并使其与滤色器一起显示 Container
  • 在 Flutter 的登录屏幕中显示循环进度对话框,如何在 Flutter 中实现进度对话框?

    我有一个登录表单 其中有两个文本字段 用户名 密码 和一个按钮 登录 点击登录按钮后 我将调用 API 我想展示一个CircularProgressIndicator在此 api 调用期间 进度对话框应显示在登录表单的中心和顶部 我努力了F
  • 带有索引堆栈的 Flutter BottomNavigator

    有关使用索引堆栈在选项卡之间导航以显示相关页面的问题 我这样做是为了保持页面的滚动 状态 这很好用 我可以通过单击选项卡来更改显示的当前页面 并且还可以在每个页面内导航 每个页面都包含有它自己的导航器 这是渲染页面的代码 Widget bu

随机推荐