Any help is appreciated! I've been to trying to figure out why my app doesn't handle different screen size.. I added width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height inside a container to make it more responsive, however, still not responsive. only it's responsive on ios simulator with the overflow error.. not on android simulator. What am I doing wrong?!

How can I make my app handle different screen size both on android and ios simulator?

      home: Builder(builder: (context) {
        return DefaultTabController(
          length: 2,
          child: Scaffold(
            backgroundColor: Colors.black,
            appBar: AppBar(
              backgroundColor: Colors.deepOrange.shade200,
              title: Text('Weather App', style: GoogleFonts.roboto()),
              bottom: 
                  tabs: [
                    Tab(
                      icon: FaIcon(
                        FontAwesomeIcons.solidSun,
                        color: Colors.orange,
                      ),
                    ),
                    Tab(
                        icon: Icon(
                      Icons.favorite,
                      color: Colors.pink,
                    )),
                  ]),
            ),
            body: Stack(children: <Widget>[
              Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topRight,
                      end: Alignment.bottomLeft,
                      colors: [Colors.deepOrange.shade400, Colors.white],
                    ),
                  ),
                  child: TabBarView(
                    children: <Widget>[
                      InkWell(
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => const ForecastWeather(),
                            ),
                          );
                        },
                        child: Card(
                          color: Colors.transparent,
                          child: Padding(
                            padding: const EdgeInsets.only(top: 120.0),
                            child: Weather(weather: weatherData),
                          ),
                        ),

CodePudding user response：

I think this is main.dart file could u try like this?

class AppName extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

Go home_page.dart and do there.

  class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container( //this container can be your background.dart or whatever u want
      height: size.height * 1,
      width: size.width * 1,
    );
  }
}

like this.

CodePudding user response：

It depends on your goal. Do you want different behavior on different Screen sizes or do you just want to arrange your Elements to get a lean experience on all devices?

If it is the second, then it's not practical to use MediaQueries to measure it all by yourself. Instead try to learn and use flutters layouting. Here is a Basics Codelab for that: https://docs.flutter.dev/codelabs/layout-basics

For basic responsive Design without fancy stuff like different layouts for Tables or Foldables, it's way easier to handle it with Layout Design.

CodePudding user response：

I am using flutter_screenutil in my application.

Initallize it with your design size.

  Widget build(BuildContext context) {
    ScreenUtil.init(
      BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width,
          maxHeight: MediaQuery.of(context).size.height),
      designSize: Size(360, 690),
      minTextAdapt: true,
      orientation: Orientation.portrait);
  return Scaffold();
}

And use like this:

Container(
  width: 50.w,
  height:200.h
)

This turns 50 dp in your design responsive. Check out their documentation for more information.