CODEWITHSUNDEEP
flutterresponsive-design
user19976096
user19976096

Reputation: 81

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?

Upvotes: 0

Views: 644

Answers (2)

Md Hemal
Md Hemal

Reputation: 31

You can also use the LayoutBuilder() widget to make responsive designs. It provides us with maxHeight, maxWidth, minHeight, and minWidth properties to make our design responsive.

Widget build(BuildContext context){
    final width = MediaQuery.of(context).size.width;
    return Scaffold(
       body: LayoutBuilder(
         builder: (context, constraints){
            final color = constraints.maxWidth < 330 ? Colors.red : Colors.blue;
            return Container(
                 width: width,
                 height: 300,
                 decoration: BoxDecoration(
                    color: color
                 )
             );
         }
       ) 
    );
}

Upvotes: 0

DelonPrinsloo
DelonPrinsloo

Reputation: 95

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

Upvotes: 1

Related Questions