How to make resposive ui for mobiles in flutter

Question

I observed that widgets are showing bigger in a small screen and smaller in a big screen. In big screens it looks quite good but in smaller screens which looks very odd. How can I make a responsive and good-looking UI in different mobile screens sizes...??

Answer 1

You could use the method MediaQuery.of(context).size to retrieve the size of the current screen and define the size of your widget depending on this value.
Here is an example :

@override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width / 3.5,
      child: Center(
          child: Card(
              child: InkWell(
        onTap: () => _openUrl(_shortcut.url),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                height: MediaQuery.of(context).size.height / 6,
                color: Color(int.parse("0xFF${_shortcut.color}")),
                child: Center(child: Icon(_shortcut.icon, color: Colors.white)),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(_shortcut.title,
                    style: TextStyle(fontWeight: FontWeight.bold)),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  _shortcut.description,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ]),
      ))),
    );
  }