flutterresponsive-design

How to make all pages of flutter app responsive?


How will I make all my pages responsive in a flutter app? Should I implement the responsive layout code in every pages or will it inherit the responsive layout from its parent(main.dart)? There are many tutorials on how to make an admin screen responsive.. But if a flutter app contains multiple pages, should I write different layout code for mobile, tab and desktop layout?


Solution

  • Good day!

    In Our Mobile app, we use a combination of MediaQuery.of(context).size and widgets like SizedBox() to achieve responsiveness. Example:

    class MyApp extends StatelessWidget {
          const MyApp({Key? key}) : super(key: key);
         
          @override
          Widget build(BuildContext context) {
            return SizedBox(
                width: MediaQuery.of(context).size.width * 0.8,
                child: COntainer(),
                );
          }
        }
    

    There is also the LayoutBuilder(), which you can use to build widgets with size parameters that you provide to the LayoutBuilder. This might help: https://docs.flutter.dev/ui/layout/responsive/adaptive-responsive