CODEWITHSUNDEEP
flutter
mmdrezaahmi
mmdrezaahmi

Reputation: 5

How can I responsive my flutter app with MediaQuery?

How can I responsive my flutter app with MediaQuery?

This is all my code: Please tell me if you know another way to do this lines 3 and 4 are wrong. What can I do?

    return MaterialApp(
    var wi = MediaQuery.of(context).size.width;
    var he = MediaQuery.of(context).size.height;
      home: Scaffold(
        body: SafeArea(
          child: Container(
            width: wi,
            height: he,
            color: Colors.blueGrey[900],
            child: Column(
              children: <Widget>[
                Container(
                  alignment: Alignment.centerRight,
                  margin: EdgeInsets.only(
                    top: 30,
                  ),
                  padding: EdgeInsets.only(
                    right: 20,
                  ),
                  width: wi,
                  height: he * 0.3,
                  child: Text(
                    "3,670",
                    style: TextStyle(
                      fontSize: 70,
                      color: Colors.white,
                    ),
                  ),
                ),
    );

Upvotes: 0

Views: 352

Answers (1)

ahmed
ahmed

Reputation: 454

in flutter there is many way to make a responsive ui either you use MediaQuery or Expanded or any sort of responsive widget it depend on your app and what you want to achieve or satisfies you, here is the flutter document for making responsive app if you want to know more widget to make a responsive app. you should use the MediaQuery.of(context) between the builder and the return widget because MediaQuery get the context from the builder Note you can't get the MediaQuery before making the MaterialApp widget, to solve that you should first make the MaterialApp widget then navigate to the another widget this code is for that

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        dividerColor: Colors.transparent,
      ),
      home: HomeScreen(),
    );
  }
}
class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
@override
  Widget build(BuildContext context) {
    var wi = MediaQuery.of(context).size.width;
    var he = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Container(
        width: wi,
        height: he,
        color: Colors.blueGrey[900],
        child: Column(
          children: <Widget>[
            Container(
              alignment: Alignment.centerRight,
              margin: EdgeInsets.only(
                top: 30,
              ),
              padding: EdgeInsets.only(
                right: 20,
              ),
              width: wi,
              height: he * 0.3,
              child: Text(
                "3,670",
                style: TextStyle(
                  fontSize: 70,
                  color: Colors.white,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

you really need to take some course from youtube click here if you want to read document

Upvotes: 1

Related Questions