OutlinedButton exception when trying to set max size - flutter

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)?

Answer 1

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.

Answer 2

try use expanded widget Wrap next button with expanded like that
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;
}),
}),
),