Flutter Renderflex Puzzle

Viewed 22

I've been trying to solve this for 2 days. I think I've tried every combo, and read through 100 tutorials on here. No matter what I do, I keep getting the same error. One of my columns keeps overflowing. I've marked it with a comment.

The problematic column is inside of AlignedGridView, which is gridview builder like listview. Since this doesn't have a defined height, it keeps throwing the error. I've tried wrapping it in an expanded widget, but that doesn't work.

I'm trying not to define a height because it makes the design look ugly.

If there are any Flutter layout wizards out there who can help, I'm all ears!

Chris

    class SoundscapesGrid extends StatefulWidget {
      const SoundscapesGrid({
        Key? key,
        this.width,
        this.height,
        this.soundscapesList,
      }) : super(key: key);
    
      final double? width;
      final double? height;
      final List<SoundscapesRecord>? soundscapesList;
    
      @override
      _SoundscapesGridState createState() => _SoundscapesGridState();
    }
    
    class _SoundscapesGridState extends State<SoundscapesGrid> {
      @override
      Widget build(BuildContext context) {
        return SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Row(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  if (responsiveVisibility(
                    context: context,
                    phone: false,
                  ))
                    Expanded(
                      flex: 1,
                      child: Container(
                        width: 100,
                        decoration: BoxDecoration(),
                      ),
                    ),
                  Expanded(
                    flex: 2,
                    child: Padding(
                      padding: const EdgeInsetsDirectional.fromSTEB(0, 0, 0, 30),
                      child: AlignedGridView.count(
                        crossAxisCount: 2,
                        mainAxisSpacing: 50,
                        crossAxisSpacing: 20,
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        itemCount: widget.soundscapesList!.length,
                        itemBuilder: (context, index) {
                          return InkWell(
                            onTap: () async {
                              await Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder: (context) => SoundscapePageWidget(
                                    soundscapeImageUrl: widget
                                        .soundscapesList![index].soundscapeImageUrl,
                                    soundscapeName: widget
                                        .soundscapesList![index].soundscapeName,
                                    soundscapeDescription: widget
                                        .soundscapesList![index]
                                        .soundscapeDescription,
                                    soundscapeUid:
                                        widget.soundscapesList![index].uid,
                                  ),
                                ),
                              );
                            },
/*THIS IS WHERE IT'S OVERFLOWING*/ child: Column(
                              mainAxisSize: MainAxisSize.max,
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: [
                                Row(
                                  mainAxisSize: MainAxisSize.max,
                                  children: [
                                    Expanded(
                                      child: Padding(
                                        padding:
                                            const EdgeInsetsDirectional.fromSTEB(
                                                0, 0, 0, 5),
                                        child: ClipRRect(
                                          borderRadius: BorderRadius.circular(8),
                                          child: Image.network(
                                            widget.soundscapesList![index]
                                                .soundscapeImageUrl!,
                                            width:
                                                MediaQuery.of(context).size.width,
                                            fit: BoxFit.cover,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                                Row(
                                  mainAxisSize: MainAxisSize.max,
                                  children: [
                                    Expanded(
                                      child: Padding(
                                        padding:
                                            const EdgeInsetsDirectional.fromSTEB(
                                                0, 10, 0, 5),
                                        child: Text(
                                            widget.soundscapesList![index]
                                                .soundscapeName!,
                                            style: FlutterFlowTheme.of(context)
                                                .title3),
                                      ),
                                    ),
                                  ],
                                ),
                                Row(
                                  mainAxisSize: MainAxisSize.max,
                                  children: [
                                    Expanded(
                                      child: Text(
                                          widget.soundscapesList![index]
                                              .soundscapeDescription!,
                                          style: FlutterFlowTheme.of(context)
                                              .bodyText2),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                  if (responsiveVisibility(
                    context: context,
                    phone: false,
                  ))
                    Expanded(
                      flex: 1,
                      child: Container(
                        width: 100,
                        decoration: BoxDecoration(),
                      ),
                    ),
                ],
              ),
              const SizedBox(height: 20),
            ],
          ),
        );
      }
    }
0 Answers
Related