A Renderflex Overflowed By 99241 Pixels On The Bottom & Null Check Operator Used On A Null Value

======== Exception caught by widgets library ======================================================= The following _CastError was thrown building BottomTabBtn(dirty): Null check op

Solution 1:

You've to first set a proper width and height to your custom tab-bar and use expanded widget to your tab items with equal flex.

import 'package:flutter/material.dart';

class BottomTabs extends StatefulWidget {
  final int? selectedTab;
  final Function(int)? tabPressed;

  BottomTabs({this.selectedTab, this.tabPressed});

  @override
  _BottomTabsState createState() => _BottomTabsState();
}

class _BottomTabsState extends State<BottomTabs> {
  int _selectedTab = 0;

  @override
  Widget build(BuildContext context) {
    _selectedTab = widget.selectedTab ?? 0;

    return Container(
      height: 56, // Set height as per your need
      width: MediaQuery.of(context).size.width, // Screen Width
      decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(12.0), topRight: Radius.circular(12.0)),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.05),
              spreadRadius: 1.0,
              blurRadius: 30.0,
            )
          ]),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Expanded(
            flex: 1, // Expanded with flex 1 for all items
            child: BottomTabBtn(
              imagePath: "assets/images/tab_home.png",
              selected: _selectedTab == 0 ? true : false,
              onPressed: () {
                widget.tabPressed!(0);
              },
            ),
          ),
          Expanded(
            flex: 1,
            child: BottomTabBtn(
              imagePath: "assets/images/tab_search.png",
              selected: _selectedTab == 1 ? true : false,
              onPressed: () {
                print("pressed search");
                widget.tabPressed!(1);
              },
            ),
          ),
          Expanded(
            flex: 1,
            child: BottomTabBtn(
              imagePath: "assets/images/tab_saved.png",
              selected: _selectedTab == 2 ? true : false,
              onPressed: () {
                widget.tabPressed!(2);
              },
            ),
          ),
          Expanded(
            flex: 1,
            child: BottomTabBtn(
              imagePath: "assets/images/tab_logout.png",
              selected: _selectedTab == 3 ? true : false,
              onPressed: () {
                widget.tabPressed!(3);
              },
            ),
          )
        ],
      ),
    );
  }
}

I found one issue with your gesture on pressed and I've corrected that as well:

class BottomTabBtn extends StatelessWidget {
  final String? imagePath;
  final bool? selected;
  final Function? onPressed;

  BottomTabBtn({this.imagePath, this.selected, this.onPressed});

  @override
  Widget build(BuildContext context) {
    bool _selected = selected ?? false;

    return GestureDetector(
      onTap: () {
        onPressed!();
      },
      child: Container(
        decoration: BoxDecoration(
            border: Border(
                top: BorderSide(
          color: _selected ? Theme.of(context).accentColor : Colors.transparent,
          width: 2.0,
        ))),
        child: Center(
          child: Image(
            image: AssetImage(imagePath ?? "assets/images/tab_home.png"),
            width: 22.0,
            height: 22.0,
            color: _selected ? Theme.of(context).accentColor : Colors.black,
          ),
        ),
      ),
    );
  }
}

Final outcome:

Solution 2:

There are multiple ways you can handle this:

1. Read the details of the log which provides a hint as to next steps. Line 32 is the offendor. Add an Expanded widget so that the row is properly constrained.

"The relevant error-causing widget was: Row file:///C:/Users/bhask/StudioProjects/your_store/lib/widgets/bottom_tabs.dart:32:14 The overflowing RenderFlex has an orientation of Axis.horizontal. 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."

2. If using Android Studio you can click on "Flutter Inspector" which can help you narrow down the offending widget and test out various options to remove the overflow.

My guess: 99241 pixels is a lot! If your assets (assets/images/tab_home.png) are not scaled properly. You can potentially verify these are the specific offenders by replacing them with an Icon() widget.