How can I scroll the AppBar to make appear the drawer in Flutter?

Viewed 109

I'm working on the AppBar. I would like to scroll the appBar, resize it, and makes appear the drawer (menu hamburger).

For the moment, I can scroll inside the AppBar, but it doesn't resize anything. I'm not sure, but I think it is because the CustomScrollView is wrapped inside the PreferredSize widget, indeed, the only way I find to modify size of the appBar is when I change the preferredSize. So I tried to trigger a function to resize the preferredSize of appBar with onStretchTrigger, but it doesn't trigger my function (maybe because it can't be stretched ?), so I think it is not the good solution in my case.

Then, I tried to work without PreferredSize, but no way to makes work my TabBarView after, so I returned to the nearest solution I found.

I also tried with FlexibleSpaceBar, but same problem, the AppBar doesn't resize when I Scroll.

Here is the code of my screen:

import '../widgets/drawer_app.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../dummy_items.dart';
import './item_screen.dart';

class HomeScreen extends StatefulWidget {
  static const routeName = '/home_screen';
  int _selectedTab = 2;
  double additionalSize = 0;

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Future<void> changeSize() async {
    setState(() {
      print("size has changed");
      widget.additionalSize = MediaQuery.of(context).padding.top;
    });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 2,
      length: 5,
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Theme.of(context).primaryColor,
                const Color.fromRGBO(0, 56, 100, 1.0)
              ]),
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          drawer: DrawerApp(),
          appBar: PreferredSize(
            preferredSize: Size.fromHeight(kToolbarHeight +
                widget.additionalSize), // Changing size here ??
            child: Theme(
              data: ThemeData(
                highlightColor: Colors.transparent,
                splashColor: Colors.transparent,
              ),
              child: CustomScrollView(
                slivers: [
                  SliverAppBar(
                    backgroundColor: Colors.transparent,
                    shadowColor: Colors.transparent,
                    stretch: true,
                    onStretchTrigger: () {
                      changeSize(); // On scroll, doesn't trigger the print inside changeSize
                      return Future<void>.value();
                    },
                    // flexibleSpace: FlexibleSpaceBar(), // Doesn't change anything
                  ),
                  SliverToBoxAdapter(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        TabBar(
                          onTap: (index) {
                            setState(() {
                              widget._selectedTab = index;
                            });
                          },
                          tabs: [
                            Tab(
                              icon: Icon(
                                CupertinoIcons.add,
                                size: widget._selectedTab == 0 ? 24 : 20,
                              ),
                            ),
                            Tab(
                                icon: Icon(Icons.ac_unit,
                                    size: widget._selectedTab == 1 ? 24 : 20)),
                            Tab(
                              icon: Icon(CupertinoIcons.alarm,
                                  size: widget._selectedTab == 2 ? 24 : 20),
                            ),
                            Tab(
                              icon: Icon(CupertinoIcons.music_note,
                                  size: widget._selectedTab == 3 ? 24 : 20),
                            ),
                            Tab(
                              icon: Icon(CupertinoIcons.tickets,
                                  size: widget._selectedTab == 4 ? 24 : 20),
                            )
                          ],
                          unselectedLabelColor:
                              const Color.fromRGBO(142, 142, 147, 1),
                          labelColor: const Color.fromRGBO(0, 122, 255, 1),
                          overlayColor:
                              MaterialStateProperty.all(Colors.transparent),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          body: TabBarView(
            physics: const NeverScrollableScrollPhysics(),
            children: [
              ItemScreen(
                  const Icon(Icons.ac_unit),
                  const Icon(Icons.ac_unit),
                  dummyFirst), 
              ItemScreen(
                  const Icon(CupertinoIcons.eye_fill),
                  const Icon(CupertinoIcons.eye_slash_fill),
                  dummySecond), 
              ItemScreen(
                  const Icon(CupertinoIcons.eye_fill),
                  const Icon(CupertinoIcons.eye_slash_fill),
                  dummyThird), 
              ItemScreen(const Icon(CupertinoIcons.tags_solid),
                  const Icon(CupertinoIcons.tags), dummyFourth), 
              ItemScreen(const Icon(CupertinoIcons.tags_solid),
                  const Icon(CupertinoIcons.tags), dummyFith), 
            ],
          ),
        ),
      ),
    );
  }
}

Did I miss something when I tried to work with SliverAppBar?

0 Answers
Related