Question 234390 in Flutter Question posted in
The official Flutter documentation can be found here.

Is my understanding of how to handle multi-device support in Flutter is correct?

The basic idea is to use LayoutBuilder (or a similar package) to obtain the approximate size (whether it’s mobile, tablet, PC, etc.), and then create Widgets accordingly. Even in the case of mobile, there might be slight variations in the appearance of Widgets due to differences in size, but those differences can be overlooked.

Is it appropriate to proceed with creating the application following this approach?

Tags:

2

Answers


  1. 0 
    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return _buildNormalContainer(context);
        },
      ),
        ),
      ),
    );
  }
}

Widget _buildNormalContainer(BuildContext context) {
    return Center(
      child: Container(
        width: MediaQuery.of(context).size.width * 0.7, // 70% of screen width
        height: MediaQuery.of(context).size.height * 0.7, // 70% of screen height
        color: Colors.red,
      ),
    );
  }

    The project can be continued by following this approach. With MediaQuery.of(context).size it will set itself as a percentage regardless of the screen size. For example, I set the width and length to use 70% of it. You can change it to suit your project. I hope I have helped. Enjoy your work.

    Login or Signup to reply.
  2. 0

    Yes! Both LayoutBuilder and MediaQuery have their place depending on what you’re trying to achieve. This section of some Flutter docs presents both as valid options.

    MediaQuery I would suggest using when performing higher level UI layout decisions, such as "should I use my mobile or tablet UI layout?".

    LayoutBuilder is more useful when performing layout decisions within a widget, such as "how many quick-links should the nav bar have?".

    Which you use depends on the situation and you should use your best judgement. If you’re looking for good examples, the Flutter Team has outsourced some open-source apps to demonstrate best practises. An example is GSkinner’s Flutter Folio app shows such a strategy on this line.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search