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

Question

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

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");
                  })),
            ],
          ),
        ),
      ),
    );

  }
}

ibhavikmakwana · Accepted Answer · 2022-02-17 14:57:32Z

1

You should use SliverList after the SliverAppBar and put your TabBar inside it.

here's what you are looking for.

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(
          headerSliverBuilder: (context, value) {
            return [
              SliverAppBar(
                excludeHeaderSemantics: true,
                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 Feb 17, 2022 at 14:57

ibhavikmakwana

10.3k4 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mithson Over a year ago

thanks it works partially but I want this tabbar to also appear back when I scroll upwards a bit also it appears only when scrolled fully above so any fix for this would help a lot.... the problem still is there is that I have to scroll all the way up to get my tabbar its a bit non user friendly UI

Mithson Over a year ago

after adding floatHeaderSlivers: true, in NestedScrollView it works

ibhavikmakwana Over a year ago

i've tried that but didn't worked for me.

Mithson Over a year ago

I have posted the proper working code below your answer and it works I figured out by just tweaking some changes in your code only and now it works, thanks a ton man!!!

Mithson · Accepted Answer · 2022-02-17 15:25:04Z

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");
                      })),
            ],
          ),
        ),
      ),
    );
  }
}

SemBauke · Accepted Answer · 2022-02-17 14:34:55Z

0

You can use the bottom attribute for that on the AppBar.

Here is a link to an example on how to do it:

https://esflutter.dev/docs/catalog/samples/app-bar-bottom

answered Feb 17, 2022 at 14:34

SemBauke

1441 silver badge11 bronze badges

3 Comments

Mithson Over a year ago

At first I did that only but how to make the widget below appbar float i.e tabbar

SemBauke Over a year ago

Like it should not disappear, is that what you mean?

Mithson Over a year ago

it should disappear when I scroll down and appear back when I move it upwards please check the gif image for clear understanding

Roman Jaquez · Accepted Answer · 2022-02-17 14:52:08Z

0

You could also restructure your UI to make it like this:

Scaffold(
  appBar: <HERE_YOUR_APPBAR>,
  body: Column(
    children: [
      TabBar(), // here your tab bar,
      Expanded(
        child: TabBarView() // here your tabs
      )
    ]
  )
)

This way your TabBar will be anchored to the top while the Expanded will cover the rest of the Column's real estate and fill your page.

answered Feb 17, 2022 at 14:52

Roman Jaquez

2,8091 gold badge16 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related