Flutter responsive design: Dynamically change Column to Row if the screen is larger

Question

How to dynamically change a Column widget to a Row Widget if the screen width of the device is above a certain treshold?

The use case would be when user use the app on a tablet or landscape mode, the layout should differs in order to optimise the usage of the available width.

In CSS flexbox, it is as simple as changing the class from flex-row to flex-column but in Flutter, widgets are used.

Answer 1

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

Answer 2

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.