OutlinedButton exception when trying to set max size

Question

I'm trying to create something like the below image:

I used two OutlinedButton in a row:

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;
                  }),
                }),

        ])

This has led me to this result:

I tried to wrap the Next button with Sizedbox.expand and also add a minimumSize to the button style:

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

Both results with a BoxConstraints forces an infinite width. These invalid constraints were provided to RenderPhysicalShape's layout() function by t

Digging into the exception, it's written:

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

How can I make the Next button fill the entire row's space (discluding the padding of course)?

Solution

You can wrap with Expanded widget to get maximum available 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),
              ),
            ),
          ),
        ),
      ),
    ],
  );

You can play with padding. Also, you can use LayoutBuilder.

Comments

[Avi]

It worked! Thanks. I think the issue was the padding that was supposed to be insied the expanded (as I think using Sizedbox.expande should yield the same result as expanded. Thank you!