如何让这个flutter屏幕根据不同的屏幕尺寸做出响应？答案

【问题标题】：How to make this flutter screen responsive according to different screen sizes?如何让这个flutter屏幕根据不同的屏幕尺寸做出响应？
【发布时间】：2021-10-10 05:51:26
【问题描述】：

我也尝试了一些插件来响应这个应用程序屏幕。但它不起作用。如何使用 mediaquery 创建这个响应？ mediaquery 是否足够？

【问题讨论】：

标签： flutter web mobile responsive-design responsive

【解决方案1】：

您也可以使用LayoutBuilder 根据屏幕大小返回小部件，如下所示：

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;
      },
    );
  }
}

然后调用此ReposnsiveWidget 并传递大小屏幕小部件：

@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(),
              )
    );
  }

【讨论】：

@Nadun 这对您有帮助吗？如果有帮助，请接受答案。

【解决方案2】：

要使用 MediaQuery 类使 Flutter 应用具有响应性，您可以修改构建功能，如：

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

如果宽度大于 600，它会相应地返回更大的视图。 MediaQuery 确实对我有用，并且足以在 Flutter 中进行响应式设计。

【讨论】：