How to implement fragment transaction in Flutter?

I'm having a Tab Layout at top of the screen and Bottom Navigation view at bottom of the screen.

I need to have a container in the middle and swap the views which is similar to fragment transactions in Android.

How to acheive this in Flutter ?

    home: DefaultTabController(
      length: prefList.length,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: const Color(0xff00234a),
          bottom: TabBar(
            tabs: tabList,
            isScrollable: true,
            indicatorColor: const Color(0xffffffff),
          ),
          title: Text('Test Demo'),
          centerTitle: true,
        ),
        body: Container(
          child: TabBarView(
            children: tabList,
            controller: controller,
          ),
        ),
        // Set the bottom navigation bar
        bottomNavigationBar: Material(
          // set the color of the bottom navigation bar
          color: const Color(0xff00234a),
          // set the tab bar as the child of bottom navigation bar
          child: TabBar(
            tabs: <Tab>[
              Tab(
                icon: Icon(Icons.favorite),
              ),
              Tab(
                icon: Icon(Icons.adb),
              ),
              Tab(
                icon: Icon(Icons.airplay),
              ),
              Tab(
                icon: Icon(Icons.gamepad),
              ),
              Tab(
                icon: Icon(Icons.videogame_asset),
              ),
            ],
            // setup the controller
            controller: controller,
          ),
        ),
      ),
    ),
  );
}

I need to replace the TabView widget with something like Container layout in Android which is used to replace different fragments !

from flutter documentation you can achieve a bottom nav using this

    int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
  Text(
    'Index 0: Home',
    style: optionStyle,
  ),
  Text(
     'Index 1: Business',
     style: optionStyle,
  ),
  Text(
     'Index 2: School',
     style: optionStyle,
  ),
];

void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('BottomNavigationBar Sample'),
    ),
    body: Center(
      child: _widgetOptions.elementAt(_selectedIndex),
    ),
    bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          title: Text('Business'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          title: Text('School'),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
    ),
  );
}

for tabbed screen

//lifted from a project im doing
@override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
          child: Scaffold(
        appBar: AppBar(centerTitle: true,        
          title: Text("tabs", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white)),
          bottom: TabBar(

            indicatorColor: Colors.white,
            tabs: <Widget>[
              Tab(
                icon: Image.asset(
                  "assets/icons/tools.png",
                  height: 38,
                ),
                child: Text("s1",style: TextStyle(fontSize: 10),),
              ),
              Tab(
                icon: Image.asset(
                  "assets/icons/il.png",
                  height: 38,
                ),
                child: Text("s2",style: TextStyle(fontSize: 10)),
              ),
              Tab(
                icon: Icon(Icons.lock),
                child: Text("s3"),
              ),
              Tab(
                icon: Icon(Icons.lock),
                child: Text("s4"),
              ),
            ],
          ),
        ),
        body: TabBarView(children: <Widget>[
          Screen1(),
          Screen2(),
          Screen3(),
          Screen4()
        ],),
      ),
    );