Flutter 使浮动动作粘在底部导航栏

Question

I have a flutter app with a bottom navigation bar that has two items and a floating action button that is placed at the center. In my body I have a textfield that I inted to use a search box. Each time I click on the textfield the floating action button goes up along with the keayboard. Is there a way I can make the floating action button stick to the bottom or add it to the bottom nav bar so that whenever a use taps or uses the texfield it does no move up.

Here is the code for the bottom nav bar and floating action button and the textfield

    body: Column(children: [
        Padding(
          padding: const EdgeInsets.only(left: 16, right: 16,top: 20),
          child: Container(
            // padding: EdgeInsets.only(left:16,right: 16),
            height: 40,
            decoration: BoxDecoration(
              color: Color(0xffEBEDF4),
              borderRadius: BorderRadius.circular(25),
            ),
            child: Row(
              children: [
                Expanded(
                  flex: 2,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: TextFormField(
                      keyboardType: TextInputType.text,
                      inputFormatters: [UpperCaseTextFormatter()],
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 15,
                        fontFamily: 'PoppinsRegular',
                      ),
                      decoration: InputDecoration(
                        hintText: 'Search...',
                        hintStyle: theme.textTheme.caption!.copyWith(
                          color: const Color(0xffEBEDF4),
                        ),
                        isDense: true, // important line
                        contentPadding: const EdgeInsets.fromLTRB(10, 10, 10, 0),
                        fillColor:const Color(0xffEBEDF4),
                        filled: true,
                        border: InputBorder.none,
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide: const BorderSide(
                            color: Color(0xffEBEDF4),
                          ),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          borderSide:const BorderSide(
                            color: Color(0xffEBEDF4),
                            width: 1.0,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                IconButton(
                    onPressed: () {
                      searchStuff();
                    },
                    icon:const Icon(Icons.search)),
              ],
            ),
          ),
        ),
      ]),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print('Test bottom nav bar');
        },
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.call),
            label: 'Calls',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.chat),
            label: 'Chats',
          ),
        ],
        currentIndex: _selectedIndex, //New
        onTap: _onItemTapped,
      ),

This is how it looks like

Answer 1

To avoid widget pop-up, you can use this in Scaffold

Scaffold(
    resizeToAvoidBottomInset: false,
);

Otherwise, you try with persistent_bottom_nav_bar package