Flutter widget not rendering on the screen. I am getting the following error : "A RenderFlex overflowed by Infinity pixels on the bottom."

Question

I am working on a flutter app. The widgets are not rendering on the screen. Here's the problamatic code:

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Let's get productive!"),
        ),
        body: Material(
          child: Column(
            children: [
              Pomodoro(),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
              //backgroundColor:
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.analytics),
              label: 'Home',
              //backgroundColor:
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Home',
              //backgroundColor:
            ),
          ],
        ),
      ),
    );
  }
}

The Pomodoro class

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Color(0xff1542bf), Color(0xff51a8ff)],
            begin: FractionalOffset(0.5, 1),
          ),
        ),
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Padding(
              padding: EdgeInsets.all(12.0),
              child: Text(
                "Pomodoro",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 30.0,
                ),
              ),
            ),
            const SizedBox(
              height: 20.0,
            ),
            Expanded(
              child: CircularPercentIndicator(
                radius: 250.0,
                percent: percent,
                animation: true,
                animateFromLastPercent: true,
                lineWidth: 20.0,
                progressColor: Colors.white,
                backgroundWidth: 50.0,
                center: Text(
                  "$timeInMinute",
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 80.0,
                  ),
                ),
              ),
            ),
            const SizedBox(
              height: 20.0,
            ),
          ],
        ),
      ),
    );
  }
}

I have tried changing the height and width of the container, removing the scaffold and just returning the container, and removing the container just keeping the column in the scaffold body and removing the expanded widget. No matter what I do, I get the same error. Kindly help me.

Also, I do not want to make the home screen scrollable. I want everything to fit inside the screen and also be responsive to different screen sizes. I tried media queries to give size but that too didn't work.

Here's the link to the github repo for the app:

Answer 1

There are a few issues with your code.

1. The error is saying your widget is overflowing on the bottom, so you need to make your page scrollable. You can change your column to a ListView instead:

          child: Material(
            child: ListView(
              shrinkWrap: true,
              children: [
                Pomodoro(),
              ],
            ),
          ),
   

2. Your container in Pomodoro() doesn't have a height parameter, which is causing renderbox issues.

      Container(
      decoration: const BoxDecoration(...),
      width: double.infinity,
      height: 500.0, //add a height
   

Answer 2

You need to remove some widgets to make your above code work.

Firstly, remove the Scaffold widget from Pomodoro class. Lastly, remove the Expanded Widget from your CircularPercentIndicator. It will fix your error. Check below code for Pomodoro class.

return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xff1542bf), Color(0xff51a8ff)],
          begin: FractionalOffset(0.5, 1),
        ),
      ),
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const Padding(
            padding: EdgeInsets.all(12.0),
            child: Text(
              "Pomodoro",
              style: TextStyle(
                color: Colors.white,
                fontSize: 30.0,
              ),
            ),
          ),
          const SizedBox(
            height: 20.0,
          ),
          CircularPercentIndicator(
            radius: 250.0,
            percent: 0.8,
            animation: true,
            animateFromLastPercent: true,
            lineWidth: 20.0,
            progressColor: Colors.white,
            backgroundWidth: 50.0,
            center: Text(
              "00.00",
              style: const TextStyle(
                color: Colors.white,
                fontSize: 80.0,
              ),
            ),
          ),
          const SizedBox(
            height: 20.0,
          ),
        ],
      ),
    );

If you want your Pomodoro widget to take up the whole screen just wrap the container with an Expanded widget.

Answer 3

Here is a revised tested and working code.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Let's get productive!"),
        ),
        body: Material(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Pomodoro(),
              ],
            ),
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
             
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.analytics),
              label: 'Home',
             
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Home',
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xff1542bf), Color(0xff51a8ff)],
          begin: FractionalOffset(0.5, 1),
        ),
      ),
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height / 6,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const Padding(
            padding: EdgeInsets.all(12.0),
            child: Text(
              "Pomodoro",
              style: TextStyle(
                color: Colors.white,
                fontSize: 30.0,
              ),
            ),
          ),
          const SizedBox(
            height: 20.0,
          ),
          Expanded(
            child: CircularProgressIndicator(),
          ),
          const SizedBox(
            height: 20.0,
          ),
        ],
      ),
    );
  }
}