How to Change width of element inside ListView?

Question

I have a ListView with some items, but my problem is that the item inside the ListView will expand through the all-screen width, and I tried to use SizedBox and Container but it doesn't work for me. Here is my code:

  body: ListView.builder(
    itemCount: 10,
    itemBuilder: (ctx, index) {
      return SizedBox(
        width: 10,
        height: 10,
        child: Card(
          color: btnColor,
          child: Text(
            "Helo",
            // loremIpsum,
            style: TextStyle(color: Colors.black.withOpacity(0.6)),
          ),
        ),
      );
    },
  ),

Dichlorodifluoromethane

Answer 1

I fixed my issue from this link:

body: ListView.builder(
        itemCount: 10,
        itemBuilder: (ctx, index) {
          return Row(
            children: [
              Container(height: 50, width: 50, color: Colors.black),
            ],
          );
        },
      ),

Just use Row inside the ListView

Dichlorodifluoromethane

Answer 2

Try wrap it in Row like this:

  body: ListView.builder(
    itemCount: 10,
    itemBuilder: (ctx, index) {
      return Row(
       children:[
         SizedBox(
          width: 10,
          height: 10,
          child: Card(
           color: btnColor,
           child: Text(
            "Helo",
            // loremIpsum,
            style: TextStyle(color: Colors.black.withOpacity(0.6)),
          ),
        ),
      )]
     );
    },
  ),

Enterectomy

Answer 3

Alternatively you can wrap your child widget in a container and set alignment to Alignment.centerLeft

 body: ListView.builder(
        itemCount: 10,
        itemBuilder: (ctx, index) {
          return ListView.builder(
            itemCount: 10,
            itemBuilder: (ctx, index) {
              return Container(
                alignment: Alignment.centerLeft,
                child: Card(
                  color: Colors.green,
                  child: Text(
                    "Helo",
                    // loremIpsum,
                    style: TextStyle(color: Colors.black.withOpacity(0.6)),
                  ),
                ),
              );
            },
          );
        },
      ),

Intervene

Answer 4

Widget build(BuildContext context) { var screenWidth = MediaQuery.of(context).size.width;

return Scaffold(
  body: SingleChildScrollView(
    child: Container(
      width: screenWidth / 2, //Takes half of the screen size
      child: ListView.builder(
        physics: NeverScrollableScrollPhysics(),
        itemCount: 10,
        itemBuilder: (ctx, index) {
          return Text(index.toString());
        },
      ),
    ),
  ),
);

}

Quiescent

Answer 5

You can make this with FittedBox in a Alignlike this:

ListView.builder(
  itemCount: 10,
  itemBuilder: (ctx, index) {
    return Align(
      alignment: Alignment.centerLeft,
      child: FittedBox(
        child: Container(height: 50, width: 50, color: Colors.black),
      ),
    );
  },
)

Formalin