Getting overflowed error on dynamic chips in flutter - flutter

Question

I am developing this UI in flutter (1st attached picture). Fetching chips from DB and dynamically creating their list. When rendering them on the UI, I am getting overflowed error (2nd attached picture). I want chips to move to the next line if there is no space available. Following is my code:
Container(
padding: EdgeInsets.only(left: 5.0, right: 5.00),
child: Card(
elevation: 4,
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(
top: 10.0, bottom: 10.00, left: 10.0, right: 10.00),
child: Column(children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
child: Text('Every Month',
style: TextStyle(
fontSize: 14,
color: Color(0xFF0d1b41),
fontFamily: 'Poppins',
fontWeight: FontWeight.bold)),
),
new Container(
child: Text('Every 28th of month',
style: TextStyle(
fontSize: 12,
color: Color(0xFFb1b1b1),
fontFamily: 'Poppins',
fontWeight: FontWeight.bold)),
),
],
),
Column(
children: <Widget>[
new Container(
padding: EdgeInsets.only(
bottom: 20.0,
),
child: Text('Scheduled',
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 12,
color: Color(0xFFfbb450),
fontFamily: 'Poppins',
fontStyle: FontStyle.italic,
)),
),
],
),
],
),
SizedBox(height: 10),
Divider(
color: Colors.grey[500],
thickness: 1.0,
),
Row(children: <Widget>[
Column(
children: <Widget>[
new Container(
width: 60,
height: 70,
padding: EdgeInsets.only(
top: 10.0,
bottom: 40.00,
left: 10.0,
right: 8.00),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: new NetworkImage(
'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80'),
fit: BoxFit.fill,
),
),
),
],
),
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: 220,
child: new Text(
"Coca Cola Zero",
style: new TextStyle(
fontSize: 18.0,
color: Color(0xff8c8c8c),
fontWeight: FontWeight.bold,
fontFamily: 'Poppins'),
textAlign: TextAlign.left,
),
)
],
),
SizedBox(height: 10.0),
generateTags(tagList),
SizedBox(height: 10.0),
]),
]),
])),
],
),
));
static Widget generateTags(List<String> productTagList) {
tagList = productTagList;
return Wrap(
children: tagWidgets.toList(),
);
}
Kindly guide me to create this UI

Answer 1

not exact... but you can modify ...
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
// This makes the visual density adapt to the platform that you run
// the app on. For desktop platforms, the controls will be smaller and
// closer together (more dense) than on mobile platforms.
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var list1 = ["abc", "sdf", "ags", "qwe","eded","ecc","fef","g4g","wev"];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[imgWidget(), content()],
),
],
));
}
imgWidget() {
return Container(
height: 40.0,
width: 40.0,
color: Colors.amber,
);
}
content() {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[_title(), _chips(), _actionBtns()],
);
}
_title() {
return Text("CocaCola Zero");
}
_chips() {
return Container(
width: MediaQuery.of(context).size.width-50,
child: Wrap(
children: list1.map((String e) => Chip(label: Text(e))).toList(),
),
);
}
_actionBtns() {
return Row(
children: <Widget>[
_customBTN(icon: Icons.edit, btnName: "Edit", onTap: () {}),
_customBTN(icon: Icons.delete, btnName: "Delete", onTap: () {})
],
);
}
_customBTN({Function onTap, String btnName, IconData icon}) {
return MaterialButton(
child: Row(
children: <Widget>[
Icon(icon),
Text(btnName),
],
),
onPressed: onTap);
}
}

Answer 2

Please use wrap your chips Wrap widget.
class MultiSelectChip extends StatefulWidget {
final List<String> reportList;
final Function(List<String>) onSelectionChanged; // +added
MultiSelectChip(
this.reportList,
{this.onSelectionChanged} // +added
);
#override
_MultiSelectChipState createState() => _MultiSelectChipState();
}
class _MultiSelectChipState extends State<MultiSelectChip> {
// String selectedChoice = "";
List<String> selectedChoices = List();
_buildChoiceList() {
List<Widget> choices = List();
widget.reportList.forEach((item) {
choices.add(Container(
padding: const EdgeInsets.all(2.0),
child: ChoiceChip(
label: Text(item),
selected: selectedChoices.contains(item),
onSelected: (selected) {
setState(() {
selectedChoices.contains(item)
? selectedChoices.remove(item)
: selectedChoices.add(item);
widget.onSelectionChanged(selectedChoices); // +added
});
},
),
));
});
return choices;
}
#override
Widget build(BuildContext context) {
return Wrap(
children: _buildChoiceList(),
);
}
}