Flutter - 如何使图像在所有屏幕尺寸下都具有响应性答案

【问题标题】：Flutter - How to make image responsive with all screen sizesFlutter - 如何使图像在所有屏幕尺寸下都具有响应性
【发布时间】：2020-12-30 15:24:10
【问题描述】：

您好，我正在制作一个 Flutter 图书应用程序，每页图像的顶部都会有材料按钮。但我注意到当我从 iPhone X 转到 iPhone XR 或任何其他设备时，按钮到处都是，我看到图片没有正确对齐或相同。我只需要横向模式图片来填满整个页面并在包括 iPad 在内的所有屏幕上完全响应...... 我该怎么做呢..？

我尝试了媒体查询，但是当我执行 screenSizes.width* 任何数字时，发生的情况是按钮未显示并且...图像无限滚动，所有屏幕尺寸仍显示不同的图像。

我将在下面分享我的一个按钮和图像的代码

@override
  Widget build(BuildContext context) {
    var screenSizes = MediaQuery.of(context).size;
    return Scaffold(
        appBar: new AppBar(title: new Text("1 Alif-laam-meem آلم, Pg2")),
        body: new SingleChildScrollView(
            child: Container(
                constraints: BoxConstraints.expand(
                  // BoxConstraints
                  //   BoxConstraints.expand(
                  // height: 1000,

                  // .expand(
                  width: screenSizes.width * 10,
                  height: screenSizes.height * 10,
                ),

                // children: [
                child: Stack(children: <Widget>[
                  SafeArea(
                      top: true,
                      bottom: true,
                      right: true,
                      left: true,
                      child: new Container(
                          // padding: EdgeInsets.zero,
                          child: new Image.asset(
                        "test/assets/quranpg0.png",
                        // fit: BoxFit.fitWidth,
                        fit: BoxFit.cover,

                        // color: Colors.purpleAccent,
                        // colorBlendMode:ui.BlendMode.colorDodge,
                      ))),
                  Positioned(
                    // right: 600,

                    bottom: screenSizes.width * 0.985,
                    left: screenSizes.height * 0.87,
                    // bottom: 754.0,
                    // left: 360,
                    // left: width*0.5,
                    // top: 900,
                    // top: 100,
                    child: Opacity(
                      opacity: 0.95,
                      child: _visible
                          ? MaterialButton(
                              // minWidth:screenSize.width*0.1,
                              // 0.1 = 10% of the screen , 0.5 = 50% of the screen
                              // ios sizes usually are 620...
                              // height: screenSize.height*0.1,
                              onPressed: () => changeTextArabic1(),
                              onLongPress: () => changeTextEnglish1(),
                              shape: new RoundedRectangleBorder(
                                borderRadius: new BorderRadius.circular(80.0),
                                // child: Text(labels[i]),
                              ),
                              child: Ink(
                                child: Text(surah0),
                                //  disabledTextColor: Colors.transparent,
//                       color: Colors.cyan[300],
//                       // color: Colors.purple[300],
//                       highlightColor: Colors.blue,
//                       // shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
//                       // ),
//                       textColor: Colors.white,
                                // color: Colors.cyan[400],
                                padding: EdgeInsets.only(
                                    top: screenSizes.height * 0.05,
                                    left: screenSizes.width * 0.02,
                                    right: screenSizes.width * 0.02,
                                    bottom: screenSizes.height * 0.05),
                                // EdgeInsets.all(21.0),
                                // left: 28, top: 25, right: 28, bottom: 25),
                                decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                    colors: [
// all together looks COOL royal Blue:

                                      Colors.tealAccent[400],
                                      Colors.cyan[900],
                                      Colors.teal

                                      // Color(0xff0E0077),
                                      // Color(0xff1B00EE)
                                    ],
                                    // begin: Alignment.centerLeft,
                                    // end: Alignment.centerRight,
                                  ),
                                ),
                              ),
                              // color: Colors.blue[300],
                              // highlightColor: Colors.blue,
                              splashColor: Colors.cyan,
                              // ),
                              textColor: Colors.white,
                            )
                          : Container(),
                    ),
                  ),

【问题讨论】：

该页面应该适应所有屏幕，您已将其分配给您正在测试的设备的屏幕，只需输入我在代码中看到的大量数字
请提供正确的代码

标签： flutter dart mobile flutter-layout responsiveness

【解决方案1】：

如果你需要确定屏幕方向，你可以这样做：

var orientation = MediaQuery.of(context).orientation;

对于一个可以帮助您正确缩放元素的完全有效的解决方案，我强烈建议您探索这个 repo：https://github.com/TechieBlossom/learning_platform_app

甚至还有一个附带解释的视频系列： https://www.youtube.com/watch?v=afBmGC63iIQ

【讨论】：