Skip to content

Instantly share code, notes, and snippets.

@vital-edu
Last active February 17, 2024 09:15
Show Gist options
  • Save vital-edu/e2976ad6ede98813b75ee44b1217cc96 to your computer and use it in GitHub Desktop.
Save vital-edu/e2976ad6ede98813b75ee44b1217cc96 to your computer and use it in GitHub Desktop.
How to overlap SliverList on a SliverAppBar
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'How to overlap SliverList on a SliverAppBar',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
bottom: PreferredSize(
child: Container(),
preferredSize: Size(0, 20),
),
pinned: false,
expandedHeight: MediaQuery.of(context).size.height * 0.4,
flexibleSpace: Stack(
children: [
Positioned(
child: Image(
fit: BoxFit.cover,
image: NetworkImage(
"https://images.pexels.com/photos/62389/pexels-photo-62389.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
),
),
top: 0,
left: 0,
right: 0,
bottom: 0),
Positioned(
child: Container(
height: 30,
decoration: BoxDecoration(
color: Colors.lightBlue[100],
borderRadius: BorderRadius.vertical(
top: Radius.circular(50),
),
),
),
bottom: -1,
left: 0,
right: 0,
),
],
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index + 1 % 9)],
child: Text('List Item $index'),
);
},
),
),
],
),
);
}
}
@ErnestAddo
Copy link

Thanks

@popeyelau
Copy link

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment