z1gzag3
z1gzag3

Reputation: 1

RenderFlex overflowed error when popping previous page with virtual keyboard open

I have two pages in my application. SearchScreen and MovieScreen.

User can search movies on the SearchScreen and when he chooses one movie from the search results, the navigation (using go_router package) pushes MovieScreen page for the specific movie (context.push).

The MovieScreen page (except other stuff) has a background widget which displays image and certain gradients on the background of the page.

class MovieScreenBackground extends StatelessWidget {
  const MovieScreenBackground({super.key});

  @override
  Widget build(BuildContext context) {
    MovieScreenSettings settings =
        MovieScreenSettingsWrapper.of(context)!.settings;
    String posterPath = context.select((MovieScreenBloc bloc) =>
        bloc.state.movieData!.basicData.posterPath.path!);
    MovieScreenStateColors colors = context.select((MovieScreenBloc bloc) =>
        bloc.state.colors!);
    return Stack(
      children: [
        SizedBox(
          height: settings.bgImageHeight,
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(posterPath),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        Column(
          children: [
            SizedBox(
              height: settings.bgImageHeight,
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      colors.bgTertiaryColor.withOpacity(0.5),
                      colors.bgPrimaryColor.withOpacity(1.0),
                    ],
                    stops: const [0, 1],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                      colors: [
                        colors.bgPrimaryColor,
                        colors.bgPrimaryColor.darken(95)
                      ],
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      stops: const [0, 1]),
                ),
              ),
            ),
          ],
        )
      ],
    );
  }
}

My issue is that when going back to the previous page (SearchScreen) using native Android back button or in-app back button (context.pop) I get RenderFlex overflowed error. It reads that source of the error is the Column widget in the MovieScreenBackground class which is pretty weird to me as it shouldn't be rendered going back to previous page. I am pretty certain that the issue is coming from the virtual keyboard popping up when going back to SearchScreen page.

What is also weird is that this error is not noticeable in the app. It only appears in the debug console but doesn't seem to stop or present any bad behaviour in the app itself.

I tried these solutions:

  1. Tried wrapping Column in the SingleChildScrollView. I think this can't work for me, because I need my very bottom Container in the Column to be wrapped in the Expanded widget to take all remaining space on the background.

  2. Changing resizeToAvoidBottomInset property of the Scaffold to false. This gets rid of the RenderFlex overflowed error but it for some reason changes appearing of the popped-up keyboard in a strange way.

resizeToAvoidBottomInset = true

resizeToAvoidBottomInset = false

  1. Tried wrapping Column with CustomScrollView along with SliverFillRemaining. This doesn't work.

Are there any other solutions? Or should I just ignore the error as it doesn't cause any noticeable issue in the app (except being showed in the debug console)?

Upvotes: 0

Views: 50

Answers (0)

Related Questions