Skip to content

Instantly share code, notes, and snippets.

@miroslava-podybailo
Created March 7, 2021 22:38
Show Gist options
  • Save miroslava-podybailo/7e440c4cb23dcea1139dded348fd24d7 to your computer and use it in GitHub Desktop.
Save miroslava-podybailo/7e440c4cb23dcea1139dded348fd24d7 to your computer and use it in GitHub Desktop.
import 'package:flutter/material.dart';
import 'package:sliver_appbar_example/sliver_items.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverPersistentHeader(
pinned: true,
delegate: const MyHeaderDelegate(),
),
const SliverItems(),
],
),
);
}
}
class MyHeaderDelegate extends SliverPersistentHeaderDelegate {
const MyHeaderDelegate();
@override
Widget build(
BuildContext context,
double shrinkOffset,
bool overlapsContent,
) {
final progress = shrinkOffset / maxExtent;
return Material(
child: Stack(
fit: StackFit.expand,
children: [
AnimatedOpacity(
duration: const Duration(milliseconds: 150),
opacity: progress,
child: ColoredBox(
color: const Color(0xBE7A81FF),
),
),
AnimatedOpacity(
duration: const Duration(milliseconds: 150),
opacity: 1 - progress,
child: Image.asset(
'assets/images/mountains.jpg',
fit: BoxFit.cover,
),
),
AnimatedContainer(
duration: const Duration(milliseconds: 100),
padding: EdgeInsets.lerp(
EdgeInsets.symmetric(horizontal: 16, vertical: 16),
EdgeInsets.only(bottom: 16),
progress,
),
alignment: Alignment.lerp(
Alignment.bottomLeft,
Alignment.bottomCenter,
progress,
),
child: Text(
'Mountains',
style: TextStyle.lerp(
Theme.of(context)
.textTheme
.headline4
.copyWith(color: Colors.white),
Theme.of(context)
.textTheme
.headline6
.copyWith(color: Colors.white),
progress,
),
),
),
AppBar(
backgroundColor: Colors.transparent,
leading: BackButton(),
actions: [
IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.more_vert),
onPressed: () {},
),
],
elevation: 0,
),
],
),
);
}
@override
double get maxExtent => 264;
@override
double get minExtent => 84;
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
true;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment