Flutter responsive design: Dynamically change Column to Row if the screen is larger
Row
and Column
share a common parent called Flex
that takes an axis direction. Simply by changing the value of direction
you can change a Flex
into either a row or a column.
To get the screen width you can use MediaQuery.of(context).size.width
.
Your widget should look like this:
@override
Widget build(BuildContext context) {
bool isScreenWide = MediaQuery.of(context).size.width >= kMinWidthOfLargeScreen;
return Scaffold(
body: Flex(
direction: isScreenWide ? Axis.horizontal : Axis.vertical,
children: <Widget>[
...
],
)
);
}