How to make persistent AppBar and floating widget just below AppBar in flutter

Issue

I want to make my AppBar persistent (it should not float like tabbar) while I want to place a widget or say tabbar just below appbar which will float and be pinned to appbar just like spotify app of library page see below for proper understanding

enter image description here

So far I have used slivers in flutter not able to achieve what I want,
Please check my code and correct me,

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: Test()),
    );
  }
}
class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (context, value) {
            return [
              SliverAppBar(excludeHeaderSemantics: true,
                floating: true,
                           
                pinned: true,
                title: Text('This should be fixed not moving'),
                bottom: TabBar(
                  tabs: [
                    Tab( text: "Call"), // this shoudl be floating n pinned 
                    Tab( text: "Message"),// this should be floating n pinned
                  ],
                ),
              ),
            ];
          },
          body: TabBarView(
            children: [
              Container(child: ListView.builder(
                  itemCount: 100,
                  itemBuilder: (context,index){
                return Text("Item $index");
              })),
              Container(child: ListView.builder(
                  itemCount: 100,
                  itemBuilder: (context,index){
                    return Text("Item $index");
                  })),
            ],
          ),
        ),
      ),
    );

  }
}

Solution

Code below is working
as I wanted,

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: Test()),
    );
  }
}

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          floatHeaderSlivers: true,
          headerSliverBuilder: (context, value) {
            return [
              SliverAppBar(
                floating: true,
                pinned: true,
                
                title: Text('This should be fixed not moving'),
              ),
              SliverList(
                delegate: SliverChildListDelegate.fixed(
                  [
                    TabBar(
                      labelColor: Colors.blue,
                      tabs: [
                        Tab(text: "Call"),
                        Tab(text: "Message"),
                      ],
                    ),
                  ],
                ),
              ),
            ];
          },
          body: TabBarView(
            children: [
              Container(
                  child: ListView.builder(
                      itemCount: 100,
                      itemBuilder: (context, index) {
                        return Text("Item $index");
                      })),
              Container(
                  child: ListView.builder(
                      itemCount: 100,
                      itemBuilder: (context, index) {
                        return Text("Item $index");
                      })),
            ],
          ),
        ),
      ),
    );
  }
}

Answered By – Abhishek Vishwakarma

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.