How can you reduce the width of a RaisedButton inside a ListView.builder?

Question

I can't seem to figure out how to reduce the width of a RaisedButton inside a ListView.builder.

ListView.builder(
          itemCount: streetList.length,
          itemBuilder: (context, index) {
            bool first = 0 == (index);
            bool last = streetList.length - 1 == (index);
            EdgeInsets itemEdges = EdgeInsets.only(bottom: 20);

            if (first) {
              itemEdges = EdgeInsets.only(top: 50, bottom: 20);
            } else if (last) {
              itemEdges = EdgeInsets.only(bottom: 50);
            }

            return Container(
              margin: EdgeInsets.symmetric(horizontal: 30),
              padding: itemEdges,
              child: SizedBox(
                // height: 50,
                child: RaisedButton(
                  child: Text(streetList[index]),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => StreetNumberList(
                            widget.peopleList, (streetList[index])),
                      ),
                    );
                  },
                ),
              ),
            );
          }),

I get this:

I'm trying to reduce the width of the RaisedButtons but it seems like ListView.builder items are set to use max width all the time. How can I override that?

Thanks!

Answer 1

If you want the default size of the RaisedButton just add the Align widget as parent

    return Container(
                  margin: EdgeInsets.symmetric(horizontal: 30),
                  padding: itemEdges,
                  child: Align(
                      child: RaisedButton(
                        child: Text("index: $index"),
                        onPressed: () {},
                     
                    ),
                  ),
                );

If you want to change the size use SizedBox inside Align

    return Container(
                  margin: EdgeInsets.symmetric(horizontal: 30),
                  padding: itemEdges,
                  child: Align(
                    child: SizedBox(
                      width: 250,
                      child: RaisedButton(
                        child: Text("index: $index"),
                        onPressed: () {},
                      ),
                    ),
                  ),
                );

For more details check this: https://docs.flutter.dev/development/ui/layout/constraints