Flutter 在任何设备上安装灵活且尺寸合适的容器

你看到那边的切割容器了吗

我认为这是灵活的，适合任何设备想要改变。 但我是个初学者，学习太难了

它非常适合我的设备，但在模拟器上看起来很酷。我想是因为尺寸不同，我该怎么办

新冠病毒-19的面板高度为250， 新冠病毒下的面板高度为600

霉菌代码：

class bodyweb extends StatelessWidget {
  const bodyweb({
    Key key,
    @required this.worldData,
    @required this.weatherData,
  }) : super(key: key);

  final Map worldData;
  final Map weatherData;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              color: kBackgroundColor,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(40),
                topRight: Radius.circular(40),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.symmetric(
              horizontal: kDefaultPadding,
              vertical: kDefaultPadding / 2,
            ),
            // color: kPrimaryColor,
            height: 250,
            child: Stack(
              children: <Widget>[
                Container(
                  height: 250,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(22),
                    color: kPrimaryColor,
                    boxShadow: [kDefaultShadow],
                  ),
                  child: Container(
                    margin: EdgeInsets.only(right: 10),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(22),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10.0),
                  child: Text(
                    '  COVID-19 현황판',
                    style: TextStyle(
                        fontFamily: 'cage',
                        fontSize: 22,
                        fontWeight: FontWeight.bold),
                  ),
                ),
                worldData == null
                    ? CircularProgressIndicator()
                    : WorldWide(
                        worldData: worldData,
                      ),
              ],
            ),
          ),
          Container(
            decoration: BoxDecoration(
              color: kBackgroundColor,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(40),
                topRight: Radius.circular(40),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.symmetric(
              horizontal: kDefaultPadding,
              vertical: kDefaultPadding / 2,
            ),
            // color: kPrimaryColor,
            height: 600,
            child: Stack(
              children: <Widget>[
                Container(
                  height: 600,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(22),
                    color: kPrimaryColor,
                    boxShadow: [kDefaultShadow],
                  ),
                  child: Container(
                    margin: EdgeInsets.only(right: 10),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(22),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10.0),
                  child: Text(
                    '  오늘의 날씨',
                    style: TextStyle(
                        fontFamily: 'cage',
                        fontSize: 22,
                        fontWeight: FontWeight.bold),
                  ),
                ),
                weatherData == null
                    ? CircularProgressIndicator()
                    : TodayWide(
                        weatherData: weatherData,
                      ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class bodyweb扩展了无状态小部件{
const bodyweb({
关键点，
@需要此文件。worldData，
@需要这个天气数据，
})：super（key:key）；
最终地图数据；
最终地图气象数据；
@凌驾
小部件构建（构建上下文）{
返回SingleChildScrollView(
子：列(
儿童：[
容器(
装饰：盒子装饰(
颜色：kBackgroundColor，
borderRadius：仅限borderRadius(
左上：半径。圆形（40），
右上角：半径。圆形（40），
),
),
),
容器(
边距：边缘组。对称(
水平：kDefaultPadding，
垂直方向：kDefaultPadding/2，
),
//颜色：kPrimaryColor，
身高：250，
子：堆栈(
儿童：[
容器(
身高：250，
装饰：盒子装饰(
边界半径：边界半径。圆形（22），
颜色：kPrimaryColor，
boxShadow:[kDefaultShadow]，
),
子：容器(
页边距：仅限边集（右：10），
装饰：盒子装饰(
颜色：颜色，白色，
边界半径：边界半径。圆形（22），
),
),
),
填充物(
填充：常量边集。对称（垂直：10.0），
子：文本(
“新冠病毒-19현황판',
样式：TextStyle(
fontFamily：“笼子”，
尺寸：22，
fontWeight:fontWeight.bold），
),
),
worldData==null
？循环压缩机指示器（）
：全球(
worldData:worldData，
),
],
),
),
容器(
装饰：盒子装饰(
颜色：kBackgroundColor，
borderRadius：仅限borderRadius(
左上：半径。圆形（40），
右上角：半径。圆形（40），
),
),
),
容器(
边距：边缘组。对称(
水平：kDefaultPadding，
垂直方向：kDefaultPadding/2，
),
//颜色：kPrimaryColor，
身高：600，
子：堆栈(
儿童：[
容器(
身高：600，
装饰：盒子装饰(
边界半径：边界半径。圆形（22），
颜色：kPrimaryColor，
boxShadow:[kDefaultShadow]，
),
子：容器(
页边距：仅限边集（右：10），
装饰：盒子装饰(
颜色：颜色，白色，
边界半径：边界半径。圆形（22），
),
),
),
填充物(
填充：常量边集。对称（垂直：10.0），
子：文本(
'  오늘의 날씨',
样式：TextStyle(
fontFamily：“笼子”，
尺寸：22，
fontWeight:fontWeight.bold），
),
),
weatherData==null
？循环压缩机指示器（）
：今天全世界(
weatherData:weatherData，
),
],
),
),
],
),
);
}
}

因为您喜欢并认可“新冠病毒-19面板高度为250，新冠病毒下面板高度为600”

因此，比率为：

250/（250+600）=>0.29==>假设它占屏幕的30%

600/（250+600）=>这是屏幕的70%

使用MediaQuery替换这些高度，如下所示：

高度：250

==>

高度：MediaQuery.of（上下文）。size.height*0.3

第二个：

高度：600

==>

高度：MediaQuery.of（上下文）。size.height*0.7

---

相应地更改它们，但这将确保它们在所有屏幕尺寸上分别为30%和70%。

哈哈，随时可以！MediaQuery令人惊叹，请确保充分利用它的潜力。快乐编码。