Different height in 2 phones flutter

Question

so I'm debugging the app in my personal phone(phone1), and it's all ok like I want it. But in my second phone the grey box is in the wrong place. I've checked my code and can't find out what's wrong.

Phone1 vs Phone 2

This is the code that i use for that "card"

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'),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),

Why is this happening? Do I need to change all my code, or it's a simple fix?

Answer 1

Ok, you can use MediaQuery.of(context).size.height and MediaQuery.of(context).size.width to get a responsive design. And I commented the bottom and right positioned widgets. You can re-define them with using top and left properties as your needs.

      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'),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),