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?