How to make flutter app responsive according to different screen size

0 votes

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: () {})
                ]),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Mar 27, 2023 in Flutter by Ashwini
• 5,430 points
6,180 views

1 answer to this question.

0 votes

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

answered Mar 27, 2023 by anonymous

Related Questions In Flutter

0 votes
1 answer
0 votes
1 answer

How to change flutter project name and id?

Yes, it is possible to change the ...READ MORE

answered Mar 20, 2023 in Flutter by pooja
2,788 views
0 votes
1 answer

How can I change the app display name build with Flutter?

Yes, you can change the app display ...READ MORE

answered Mar 21, 2023 in Flutter by venky
1,944 views
0 votes
1 answer

Dart_LoadScriptFromKernel: The binary program does not contain 'main'.

Hi@akhtar, You need to add the main() function ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
3,216 views
0 votes
1 answer

How to install Dart in Windows system?

Hi@akhtar, Dart is the programming language used to code Flutter apps. ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
784 views
0 votes
1 answer

flutter run: No connected devices

Hi@akhtar, To prepare to run and test your ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
3,835 views
0 votes
1 answer

How to create a function in Dart language?

Hi@akhtar, There are many function types available in ...READ MORE

answered Jul 22, 2020 in Others by MD
• 95,440 points
512 views
0 votes
1 answer

How to get build and version number of Flutter app?

You can get the build and version ...READ MORE

answered Mar 29, 2023 in Flutter by pooja
801 views
0 votes
1 answer

How to dynamically resize text in Flutter?

You can use the FittedBox widget to ...READ MORE

answered Mar 27, 2023 in Flutter by Tej
7,449 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP