Rearranging UI elements according to screen size in Flutter

user_3848107 0
Viewed 167

I checked flutter interact 19 keynote video where it was mentioned an upcoming feature to resize and rearrange the ui according to screen size. It is in this video, minute 17:30.

https://youtu.be/NfNdXgJZfFo

6 months ago it was in "very early stage" does anybody know if it is out yet? I believe is something else than LayoutBuilder or MediaQuery.of(), since those were available before the keynote on the video.

I know there are other packages as well from other developers but I am interested in the one from Google.

flutter-layout dart flutter web
1 Answers

I am using MediaQuery.of(context).size; in my project in the stable channel to change the layout depending on the width. It works for me without problems. I have written a widget that distinguishes between large screen (tablet) and small screen (smartphone).

class ScreenWidthBuilder extends StatelessWidget {
  final Widget Function(BuildContext context, bool isAWideScreen)  builder;
  final int bigScreenUpFrom;

  const ScreenWidthBuilder({Key key, @required this.builder, this.bigScreenUpFrom = 600}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    // screenSize.width changes depending on screen orientation
    bool isAWideScreen = screenSize.width >= this.bigScreenUpFrom;
    return this.builder(context, isAWideScreen);
  }
}

First I tried to use the LayoutBuilder widget but I was able to achieve a better result with MediaQuery.of(context).size;. With MediaQuery you can request many data about the device screen (size, textScaleFactor, orientation, etc).

For more information have a look at:

user_94398990
Related