Bottom Navigation Bar still Sticks to Top of Keyboard after "resizeToAvoidBottomInset: false" adding this

Question

I have tried resizeToAvoidBottomInset: false , as a solution, but it doesn't work. When the keyboard is open, the bottom navigation bar still sticks to the top of the keyboard. How can I stop this? The code for the bottom navigation bar is given below. How can I fix this?

@override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      key: _scaffoldKey,
      
      bottomNavigationBar: Theme(
        data: ThemeData(
          canvasColor: Color.fromARGB(255, 0, 0, 0),
        ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          iconSize: 30,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Text(
                currentDay.toString(),
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.w700,
                  color: _currentIndex == 0 ? Colors.blue : Colors.white,
                ),
              ),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.folder),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.add),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.list),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: '',
            ),
          ],
          selectedItemColor: Colors.blue, // Color of the selected item
          unselectedItemColor: Colors.white, // Color of unselected items
          currentIndex: _currentIndex,
          onTap: (int index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
    );
  }

Answer 1

I've reproduced your code and everything is working fine. Can you give some more details about the body of the Scaffold? What kind of Widget is used? Furthermore, what kind of device is used?

My solution with TextFormField works fine. When focus is moved to the input field. The BottomNavigationBar remains in the bottom area.

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});


final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
final GlobalKey _scaffoldKey = GlobalKey();
final TextEditingController _testInput = TextEditingController();
final GlobalKey<FormState> _testKey = GlobalKey<FormState>();

int _currentIndex = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
  resizeToAvoidBottomInset: false,
  key: _scaffoldKey,
  bottomNavigationBar: Theme(
    data: ThemeData(
      canvasColor: const Color.fromARGB(255, 0, 0, 0),
    ),
    child: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      iconSize: 30,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Text(
            "LOL",
            style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.w700,
                color: Colors.blue),
          ),
          label: '',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.folder),
          label: '',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.add),
          label: '',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.list),
          label: '',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: '',
        ),
      ],
      selectedItemColor: Colors.blue, // Color of the selected item
      unselectedItemColor: Colors.white, // Color of unselected items
      currentIndex: _currentIndex,
      onTap: (int index) {
        setState(() {
          _currentIndex = index;
        });
      },
    ),
  ),
  body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
    SizedBox(
        width: 250,
        child: TextFormField(
          key: _testKey,
          controller: _testInput,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          onSaved: (newValue) {},
          decoration: const InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'TestField',
          ),
        )),
    const Text("Hi")
  ]),
);}}