fluttertabbarsliverappbar

Using TabBar with SliverChildListDelegate in Flutter


I need to add a TabBar to a screen of my application that I have developed with Flutter, but the place I want to add is at the bottom of the SliverAppBar. How can I do that?

altKisim() contains a Column.

Column(
children:[
Widget..
Divider(),
--This is where I want to add--
Widget..
],
);

enter image description here

Is there a way to add to this code snippet or do I have to completely change the build? Because all the solutions I found suggest that I need to change it.


Solution

  • Sample from conversation

    
    class HomeScreen extends StatefulWidget {
      @override
      _HomeScreenState createState() => _HomeScreenState();
    }
    
    class _HomeScreenState extends State<HomeScreen> {
      get tabView => [
            ...List.generate(
              3,
              (index) => Container(
                height: 700,
                color: index.isEven ? Colors.deepPurple : Colors.deepOrange,
                child: Text("index $index"),
              ),
            ).toList(),
          ];
    
      int _currentIndex = 0;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: LayoutBuilder(
            builder: (context, constraints) => CustomScrollView(
              slivers: [
                SliverAppBar(
                  title: Text("AppBar"),
                  expandedHeight: 300,
                  floating: true,
                  flexibleSpace: FlexibleSpaceBar(
                    background: Container(
                      color: Colors.cyanAccent,
                      child: Column(
                        children: [Text("asdasd")],
                      ),
                    ),
                  ),
                ),
                SliverToBoxAdapter(
                  child: tabView[_currentIndex],
                )
              ],
            ),
          ),
          bottomNavigationBar: BottomNavigationBar(
            showSelectedLabels: false,
            showUnselectedLabels: false,
            currentIndex: _currentIndex,
            onTap: (index) {
              setState(() {
                _currentIndex = index;
              });
            },
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: "Home",
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.ac_unit),
                label: "AC",
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.umbrella),
                label: "umbrella",
              ),
            ],
          ),
        );
      }
    }
    
    

    Does it solve in your case?