flexible and appropriate sized container at any device

Question

Do you see the cut container over there?

I thnk that is flexible and appropriate to any device want to change. But I'm a beginner in too hard.

It fits perfectly on my device, but looks cut on the emulator. I think it's because the size is different, what should I do?

covid-19 panel height is 250, under the covid panel height is 600

MYCODE:

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

Answer 1

Since you like and approve of it this way "covid-19 panel height is 250, under the covid panel height is 600",

So the ratios are:

250 / (250+600) => 0.29 ==> lets say it's 30% of your screen.

600 / (250+600) => this is 70% of your screen.

Replace these heights using MediaQuery, like this:

height: 250 ==> height: MediaQuery.of(context).size.height * 0.3

and the second one:

height: 600 ==> height: MediaQuery.of(context).size.height * 0.7

Change them accordingly, but this will ensure them being 30% and 70% on all screen sizes.