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.sizeOf(context).width.

Your widget should look like this:

@override
Widget build(BuildContext context) {
  bool isScreenWide = MediaQuery.sizeOf(context).width >= kMinWidthOfLargeScreen;

  return Scaffold(
    body: Flex(
      direction: isScreenWide ? Axis.horizontal : Axis.vertical,
      children: <Widget>[
        ...
      ],
    )
  );
}

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)