Issue
I’m trying to add multi image selection in my app, I’m not getting any errors from the code yet the images won’t show up in the GridView. When I click on the button to select an image it takes me back to the page then when I type in the Description TextFormField I get a black and yellow bar saying that the bottom is overflowed by 36 pixels, I used the image_picker package for the app.
Image Select Code (Inside of statefull class):
final ImagePicker _picker = ImagePicker();
final List<XFile> _imageList = [];
void imageSelect() async {
final XFile? selectedImage =
await _picker.pickImage(source: ImageSource.gallery);
if (selectedImage!.path.isEmpty) {
_imageList.add(selectedImage);
}
setState(() {});
}
GridView for images:
Expanded(
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemCount: _imageList.length,
itemBuilder: (BuildContext context, int index) {
return Image.file(File(_imageList[index].path),
width: 20, height: 20);
}),
)
Debug Console:
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a
yellow and black striped pattern. This is usually caused by the contents being too big
for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of
the RenderFlex to fit within the available space instead of being sized to their natural
size.
This is considered an error condition because it indicates that there is content that
cannot be seen. If the content is legitimately bigger than the available space, consider
clipping it with a ClipRect widget before putting it in the flex, or using a scrollable
container rather than a Flex, like a ListView.
The specific RenderFlex in question is: RenderFlex#1b4ea relayoutBoundary=up2
OVERFLOWING
════════════════════════════════════════════════════════════════════════════════
I/ample.learn_ap(15419): Background concurrent copying GC freed 7381(374KB) AllocSpace
objects, 1(20KB) LOS objects, 54% free, 1264KB/2MB, paused 16.731ms total 410.005ms
Reloaded 1 of 580 libraries in 7 065ms.
D/EGL_emulation(15419): eglMakeCurrent: 0xde785b40: ver 2 0 (tinfo 0xde783f70)
2
D/EGL_emulation(15419): eglMakeCurrent: 0xe4b45500: ver 2 0 (tinfo 0xc9dfeef0)
D/EGL_emulation(15419): eglMakeCurrent: 0xde785b40: ver 2 0 (tinfo 0xde783f70)
════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 36 pixels on the bottom.
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a
yellow and black striped pattern. This is usually caused by the contents being too big
for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of
the RenderFlex to fit within the available space instead of being sized to their natural
size.
This is considered an error condition because it indicates that there is content that
cannot be seen. If the content is legitimately bigger than the available space, consider
clipping it with a ClipRect widget before putting it in the flex, or using a scrollable
container rather than a Flex, like a ListView.
The specific RenderFlex in question is: RenderFlex#1b4ea relayoutBoundary=up2
OVERFLOWING
════════════════════════════════════════════════════════════════════════════════
D/EGL_emulation(15419): eglMakeCurrent: 0xde785b40: ver 2 0 (tinfo 0xde783f70)
2
D/EGL_emulation(15419): eglMakeCurrent: 0xe4b45500: ver 2 0 (tinfo 0xc9dfeef0)
2
D/EGL_emulation(15419): eglMakeCurrent: 0xde785b40: ver 2 0 (tinfo 0xde783f70)
I/ample.learn_ap(15419): IncrementDisableThreadFlip blocked for 22.032ms
I/ample.learn_ap(15419): Background concurrent copying GC freed 28331(1175KB) AllocSpace
objects, 5(228KB) LOS objects, 50% free, 1519KB/2MB, paused 22.899ms total 351.693ms
2
D/EGL_emulation(15419): eglMakeCurrent: 0xe4b45500: ver 2 0 (tinfo 0xc9dfeef0)
D/EGL_emulation(15419): eglMakeCurrent: 0xde785b40: ver 2 0 (tinfo 0xde783f70)
I/Choreographer(15419): Skipped 34 frames! The application may be doing too much work
on its main thread.
Solution
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])),
)
],
),
),
)))
],
))),
Answered By – Botshelo Ramela
Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)