CODEWITHSUNDEEP
flutterwebmobileresponsive-designresponsive
Nadun Vihanga
Nadun Vihanga

Reputation: 1

How to make this flutter screen responsive according to different screen sizes?

I tried some plugins also for responsive this app screen.But it doesn't worked.How to create this responsive with mediaquery ? Does mediaquery is enough for this ?

Upvotes: 0

Views: 1639

Answers (2)

Free Palestine
Free Palestine

Reputation: 2658

You can also use LayoutBuilder to return widget based on screen size like this:

import 'package:flutter/material.dart';

class ResponsiveWidget extends StatelessWidget {
//here I just use small and large screens .
  final Widget largeScreen;

  // final Widget mediumScreen;
  final Widget smallScreen;

  const ResponsiveWidget({Key key, @required this.largeScreen, this.smallScreen}) : super(key: key);

  static bool isSmallScreen(BuildContext context) {
    return MediaQuery.of(context).size.width <800;
  }
  static bool isMediumScreen(BuildContext context) {
    return MediaQuery.of(context).size.width >= 700 && MediaQuery.of(context).size.width < 1000;
  }
  static bool isLargeScreen(BuildContext context) {
    return MediaQuery.of(context).size.width >=800;
  }
 

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 800) {
          return largeScreen;
        } else
          return smallScreen;
      },
    );
  }
}

Then call this ReposnsiveWidget and pass small and large screen widgets:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ResponsiveWidget(
                largeScreen: Row(
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: Container(),
                    ),
                    Expanded(
                      flex: 2,
                      child: blogList(),
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(),
                    )
                  ],
                ),
                smallScreen: blogList(),
              )
    );
  }

Upvotes: 0

Aditya Thakur
Aditya Thakur

Reputation: 1106

To make a Flutter app responsive using MediaQuery class, you can modify the build function like:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Theme.of(context).accentColor,
        body: MediaQuery.of(context).size.width > 600
            ? _landscapeforWeb()
            : _portraitLayout());
  }

If the width is greater than 600, it'd return a larger view accordingly. MediaQuery does work for me and is enough for responsive design in Flutter.

Upvotes: 1

Related Questions