How to update only half part of screen with bottom Navigation tab bar content in Flutter

Question

Have 'TextInputArea' widget, and want to keep this widget remain on screen (upper part of screen) all the time,

Lower part of screen need to be changed as per BottomNavigationBar (it has three pages XX,YY,ZZ) is clicked

But 'TextInputArea' is not getting loaded on screen.

Tried something like this

Widget build(BuildContext context) {
    returnScaffold(
        appBar: AppBarWidget(),
        body: TextInputArea(),          
        bottomNavigationBar: Location(),
        floatingActionButton: TextFloatingButtonSpeedDial(),
      ),
  }

Location.dart

class Location extends StatefulWidget {

  @override
  State<Location> createState() => _LocationState();
}

    class _LocationState extends State<Location> {
      final List<Map<String, Object>> _pages = [
        {
          'page': India(),
          'title': 'india',
        },
        {
          'page': Universe(targetArea: Galaxy.milkyway),
          'title': 'milkyway',
        },
        {
          'page': Universe(targetArea: Galaxy.other),,
          'title': 'other',
        },
      ];
      int _selectedPageIndex = 0;
    
      void _selectPage(int index) {
        setState(() {
          _selectedPageIndex = index;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(
            title: Text(_pages[_selectedPageIndex]['title'] as String),
          ),
          body: _pages[_selectedPageIndex]['page'] as Widget,
          bottomNavigationBar: BottomNavigationBar(
            backgroundColor: Colors.white,
            unselectedItemColor: Colors.grey,
            selectedItemColor: Colors.blue,
            currentIndex: _selectedPageIndex,
            items: [
              BottomNavigationBarItem(
                backgroundColor: Colors.lightBlue,
                icon: Icon(Icons.abc),
                label: 'ZZ',
              ),
              BottomNavigationBarItem(
                backgroundColor: Colors.lightBlue,
                icon: Icon(Icons.water_drop_outlined),
                label: 'YY',
              ),
              BottomNavigationBarItem(
                backgroundColor: Colors.lightBlue,
                icon: Icon(Icons.filter_list_alt),
                label: 'XX',
              ),
            ],
            onTap: _selectPage,
          ),
        );
      }
    }

Answer 1

Change your main widget to this:

Widget build(BuildContext context) {
    returnScaffold(
        appBar: AppBarWidget(),
        body: Column(children: [
                Expanded(child: TextInputArea()),
                Location(),
              ]),          
        floatingActionButton: TextFloatingButtonSpeedDial(),
      ),
  }

Answer 2

There is a common issue with creating state variable with widget where inner widgets needed to be updated. but without reassigning the variable value will be same. You can create method instead of variable on this case.

List<Map<String, Object>> _pages() => [...

And use like _pages()[_selectedPageIndex]