flutter multiselect not working or need something similar - flutter

Question

I am new to flutter, and am trying to create a dropdown box where the user can select multiple options or something similar to a dropdown box. The only thing I have found on the internet is multiselect, but I can't get it to work.
I have tried making it the only child in my widget tree and also I have tried switching the versioning around in my pubsec.yaml file to no avail.
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_multiselect/flutter_multiselect.dart';
//void main() => runApp(MaterialApp(Choices()));
Future<Null> main() async {
runApp(
MaterialApp(
title: "multiselect help",
debugShowCheckedModeBanner: false,
initialRoute: 'Choices',
routes: {
'Choices': (BuildContext context) => Choices(),
},
),
);
}
class Choices extends StatefulWidget {
Choices({Key key}) : super(key: key);
#override
_ChoicesState createState() => _ChoicesState();
}
class _ChoicesState extends State<Choices> {
String _value;
String _value2;
String _value3;
List _myActivities = [];
String _myActivitiesResult = '';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: Row(
children: <Widget>[
/* DropdownButton<String>(
items: [
DropdownMenuItem(
value: "1",
child: Text("1"),
),
DropdownMenuItem(
value: "2",
child: Text("2"),
),
],
onChanged: (value) {
setState(() {
_value = value;
});
},
hint: Text("Item"),
value: _value,
),
DropdownButton<String>(
items: [
DropdownMenuItem(
value: "1",
child: Text("1"),
),
DropdownMenuItem(
value: "2",
child: Text("2"),
),
DropdownMenuItem(
value: "3",
child: Text("3"),
),
DropdownMenuItem(
value: "4",
child: Text("4"),
),
],
onChanged: (value) {
setState(() {
_value2 = value;
});
},
//new code
hint: Text("#"),
value: _value2,
),
*/
MultiSelect(
autovalidate: false,
titleText: "hi",
validator: (value) {
if (value == null) {
return 'Please select one or more option(s)';
}
},
errorText: 'Please select one or more option(s)',
dataSource: [
{
"display": "Australia",
"value": 1,
},
{
"display": "Canada",
"value": 2,
},
{
"display": "India",
"value": 3,
},
{
"display": "United States",
"value": 4,
}
],
textField: 'display',
valueField: 'value',
filterable: true,
required: true,
value: null,
onSaved: (value) {
print('The value is $value');
}
),
],
),
),
),
);
}
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Next Page"),
),
body: Choices()
);
}
In the expected results I would have a dropdown or something similar where I can make multiple selections. The actual results show nothing, including not even showing the brother/sister widgets when they are not commented out. Thanks for your help!

Answer 1

When dealing with Row, layouts can sometimes end up with an infinite width, which is what's happening here. Luckily, the solution is simple. Just wrap the MultiSelect widget in the Expanded widget, and it will constrain the MultiSelect to only use the available width, and no more.
So
MultiSelect(...),
becomes
Expanded(
child: MultiSelect(...),
),
Alternatively, you can remove the Row entirely and just put MultiSelect as a single Widget.