How to make a right size of Widgets in Flutter

 

Hello friends~

today Im going to tell you how to make a right size of widgets in flutter.

flutter provides a logical pixels but I dont fuxxing know how to use it

it is not compatible with dpi!

My pages are broken so,,

This is what Im using now.

 

That is

MediaQuery

 

with this code like

 

width: MediaQuery.of(context).size.width
height: MediaQuery.of(context).size.height
fontSize: MediaQuery.of(context).size.height

 

you can know the width, height of your device.

with it, you can define your size of widgets like this

 

 

import 'package:flutter/material.dart';
import 'package:nininaenae/main.dart';
 
class IntroPage extends StatefulWidget {
  static const routeName = "/intro";
 
  @override
  IntroPageState createState() => IntroPageState();
}
 
class IntroPageState extends State<IntroPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: 720,
        height: 1480,
        decoration: BoxDecoration(
          color: const Color(0xffffffff),
        ),
        child: Column(
          children: <Widget>[
            Center(
              child: Column(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(
                      top: MediaQuery.of(context).size.height * 0.1925,
                    ),
                    width: MediaQuery.of(context).size.width*0.7152,
                    height: MediaQuery.of(context).size.height*0.4175,
                    child: Image.asset(
                        'images/intro/drawable-hdpi/illust_paper.png'),
                  ),
                  Container(
                      width: MediaQuery.of(context).size.width*0.8166,
                      height: MediaQuery.of(context).size.height*0.0277,
                      margin: EdgeInsets.only(
                        top: MediaQuery.of(context).size.height * 0.1837,
                      ),
                      child: Image.asset('images/intro/drawable-hdpi/text.png')
                  ),
                  Container(
                    width: MediaQuery.of(context).size.width * 0.3625,
                    height: MediaQuery.of(context).size.height * 0.0648,
                    margin: EdgeInsets.only(top: MediaQuery.of(context).size.height*0.0344),
                    child: FlatButton(
                      color: const Color(0xff3c89ff),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(48.0),
                        side: BorderSide(
                          color: const Color(0xff3c89ff),
                        ),
                      ),
                      child: Text('시작하기',
                          style: TextStyle(
                            fontSize:
                            MediaQuery.of(context).size.height * 0.026,
                            color: const Color(0xffffffff),
                            fontWeight: FontWeight.w500,
                            fontStyle: FontStyle.normal,
                          )),
                      onPressed: () {
                        Navigator.pushNamed(
                            context,
                            MyHomePage.routeName
                        );
                      },
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

you have to add main() function and myApp() to use this code

I used this

MediaQuery.of(context).size.width
MediaQuery.of(context).size.height

 

with some calculation.

So try this way.

Until I find a better way how to measur a size of widget,

I will use this way.

 

thank you for watching!