responsive Ui in flutter

Question

In Ui margin, padding, text and image sizes are given constant values. I didn't use Fractional box and Constraint box etc..I need to set according to the screen size via media query

I used media query like this but unable to set properly.

    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    double height35 = height * 0.35;

if my padding is padding:const EdgeInsets.only(left: 25.0,right: 25.0), how can i set padding and other fixed size from media query. Here 1, Here 2 are the doc and example but did't not get way from media query..

I have used this library too but it is not as effective as I want.

here is my code.

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    MediaQueryData queryData;
    queryData = MediaQuery.of(context);


    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    double height35 = height * 0.35;

    return Scaffold(
      body: Container(
          decoration: BoxDecoration(color: Color(0xFFE7F6FD)),
        child: Column(
          children: <Widget>[
            SizedBox(height: height35,),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                  height: 50.0,
                  child: IconButton(icon: Icon(Icons.close,color: Color(0xFF005283),size: 36.0,), onPressed: null),
                ),
              ],),
            Container(child: SingleChildScrollView(
              padding:const EdgeInsets.only(left: 25.0,right: 25.0),
              child: Column(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Container(
                    height: 60.0,
                    child: Image.asset('assets/images/login_logo.png')),

                  SizedBox(
                    height: 30.0,
                  ),
                  TextFormField(
                    style: new TextStyle(fontSize:18.0,color: Color(0xFF005283)),
                    decoration: InputDecoration(
                      // prefixIcon: Icon(Icons.email, color: Colors.grey),
                        enabledBorder: UnderlineInputBorder(borderSide: new BorderSide(color: Color(0xFF005283))),
                        hintStyle: TextStyle(color: Color(0xFF005283),fontSize:18.0,fontFamily: "WorkSansLight"),
                        hintText: 'Email/Mobile No.'),
                  ),
                  SizedBox(
                    height: 30.0,
                  ),
                  TextFormField(
                    style: new TextStyle(fontSize:18.0,color: Color(0xFF005283)),
                    obscureText: true,
                    decoration: InputDecoration(
                      // prefixIcon: Icon(Icons.email, color: Colors.grey),
                        labelStyle: new TextStyle(color: Colors.blue),
                        enabledBorder: UnderlineInputBorder(borderSide: new BorderSide(color: Color(0xFF005283))),
                        hintStyle: TextStyle(color: Color(0xFF005283),fontSize:18.0,fontFamily: "WorkSansLight"),
                        hintText: 'Password'),
                  ),
                  SizedBox(
                    height: 30.0,
                  ),

                  RaisedButton(
                    onPressed: () {

                    },
                    shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)),
                    child: Padding(
                        padding: EdgeInsets.only(top:18.0,bottom: 18.0,left: 10.0,right: 10.0),
                        child: Text('LOG IN',style: new TextStyle(fontSize:18.0,color: Color(0xFF005283),fontFamily: "WorkSansMedium"),)),
                    color: Color(0xFFc1ff02),
                    textColor: Colors.white,),

                  SizedBox(
                    height: 30.0,),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Divider(
                          color: Color(0xFF005283),
                          height: 8.0,
                        ),
                      ),
                      SizedBox(
                        width: 8.0,
                      ),
                      Text(
                        'OR CONNECT WITH',
                        style: TextStyle(fontSize:14.0,color: Color(0xFF005283),fontFamily: "WorkSansLight",fontWeight: FontWeight.normal),
                      ),
                     SizedBox(
                          width: 8.0,
                      ),
                      Expanded(
                        child: Divider(
                          color: Color(0xFF005283),
                          height: 8.0,
                        ),
                      )
                    ],
                  ),

                  Row(
                    children: <Widget>[
                      FlatButton.icon(
                          onPressed: null,
                          label: Text('Login with Facebook',style: TextStyle(color: Colors.white),),
                          icon: Icon(Icons.local_gas_station,color: Colors.white,),
                          shape: Border.all(color: Colors.grey,width: 2.0,style: BorderStyle.none ),
                          //shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),)
                      ),

                      OutlineButton(
                        color: Colors.black,
                          child: new Text("Button text"),
                          onPressed: null,
                          shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 20.0,
                  ),
              Center(
                child: GestureDetector(
                  onTap: () {
                    Navigator.pushNamed(context, "myRoute");
                  },
                  child:  RichText(
                    text: new TextSpan(
                      children: <TextSpan>[
                        TextSpan(text:'Not a Member? ',style: TextStyle(color: Color(0xFF005283),fontSize: 14.0,fontWeight: FontWeight.w400),),
                        TextSpan(text:'Register Now',style: TextStyle(color: Color(0xFF005283),fontSize: 18.0,fontWeight: FontWeight.w600),),
                      ],
                    ),
                  ),
                ) ,
              ),
                  SizedBox(
                    height: 20.0,
                  ),

                  OutlineButton(
                      color: Color(0xFF005283),
                      child: new Text("CONTINUE AS GUEST",style: TextStyle(color: Color(0xFF005283),fontSize: 14.0,)),
                      onPressed: null,
                      shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
                  ),
            ],),))
          ],
        ),
      ),
    );
  }
}

This is a bit broad. If you managed to obtain `MediaQuery`, what issue are you facing that prevents you from using it? — Rémi Rousselet, Jan 28 '19 at 09:58
I have already built this UI without thinking about the responsiveness of UI just to learn. But I'm not getting the way to calculate media query. for example, if I have 25 `dp` padding how can we measure though `media.query` as we can do in `xml` has every different sd and dp for the different different devices. — , Jan 28 '19 at 10:08
`MediaQuery` will return the size of the device. I tend to multiple the width/height by a fraction. `padding:const EdgeInsets.only(left: width*0.1, right: width*0.1)` for example — Ross, Jan 28 '19 at 12:06
@Ross how did you decide that the width will be multiplied by 0.1? — , Jan 28 '19 at 12:11
@farhana, 0.1 is just a example. I tend to have 2-3 emulators open at a time with different sizes. I select a multiple I believe will look good, and then hot reload all the emulators and see if the design still looks good. So it is more trial and error case, where it is back and forth. ultimately the design is going to be different depending on app, device resolution, and device dpi — Ross, Jan 28 '19 at 12:13
If you know that your padding is going to be 25.0, why do you need to use media query to set padding? — dshukertjr, Jan 28 '19 at 12:48
it should be changed according to screen resolution or pixel. — , Jan 28 '19 at 12:51

dshukertjr · Answer 1 · 2019-01-28T14:11:12.337

0

From the documentation of devicePixelRatio property: https://docs.flutter.io/flutter/dart-ui/Window/devicePixelRatio.html

The number of device pixels for each logical pixel. This number might not be a power of two. Indeed, it might not even be an integer. For example, the Nexus 6 has a device pixel ratio of 3.5.

Device pixels are also referred to as physical pixels. Logical pixels are also referred to as device-independent or resolution-independent pixels.

By definition, there are roughly 38 logical pixels per centimeter, or about 96 logical pixels per inch, of the physical display. The value returned by devicePixelRatio is ultimately obtained either from the hardware itself, the device drivers, or a hard-coded value stored in the operating system or firmware, and may be inaccurate, sometimes by a significant margin.

The Flutter framework operates in logical pixels, so it is rarely necessary to directly deal with this property.

So you you don't really have to worry about device resolutions, but if you want to access the property, you can like the following:

double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;

edited Jan 28 '19 at 14:11

answered Jan 28 '19 at 13:06

dshukertjr

15,244
11
57
94

how can i use `devicePixelRatio ` in padding field. – Jan 28 '19 at 13:31
@farhana It depends on what you want to do with it. How exactly do you want to change your padding according to resolution? Do you want to have more padding for high resolution phones? – dshukertjr Jan 28 '19 at 13:59
if i have 25dp then i should change accordingly to screen. – Jan 28 '19 at 14:00
@farhana I don't really understand what exactly you want to do. You have to be a little more specific. You should not have to be worried about device resolutions in flutter as I edited my answer. – dshukertjr Jan 28 '19 at 14:12

responsive Ui in flutter

1 Answers1