Flutter - contain widgets within a container

Question

I am creating a widget that enables the user to select items from a multi-select list and then display those items. However, I am having an overflow issue with the widgets in the container. Instead of overflowing, I would like the items to display automatically on the next line.

Here is my relevant code for the Container that holds the selected items:

  Padding(
      padding: EdgeInsetsDirectional.fromSTEB(16, 0, 16, 8),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        children: [
          Expanded(
            child: Container(
                width: MediaQuery.of(context).size.width * 0.9,
                height: 50,
              child: showSelectedItemsWidget(selectedList)
            ),
          )
        ],
      ),
    ),

Here is the code for the showSelectedItemsWidget:

Widget showSelectedItemsWidgets(List<String> strings) {
  List<Widget> list = new List<Widget>();
  for(var i = 0; i < strings.length; i++){
    list.add( itemCapsule(strings[i]) );
  }
  return new Row(children: list);
}

Here is the code for the itemCapsule widget:

Widget itemCapsule(String label) {
  return Container(
    decoration: BoxDecoration(
      color: FlutterFlowTheme.secondary600,
      borderRadius: BorderRadius.circular(20),
      shape: BoxShape.rectangle,
    ),
    child: Padding(
      padding: EdgeInsetsDirectional.fromSTEB(10, 8, 10, 8),
      child: Text(label,
        textAlign: TextAlign.center,
        style: FlutterFlowTheme.bodyText1.override(
          fontFamily: 'Roboto',
          color: Colors.white,
          fontWeight: FontWeight.w500,
        ),
      ),
    ),
  );
}

Solution 1

Try below code hope its help to you. Add your Row Widget inside SingleChildScrollView and scrollDirection: Axis.horizontal, scroll your list horizontally.

Refer SingleChildScrollView here

 SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                Container(
                  margin: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.red,
                ),
                Container(
                  margin: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.blue,
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.red,
                ),
                Container(
                  margin: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.red,
                ),
                Container(
                  margin: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.yellow,
                ),
                Container(
                  margin: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.red,
                ),
                Container(
                  margin: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.black,
                ),
              ],
            ),
          ),

In your code

   return SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: list,
            ),
          ),

Your result screen->

Solution 2

Replace the Row with a Wrap

Widget showSelectedItemsWidgets(List<String> strings) {
  List<Widget> list = new List<Widget>();
  for(var i = 0; i < strings.length; i++){
    list.add( itemCapsule(strings[i]) );
  }
  return new Wrap(children: list);
}

Comments

[ramluro]

Thank you, this works great - really appreciate the response

[ramluro]

Thank you, this is a good alternative - really appreciate the response

[Ravindra S. Patil]

Happy to help you enjoy your ride with flutter upvote my answer thank you