CODEWITHSUNDEEP
flutterdart
Pythopath
Pythopath

Reputation: 37

SizedBox does not work inside listview- Flutter

 Scaffold(
  appBar: AppBar(
    leading: Icon(Icons.arrow_back),
    centerTitle: true,
    title: Text("Select Time Slot"),
  ),
  body: ListView(
    children: <Widget>[
      SizedBox(
        width: 150,
        child: Card(
          child: Text(
            "11 AM - 1 PM",
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
        ),
      )
    ],
  ),
);

I expect that card occupies width 150, but it is taking complete width available.

enter image description here

What should I do to get the expected Result?

Upvotes: 1

Views: 4609

Answers (3)

AL.Sharie
AL.Sharie

Reputation: 1615

instead of using ListView try using Column and wrap it with SingleChildScrollView



 Scaffold(
  appBar: AppBar(
    leading: Icon(Icons.arrow_back),
    centerTitle: true,
    title: Text("Select Time Slot"),
  ),
  body: Container(
height:300;
child:SingleChildScrollView(
   child:Column(
    crossAxisAlignment: CrossAxisAlignment.center
    children: <Widget>[
      SizedBox(
        width: 150,
        child: Card(
          child: Text(
            "11 AM - 1 PM",
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
        ),
      )
    ],
  ),
 ),
),
);

Upvotes: 0

Lakmal Fernando
Lakmal Fernando

Reputation: 1540

if you want to center the card with 150 width wrap it with center widget. center widget will set card width to 150 and will fill the remaining width by centering card to middle.

      Center(child: 
      SizedBox(
        width: 150,
        child: Card(
          child: Text(
            "11 AM - 1 PM",
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
        ),
      ))
    ],

otherwise you can use Align widget to align the card as you preference.

Upvotes: 5

Hamed Rezaee
Hamed Rezaee

Reputation: 7222

check this one:

home: Scaffold(
  appBar: AppBar(
    leading: const Icon(Icons.arrow_back),
    centerTitle: true,
    title: const Text("Select Time Slot"),
  ),
  body: ListView(
    children: <Widget>[
      Row(
        children: const <Widget>[
          SizedBox(
            width: 150,
            child: Card(
              child: Text(
                "11 AM - 1 PM",
                style:
                TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
            ),
          )
        ],
      )
    ],
  ),
)

Upvotes: 1

Related Questions