CODEWITHSUNDEEP
flutterdart
Leena Marie
Leena Marie

Reputation: 347

How can I change the width of a container/card depending on screen size?

I tried adding a width to the container but it didn't do anything. By default it fills the page? Not sure what's happening. Do I have to use MediaQuery somewhere? I want the post to be the same size on both the phone and the tablet. I'm not great with explaining so I added a photo to help.

Hope this explains

Here's my code:

body: ListView(
        children: [
          Container(
            height: 132,
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(15)),
            child: Card(
              margin: EdgeInsets.all(10),
              elevation: 8,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15)),
              child: Column(
                children: <Widget>[
                  ListTile(
                    leading: CircleAvatar(
                      backgroundColor: Color(0xFF192A4F),
                    ),
                    title: SizedBox(
                      height: 39,
                      child: TextButton(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            AutoSizeText(
                              'Username',
                              style: TextStyle(
                                  color: Color(0xFF192A4F),
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ],
                        ),
                        style: TextButton.styleFrom(
                            padding: EdgeInsets.zero,
                            minimumSize: Size(50, 30),
                            alignment: Alignment.centerLeft),
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => SeventhRoute(),
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                  Divider(
                    height: 10,
                    color: Colors.black26,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Icon(Icons.comment_outlined,
                              color: Colors.black),
                          SizedBox(width: 8.0),
                          Text(
                            'Comment',
                            style: TextStyle(color: Colors.black),
                          ),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Icon(Icons.bookmark_outline, color: Colors.black,),
                          SizedBox(width: 8.0),
                          Text('Bookmark', style: TextStyle(color: Colors.black),),
                        ],
                      ),
                    ],
                  ),
                      SizedBox(
                        height: 12.0,
                      )
                    ],
                  ),
              ),
            ),
        ],
      ),

Upvotes: 1

Views: 4241

Answers (4)

Randal Schwartz
Randal Schwartz

Reputation: 44091

It looks like you want that widget to take as much width as it can, but no more than 500px wide. Trivial:

ConstrainedBox(
  child: YourChild(...),
  constraints: BoxConstraints(maxWidth: 500),
),

Upvotes: 0

David
David

Reputation: 1876

The reason specifying the width is ignored is because you didn't specify what should happen with the smaller card. The framework doesn't know if it should be aligned left, center, right, etc. To fix this, you can wrap your Card, Container, or even the whole ListView in a Center (or Align) widget.

Upvotes: 2

Chamod Dissanayake
Chamod Dissanayake

Reputation: 716

double width = MediaQuery.of(context).size.width;

you can get screen width from here. Then add a logic

As example if screen width of right phone is 500 and left is 1000, then you can set

  • if the screen width is <= 500 ,

    set the container width as screen width

  • otherwise
    set the container width as 500.

---Additionally---

You can get screen orientation like this

var isPortrait = MediaQuery.of(context).orientation == Orientation.portrait

Upvotes: 2

sungkd123
sungkd123

Reputation: 403

Based on your images i can see that only the width is changing, height is constant, so i'd suggest in your container give width: MediaQuery.of(context).size.width;

And of course some padding to that container.

Upvotes: 0

Related Questions