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:

@overrideWidget build(BuildContext context) {  bool isScreenWide = MediaQuery.of(context).size.width >= kMinWidthOfLargeScreen;  return Scaffold(    body: Flex(      direction: isScreenWide ? Axis.horizontal : Axis.vertical,      children: <Widget>[        ...      ],    )  );}

To change based on device orientation, you can do:

Orientation orientation = MediaQuery.of(context).orientation;return orientation == Orientation.portrait? Column(children: <Widget>[]): Row(children: <Widget>[]);

I wrote a helper to do this (Column to Row).

import 'package:flutter/material.dart';class OrientationSwitcher extends StatelessWidget {  final List<Widget> children;  const OrientationSwitcher({Key key, this.children}) : super(key: key);  @override  Widget build(BuildContext context) {    Orientation orientation = MediaQuery.of(context).orientation;    return orientation == Orientation.portrait    ? Column(children: children)    : Row(children: children);  }}

And to use it...

  Widget build(BuildContext context) {    return OrientationSwitcher(      children: <Widget>[           // place children here like its a column or row.        ]    )  }

You also can do this with Flex() or any other widget.

Also, there are more options available besides orientation, make sure to look at the MediaQuery.of(context) implementation on the Flutter docs.