Question 253528 in Flutter Question posted in
The official Flutter documentation can be found here.

bottom overflowed by pixels flutter

I want to include a bottomNavigation Bar in my project, It’s included in a container and I have given it a certain height and width. But I get "bottom overflowed by pixels flutter" at the bottom when I run the program.
I have included resizeToAvoidBottomInset: false, but it’s not working
Here is my code

import 'package:flutter/material.dart';
import 'package:listview/pages/cart.dart';

class BottomPage extends StatefulWidget {
  const BottomPage({super.key});

  @override
  State<BottomPage> createState() => _BottomPageState();
}

class _BottomPageState extends State<BottomPage> {
  @override
  Widget build(BuildContext context) {
    // ignore: unused_local_variable
    List pages = const [CartPage()];
    // ignore: unused_local_variable
    int index = 0;
    // ignore: sized_box_for_whitespace
    return SafeArea(
      
      child: Scaffold(
        resizeToAvoidBottomInset: false,

        body: pages[index],
        bottomNavigationBar: Container(
          // height: 20,
          // width: MediaQuery.sizeOf(context).width / 2,
          decoration: BoxDecoration(
            color: Colors.orange,
            borderRadius: BorderRadius.circular(12),
          ),
          child: Row(
            children: [
              GestureDetector(
                onTap: () {
                  setState(
                    () {
                      index = 0;
                    },
                  );
                  const Icon(Icons.home);
                },
              ),
            ],
          ),
        ),
      ),
    );
    // BottomNavigationBar(
    //   items: const [
    //     BottomNavigationBarItem(
    //       label: "Home",
    //       icon: Icon(Icons.home)
    //     ),
    //     BottomNavigationBarItem(
    //       label: "settings",
    //       icon: Icon(Icons.settings)
    //     ),
    //   ],
    // );

    
  }
}
Tags:

3

Answers


  1. 0

    Well from the gist of your code, I get the idea that you are starting flutter or a total newbie in it.

    import 'package:flutter/material.dart';
import 'app/modules/cart/view/cart_view.dart';

class BottomPage extends StatefulWidget {
  const BottomPage({super.key});

  @override
  State<BottomPage> createState() => _BottomPageState();
}

class _BottomPageState extends State<BottomPage> {
  @override
  Widget build(BuildContext context) {
    // ignore: unused_local_variable
    List pages = const [CartView()];
    // ignore: unused_local_variable
    int index = 0;
    // ignore: sized_box_for_whitespace
    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        body: pages[index],
        bottomNavigationBar: Container(
          // height: 20,
          // width: MediaQuery.sizeOf(context).width / 2,
          decoration: BoxDecoration(
            color: Colors.orange,
            borderRadius: BorderRadius.circular(12),
          ),
          child: Row(
            children: [
              GestureDetector(
                  onTap: () {
                    setState(
                      () {
                        index = 0;
                      },
                    );
                  },
                  child: const Icon(Icons.home)),
            ],
          ),
        ),
      ),
    );
 // BottomNavigationBar(
    //   items: const [
    //     BottomNavigationBarItem(label: "Home", icon: Icon(Icons.home)),
    //     BottomNavigationBarItem(label: "settings", icon: Icon(Icons.settings)),
    //   ],
    // );
  }
}

    Here I fixed your code, the Icon would not be inside the ontap method, and you have still a lot to learn.

    Login or Signup to reply.
  2. 0

    Just put const Icon(Icons.home) into child parameter of GestureDetector.

    update your code:

                  GestureDetector(
                onTap: () {
                  setState(
                        () {
                      index = 0;
                    },
                  );
                  //const Icon(Icons.home); ///=> remove this...
                },
                child: const Icon(Icons.home),
              ),
    Login or Signup to reply.
  3. 0

    There’s an issue in your code. You have declared the icon in onTap of GestureDetector but it should be declared as the child of it. Replace your bottomNavigationBar with :-

       bottomNavigationBar: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          decoration: BoxDecoration(
            color: Colors.orange,
            borderRadius: BorderRadius.circular(12),
          ),
          alignment: Alignment.center,
          child: GestureDetector(
            onTap: () {
              setState(
                () {
                  index = 0;
                },
              );
            },
            child: const Icon(Icons.home),
          ),
        ),
      ],
    ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search