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

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

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,
          ),
        );
      }
    }
Tags:

2

Answers


  1. 0

    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]

    Login or Signup to reply.
  2. 0

    Change your main widget to this:

    Widget build(BuildContext context) {
    returnScaffold(
        appBar: AppBarWidget(),
        body: Column(children: [
                Expanded(child: TextInputArea()),
                Location(),
              ]),          
        floatingActionButton: TextFloatingButtonSpeedDial(),
      ),
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search