flutter - 2个手机抖动时的高度不同

Question

所以我正在用我的个人电话(phone1)调试该应用，一切正常，如我所愿。但是在我的第二部手机中，灰色框位于错误的位置。我检查了我的代码，找不到问题所在。
电话1与电话2
这是我用于该“卡”的代码

Stack(
                children: [
                  Container(
                    margin: EdgeInsets.only(bottom: 20),
                    decoration: BoxDecoration(
        color: Colors.red,
                    ),
                  ),
                  Center(
                    child: Container(
                        height: 300,
                        child: Image.network(imageUrl),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 195, bottom: 20),
                    decoration: BoxDecoration(
                      color: Color(0xFF1c1b1a),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 233, bottom: 0),
                    decoration: BoxDecoration(
                      color: Color(0xFF0f0c0c),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 27),
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: Text('ARK',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 15,
                          ),
                    ),
                  ),
                  Positioned(
                    bottom: 1.5,
                    left: 3.5,
                    child: Column(
                      children: [
                        Row(
                          children: [
                            RichText(
                              text: TextSpan(
                                children: [
                                  WidgetSpan(
                                      child: TextSpan(
                                    text: '48',
                                    style: TextStyle(
                                        fontSize: 15,
                                        fontWeight: FontWeight.bold),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Positioned(
                    bottom: 1.5,
                    right: 4,
                    child: Column(
                      children: [
                        Row(
                          children: [
                            RichText(
                              text: TextSpan(
                                children: [
                                  Text('2000'),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),

为什么会这样呢？我需要更改所有代码，还是一个简单的解决方法？

Answer 1

好的，您可以使用MediaQuery.of(context).size.height和MediaQuery.of(context).size.width来获得响应式设计。我评论了位于底部和右侧的小部件。您可以根据需要使用top和left属性重新定义它们。

      Stack(
        children: [
          Container(
            margin: EdgeInsets.only(bottom: 20),
            decoration: BoxDecoration(
              color: Colors.red,
            ),
          ),
          Center(
            child: Container(
              height: 300,
              child: Image.network("imageUrl"),
            ),
          ),
          Container(
            margin: EdgeInsets.only(
              top: 195,
            ), // bottom: 20
            decoration: BoxDecoration(
              color: Color(0xFF1c1b1a),
            ),
          ),
          Positioned(
            top: 191,
            left: 0,
            child: Transform.rotate(
              angle: 100 / 7.97,
              child: Container(
                color: Colors.orange,
                width: 250,
                height: 6,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(
              top: 233,
            ), //  bottom: 0
            decoration: BoxDecoration(
              color: Color(0xFF0f0c0c),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(bottom: 27),
            // Try to define top property
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Text(
                'ARK',
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 15,
                ),
              ),
            ),
          ),
          Positioned(
            //bottom: 1.5, // Try to define from top!
            left: 3.5,
            child: Column(
              children: [
                Row(
                  children: [
                    RichText(
                      text: TextSpan(
                        children: [
                          WidgetSpan(
                            child: TextSpan(
                              text: '48',
                              style: TextStyle(
                                  fontSize: 15,
                                  fontWeight: FontWeight.bold),
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Positioned(
            //bottom: 1.5, // Try to define from top!
            //right: 4, // Try to define from left!
            child: Column(
              children: [
                Row(
                  children: [
                    RichText(
                      text: TextSpan(
                        children: [
                          Text('2000'),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),