Found the solution, changed:
`if (selectedImage!.path.isEmpty) {_imageList.add(selectedImage);}`
to:
`if (selectedImage!.path.isNotEmpty) {_imageList.addAll(selectedImage);}`.
The new updated Image Select Code:
//Image Selection
final ImagePicker _picker = ImagePicker();
List<XFile>? _imageList = [];
void imageSelect() async {
final List<XFile>? selectedImages = await _picker.pickMultiImage();
if (selectedImages!.isNotEmpty) {
_imageList!.addAll(selectedImages);
}
setState(() {});
}
I then made a horizontal scrollable ListView:
Container(
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 140,
child: ListView.builder(
itemCount: _imageList!.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) => Container(
height: 140,
width: 140,
margin: EdgeInsets.all(10),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Stack(
fit: StackFit.expand,
children: [
Image.file(File(_imageList![index].path),
fit: BoxFit.cover),
Positioned(
right: 4,
top: 5,
child: Container(
color:
Color.fromRGBO(255, 255, 244, 0.3),
child: IconButton(
onPressed: () {
//Deletes images from list and ListView
_imageList!.removeAt(index);
setState(() {});
},
icon: Icon(Icons.delete),
color: Colors.red[800])),
)
],
),
),
)))
],
))),
You need to place `Expanded` in two places
body: Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.all(10),
padding: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.grey,
width: 1,
),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.keyboard_arrow_down),
iconEnabledColor: Colors.grey,
iconSize: 50,
elevation: 16,
isExpanded: true,
style: TextStyle(color: Colors.black),
underline: Container(height: 2),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>["Swift", "Dart"]
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
Expanded( //TODO: Add Expanded here
child: Container(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
TextField(
obscureText: true,
onChanged: (value) {
filterSearchResults(value);
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color.fromRGBO(111, 192, 81, 1),
width: 1.5,
),
borderRadius: BorderRadius.circular(10),
),
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
hintText: "Search",
prefixIcon: new Icon(Icons.search, color: Colors.grey),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
borderSide: BorderSide(width: 1, color: Colors.grey),
),
),
),
Expanded( //TODO: Add Expanded here
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text('${items[index]}'),
);
},
),
),
],
),
),
),
],
)
