is there anyway to add a widget like a search bar to be between SliverAppbar and the toolbar? so that it disppers with the two bars when scroll down?

for instance in the attached pic I want the ad, the button and the tabbar to hide with the appbar while scrolling

I can't see any widgets options in SliverAppbar except Leading, FlexiableSpace and Actions. and I guess they do not provide what I want.

any ideas?

CodePudding user response：

Yes, you can add a widget between the SliverAppBar and TabBar by using the SliverToBoxAdapter widget. For example:

SliverToBoxAdapter(
  child: Container(
    color: Colors.blue,
    height: 100,
  ),
),
SliverAppBar(
  title: Text('Sliver AppBar'),
),
SliverToBoxAdapter(
  child: TabBar(
    tabs: [
      Tab(text: 'Tab 1'),
      Tab(text: 'Tab 2'),
    ],
  ),
),

CodePudding user response：

class MyWidget extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              leading: IconButton(
                icon: const Icon(Icons.menu),
                onPressed: () {},
              ),
              title: const Text('Sample'),
              pinned: false,
              floating: true,
              forceElevated: true,
            ),
          ];
        },
        body: ListView(
          padding: const EdgeInsets.all(0),
          children: [
            banner(),
            askButton(context),
            search(),
            tabController(),
          ],
        ),
      ),
    );
  }

  Widget banner() {
    return Container(
      margin: const EdgeInsets.fromLTRB(12, 12, 12, 5),
      height: 150,
      width: double.infinity,
      alignment: Alignment.center,
      color: Colors.orange,
      child: const Text('Banner'),
    );
  }

  Widget askButton(context) {
    return Container(
      margin:  EdgeInsets.fromLTRB(12, 0,  MediaQuery.of(context).size.width *.7, 5),
      child: ElevatedButton(
        onPressed: () {},
        child: const Text('  Ask'),
      ),
    );
  }

  Widget search() {
    return Container(
      margin: const EdgeInsets.fromLTRB(12, 0, 12, 5),
      child: const TextField(
        decoration: InputDecoration(
          hintText: 'Search',
          prefixIcon: Icon(Icons.search),
          border: OutlineInputBorder(),
        ),
      ),
    );
  }

  Widget tabController() {
    return Container(
      margin: const EdgeInsets.fromLTRB(12, 0, 12, 12),
      child: DefaultTabController(
        length: 3,
        initialIndex: 0,
        child: ListView(
          padding: const EdgeInsets.all(0),
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          children: <Widget>[
            const TabBar(
              labelColor: Colors.green,
              unselectedLabelColor: Colors.black,
              tabs: [
                Tab(text: 'Questions'),
                Tab(text: 'Pinned Questions'),
                Tab(text: 'My Quest'),
              ],
            ),
            tabView(),
          ],
        ),
      ),
    );
  }

  Widget tabView() {
    return Container(
      height: 800,
      alignment: Alignment.topCenter,
      margin: const EdgeInsets.fromLTRB(12, 0, 12, 0),
      decoration: const BoxDecoration(
        border: Border(top: BorderSide(color: Colors.grey, width: 0.5)),
      ),
      child: Padding(
        padding: const EdgeInsets.only(top: 30),
        child: TabBarView(
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('Questions'),
                Expanded(
                  child: Container(),
                ),
                const Text('End of Questions'),
              ],
            ),
            const Text('Pinned Questions'),
            const Text('My Quest'),
          ],
        ),
      ),
    );
  }

}

See result here.