Created
November 21, 2018 21:36
-
-
Save slightfoot/7bacfa6ebc7a56630c4e312e278d7bb3 to your computer and use it in GitHub Desktop.
Custom AppBar - 21th November 2018 - #HumpdayQandA
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() => runApp(MyApp()); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'HumpDayQandA 21st', | |
theme: ThemeData.light(), | |
home: HomeScreen(), | |
); | |
} | |
} | |
class HomeScreen extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
body: CustomScrollView( | |
slivers: <Widget>[ | |
CustomAppBar( | |
child: Padding( | |
padding: const EdgeInsets.symmetric(horizontal: 16.0), | |
child: Row( | |
children: <Widget>[ | |
Expanded( | |
child: Text('Title'), | |
), | |
IconButton( | |
icon: Icon(Icons.more_vert), | |
onPressed: () {}, | |
) | |
], | |
), | |
), | |
), | |
SliverPadding( | |
padding: const EdgeInsets.all(12), | |
sliver: SliverList( | |
delegate: SliverChildListDelegate(List.generate(20, (int index) { | |
return ListTile(title: Text('Item #$index')); | |
})), | |
), | |
) | |
], | |
), | |
); | |
} | |
} | |
class CustomAppBar extends StatelessWidget { | |
const CustomAppBar({ | |
Key key, | |
@required this.child, | |
}) : super(key: key); | |
final Widget child; | |
@override | |
Widget build(BuildContext context) { | |
return SliverPersistentHeader( | |
pinned: false, | |
floating: true, | |
delegate: CustomAppBarDelegate( | |
child: child, | |
), | |
); | |
} | |
} | |
class CustomAppBarDelegate extends SliverPersistentHeaderDelegate { | |
const CustomAppBarDelegate({ | |
@required this.child, | |
}); | |
final Widget child; | |
@override | |
Widget build( | |
BuildContext context, double shrinkOffset, bool overlapsContent) { | |
final theme = Theme.of(context); | |
return SizedBox.expand( | |
child: Material( | |
color: theme.primaryColor, | |
borderRadius: BorderRadius.only( | |
bottomLeft: Radius.circular(16), | |
bottomRight: Radius.circular(16), | |
), | |
elevation: 4, | |
child: Padding( | |
padding: EdgeInsets.only( | |
top: MediaQuery.of(context).padding.top, | |
), | |
child: DefaultTextStyle.merge( | |
style: theme.primaryTextTheme.title, | |
child: IconTheme.merge( | |
data: theme.primaryIconTheme, | |
child: child, | |
), | |
), | |
), | |
), | |
); | |
} | |
@override | |
double get minExtent => 64.0; | |
@override | |
double get maxExtent => 120.0; | |
@override | |
bool shouldRebuild(CustomAppBarDelegate oldDelegate) => | |
child != oldDelegate.child; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment