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,
        ),
      ),
    ),
  );
}

CodePudding user response：

Replace the Row with a