尝试设置最大尺寸时出现 OutlinedButton 异常

Question

我正在尝试创建类似于下图的内容：

我连续用了两个OutlinedButton：

Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          OutlinedButton(
              child: const Icon(
                Icons.arrow_back,
                color: colorBackButton,
              ),
              style: ButtonStyle(
                  fixedSize: MaterialStateProperty.resolveWith(
                      (states) => Size(65.0, 65.0)))),
          Padding(padding: EdgeInsets.only(left: 14.0)),

          OutlinedButton(
                child: Text(
                  'Next',
                  style: GoogleFonts.inter(
                      textStyle: const TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                          color: Colors.white)),
                ),
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.resolveWith((states) {
                    return colorPrimaryButton;
                  }),
                }),

        ])

这让我得到了这个结果：

我尝试用 Sizedbox.expand 包装 Next 按钮，并在按钮样式中添加 minimumSize：

minimumSize: MaterialStateProperty.resolveWith((states) => const Size.fromHeight(55.0))

两个结果都带有 BoxConstraints forces an infinite width. These invalid constraints were provided to RenderPhysicalShape's layout() function by t

深入挖掘异常，是这样写的：

The offending constraints were: BoxConstraints(w=Infinity, 55.0<=h<=Infinity)

如何让 Next 按钮填充整行的 space（当然不包括填充）？

Answer 1

您可以使用 Expanded 小部件包装以获得最大可用量 space。

Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
      OutlinedButton(
        onPressed: () {},
        child: const Icon(
          Icons.arrow_back,
          color: Colors.amber,
        ),
        style: ButtonStyle(
          fixedSize: MaterialStateProperty.resolveWith(
            (states) => const Size(65.0, 65.0),
          ),
        ),
      ),
      Expanded(
        child: Padding(
          padding: const EdgeInsets.only(left: 14.0),
          child: OutlinedButton(
            onPressed: () {},
            child: const Text('Next',
                style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.white)),
            style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.all(Colors.deepPurple),
              fixedSize: MaterialStateProperty.resolveWith(
                (states) => const Size(65.0, 65.0),
              ),
            ),
          ),
        ),
      ),
    ],
  );

你可以玩填充。另外，您可以使用 LayoutBuilder.

Answer 2

尝试使用扩展小部件将下一个按钮包装成这样扩展

Expanded(
          child: OutlinedButton(
            child: Text(
              'Next',
              style: GoogleFonts.inter(
                  textStyle: const TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white)),
            ),
            style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.resolveWith((states) {
                return colorPrimaryButton;
              }),
            }),
        ),

尝试设置最大尺寸时出现 OutlinedButton 异常

OutlinedButton exception when trying to set max size

flutter

flutter-widget