CODEWITHSUNDEEP
dartflutter
Derpington
Derpington

Reputation: 109

Expand column to fit screen width

So i like to figure out how to make Card widget become full width in flutter, basically it only expand its width based on its child, i want it to fit the screen, the task fairly simple but im having a really hard time achieving that, in my scaffold basically it contain two card, and have some text in it, the card only expand to the size of the end of the text, i want the card to be full width, how do i achieve this?

I expect it the card to be full width of the screen, but the card only wrap the children text widget

Upvotes: 4

Views: 5175

Answers (5)

Ashiqu Ali
Ashiqu Ali

Reputation: 1

Wrap the Column with a SizedBox widget and set it's width to double.infinity

SizedBox(
  width: double.infinity,
  child: Column(
    mainAxisSize: MainAxisSize.max,
    children: [],
  ),
)

Upvotes: 0

kunz
kunz

Reputation: 1047

  body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
            // flex:3,
              child: Container(
                padding: EdgeInsets.all(20.0),
                color: Colors.cyan,
                child: Text('1'),
              )//Container
          ),//Expanded         
        ],
      )//column

this should do the trick

enter image description here

Upvotes: 1

Son of Stackoverflow
Son of Stackoverflow

Reputation: 1679

Wrap the Column in a Container widget and set it's width to double.infinity

This way you'll save some lines of code.

Example Code:

Container(
  width : double.infinity,
  child: Column([...])
)

Upvotes: 4

Figen G&#252;ng&#246;r
Figen G&#252;ng&#246;r

Reputation: 12579

You can get the screen width with MediaQuery

final screenWidth = MediaQuery.of(context).size.width;

Upvotes: 0

Shahzad Akram
Shahzad Akram

Reputation: 5274

Try this.

Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              width: double.infinity,
              child: new Card(child: Text("This Card is Expanded to full width"),),
            )
          ],
        )

Upvotes: 1

Related Questions