I’m making an app for study and it’s the first time I use SliverAppBar and SliverList. Inside the SliverAppBar Flexible I put two buttons and when I scroll on the screen, the buttons flatten along with the SliverAppBar but the button icons don’t.
To manage the state of the app I’m going to use GetX.
HomePage:
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.deepPurple,
),
drawer: const Drawer(),
backgroundColor: Colors.deepPurple,
body: ScrollConfiguration(
behavior: NoGlowBehavior(),
child: CustomScrollView(
slivers: [
SliverAppBar(
toolbarHeight: 0.0,
pinned: false,
snap: true,
floating: true,
expandedHeight: 120.0,
backgroundColor: const Color(0xFF2e2e2e),
flexibleSpace: Stack(
alignment: Alignment.center,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 50.0),
child: Container(
color: Colors.deepPurple,
),
),
Column(
children: [
Expanded(
flex: 4,
child: Padding(
padding:
const EdgeInsets.only(left: 16.0, right: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text(
'',
),
Text(
'',
)
],
),
),
),
Expanded(
flex: 6,
child: Row(
children: [
const SizedBox(width: 16.0),
Expanded(
child: Card(
child: IconButton(
icon: const Icon(
Icons.push_pin,
),
onPressed: () {},
),
),
),
const SizedBox(width: 20.0),
Expanded(
child: Card(
child: IconButton(
icon: const Icon(
Icons.add,
),
onPressed: () {},
),
),
),
const SizedBox(width: 16.0)
],
),
),
],
),
],
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: const Color(0xFF2e2e2e),
child: ListView.separated(
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Container(
color: Colors.red,
height: 100.0,
);
},
separatorBuilder: (context, index) =>
const SizedBox(height: 10.0),
itemCount: 10,
padding: const EdgeInsets.symmetric(horizontal: 20.0),
),
);
},
childCount: 1,
),
),
],
),
),
);
}
}
Main:
void main() {
runApp(
GetMaterialApp(
initialRoute: '/home',
debugShowCheckedModeBanner: false,
getPages: [
GetPage(
name: '/home',
page: () => const HomePage(),
),
],
),
);
}
I had some ideas to solve this bug but without success yet, I really appreciate your help.
2
Answers
Please refer below code :
just add
collapsedHeight: 50,
in SliverAppBar: