How to make flutter app responsive according to different screen size

Question

I am facing difficulties to make it responsive according to various screen sizes. How to make it responsive?

@override
       Widget build(BuildContext context) {
       return new Container(
       decoration: new BoxDecoration(color: Colors.white),
       child: new Stack(
        children: [
          new Padding(
            padding: const EdgeInsets.only(bottom: 350.0),
            child: new GradientAppBar(" "),
          ),
          new Positioned(
            bottom: 150.0,
            height: 260.0,
            left: 10.0,
            right: 10.0,
            child: new Padding(
              padding: new EdgeInsets.all(10.0),
              child: new Card(
                child: new Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const ListTile(
                      title: const Text(
                        'LOGIN',
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          fontSize: 16.50,
                          fontFamily: "Helvetica",
                          fontWeight: FontWeight.bold,
                          color: Colors.black87,
                          letterSpacing: 1.00,
                        ),
                      ),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.person),
                      title: new TextField(
                        controller: _user1,
                        decoration: new InputDecoration(
                            labelText: '     Enter a username'),
                      ),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.person_pin),
                      title: new TextField(
                        controller: _pass1,
                        decoration: new InputDecoration(
                            labelText: '     Enter a password'),
                        obscureText: true,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          new Positioned(
            bottom: 70.0,
            left: 15.0,
            right: 05.0,
            child: new ButtonTheme.bar(
            // make buttons use the appropriate styles for cards
              child: new ButtonBar(
                children: <Widget>[
                  new FlatButton(
                    padding: new EdgeInsets.only(right: 13.0),
                    child: new Text(
                      'REGISTER HERE',
                      style: new TextStyle(
                          color: Colors.black87,
                          fontFamily: "Helvetica",
                          fontSize: 15.00,
                          fontWeight: FontWeight.bold),
                    ),
                    onPressed: () {
                      Navigator.of(context).pushNamed('/facebook');
                    },
                  ),
                  new FlatButton(
                    padding: new EdgeInsets.only(right: 22.0),
                    child: new Text(
                      'FORGOT PASSWORD?',
                      style: new TextStyle(
                          color: Colors.black87,
                          fontFamily: "Helvetica",
                          fontSize: 15.00,
                          fontWeight: FontWeight.bold),
                    ),
                    onPressed: () {
                      Navigator.of(context).pushNamed('/Forgot');
                    },
                  ),
                ],
              ),
            ),
          ),
          new Positioned(
            bottom: 73.0,
            height: 180.0,
            left: 20.0,
            right: 52.0,
            child: new Padding(
              padding: new EdgeInsets.all(0.00),
              child: new ButtonTheme(
                minWidth: 10.0,
                height: 20.0,
                padding: new EdgeInsets.only(right: 37.0),
                child: new ButtonBar(children: <Widget>[
                  new CupertinoButton(
                      borderRadius:
                          const BorderRadius.all(const Radius.circular(36.0)),
                      padding: new EdgeInsets.only(left: 70.0),
                      color: const Color(0xFF426DB7),
                      child: new Text(
                        "     LOGIN                            ",
                        style: new TextStyle(
                            color: Colors.white,
                            fontSize: 12.50,
                            fontFamily: "Handwriting",
                            fontWeight: FontWeight.w500,
                            letterSpacing: 0.00),
                      ),
                      onPressed: () {})
                ]),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

To make your Flutter app responsive according to different screen sizes, you can follow these steps:

1. Use flexible layout widgets such as Expanded, Flexible, and Wrap instead of fixed-size widgets such as SizedBox or Container with fixed sizes.

2. Use media queries to adapt to different screen sizes. For example, you can define different styles for different screen sizes using the MediaQuery class.

3. Use LayoutBuilder to get information about the parent widget's size and adjust your layout accordingly.

4. Avoid using absolute positioning (Positioned widget), as it can lead to issues with responsiveness on different screen sizes.

Here's an example of how you can modify your code to make it more responsive:

@override
Widget build(BuildContext context) {
  return Container(
    decoration: BoxDecoration(color: Colors.white),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Flexible(
          flex: 1,
          child: GradientAppBar(" "),
        ),
        Flexible(
          flex: 2,
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Card(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const ListTile(
                    title: const Text(
                      'LOGIN',
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: 16.50,
                        fontFamily: "Helvetica",
                        fontWeight: FontWeight.bold,
                        color: Colors.black87,
                        letterSpacing: 1.00,
                      ),
                    ),
                  ),
                  ListTile(
                    leading: const Icon(Icons.person),
                    title: TextField(
                      controller: _user1,
                      decoration:
                          InputDecoration(labelText: 'Enter a username'),
                    ),
                  ),
                  ListTile(
                    leading: const Icon(Icons.person_pin),
                    title: TextField(
                      controller: _pass1,
                      decoration:
                          InputDecoration(labelText: 'Enter a password'),
                      obscureText: true,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        Flexible(
          flex: 1,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              FlatButton(
                padding: EdgeInsets.only(right: 13.0),
                child: Text(
                  'REGISTER HERE',
                  style: TextStyle(
                      color: Colors.black87,
                      fontFamily: "Helvetica",
                      fontSize: 15.00,
                      fontWeight: FontWeight.bold),
                ),
                onPressed: () {
                  Navigator.of(context).pushNamed('/facebook');
                },
              ),
              FlatButton(
                padding: EdgeInsets.only(right: 22.0),
                child: Text(
                  'FORGOT PASSWORD?',
                  style: TextStyle(
                      color: Colors.black87,
                      fontFamily: "Helvetica",
                      fontSize: 15.00,
                      fontWeight: FontWeight.bold),
                ),
                onPressed: () {
                  Navigator.of(context).pushNamed('/Forgot');
                },
              ),
              CupertinoButton(
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(36.0)),
                  padding: EdgeInsets.only(left: 70.0),
                  color: const Color(0xFF426DB7),
                  child: Text(
                    "     LOGIN                            ",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 12.50,
                        fontFamily: "Handwriting",
                        fontWeight: FontWeight.w500,
                        letterSpacing: 0.00),
                  ),
                  onPressed: () {}),
            ],
          ),
        ),
      ],
    ),
  );
}

In this modified code, we've replaced the absolute positioning with a Column widget that uses Flexible and Expanded widgets to adjust to different screen sizes. We've also removed the unnecessary ButtonTheme and adjusted the