CODEWITHSUNDEEP
flutterflutter-sliver
mtkguy
mtkguy

Reputation: 275

My sliverappbar doesn't expand when i start scrolling back up, it only expands when i get to the top of the list again

I have a nestedsrcollview with a sliverappbar that shrinks when i scroll down as expected but the app bar doesn't expanded when i scroll back up, not until i get to the top(to the first item on the list) and i know this is no right after looking at examples from the docs. It should expand or contract at the moment you start scrolling and not when you're done scrolling up or down

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    Tab(
      child: Container(
        child: Icon(//icon),
      ),
    ),
    Tab(
      child: Container(
        child: Icon(//icon),
      ),
    ),
    Tab(
      child: Container(
        child: Icon(
          //icon,
        ),
      ),
    ),
    Tab(
      child: Container(
        child: Icon(
          //icon,
        ),
      ),
    ),
  ];

  final List tabChildren = [
    Child1(

      key: PageStorageKey<String>('1'),
    ),
    Child2(
      key: PageStorageKey<String>('2'),
    ),
    Child3(
      key: PageStorageKey<String>('3'),
    ),
   Child4(
      key: PageStorageKey<String>('4'),
    ),
  ];




  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: myTabs.length)

  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: NestedScrollView(

        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            new SliverAppBar(


              title: Text(
                'Dummy text',
                style: Theme.of(context)
                    .textTheme
                    .title
                    .copyWith(color: Colors.white),
              ),
              pinned: true,
              floating: true,

              forceElevated: innerBoxIsScrolled,
              bottom: TabBar(

                controller: _tabController,
                tabs: myTabs,
              ),
            ),

          ];
        },

        body: TabBarView(
          controller: _tabController,
          children: [

            SafeArea(
              top: false,
              bottom: false,
              child: 

                tabChildren[0], // listView

            ),
            SafeArea(
              top: false,
              bottom: false,
              child: 

                tabChildren[1], // listView


            ),
            SafeArea(
              top: false,
              bottom: false,
              child: 
                tabChildren[2], // listView


            ),
            SafeArea(
              top: false,
              bottom: false,
              child:  

              tabChildren[3], // listView

            ),
          ],
        ),
      ),

    );
  }
}

Upvotes: 1

Views: 2098

Answers (2)

CautionToWind
CautionToWind

Reputation: 41

Set the following attributes. 

snap: true,
floating: true

Example:

new SliverAppBar(

              title: Text(
                'Dummy text',
                style: Theme.of(context)
                    .textTheme
                    .title
                    .copyWith(color: Colors.white),
              ),
              floating: true,
              snap: true,
              forceElevated: innerBoxIsScrolled,
              bottom: TabBar(

                controller: _tabController,
                tabs: myTabs,
              ),
            ),

Upvotes: 1

baradwaj
baradwaj

Reputation: 266

Two attributes control the SliverAppBar's Action. pinned & floating

You have set both the pinned and floating set to true, even though it is not wrong, you can never see the actual Sliver Motion when both are set to true.

To actually get what you are calling as "expanded effect" set only floating to true. If that is not what you are looking for, probably a Image or GIF as to what is your expected output will help in achieving the correct code.

Upvotes: 0

Related Questions