Created
March 27, 2018 14:58
-
-
Save g33kidd/2192ae2699db10ab4019dd4076c45c95 to your computer and use it in GitHub Desktop.
Custom AppBar for flutter
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'; | |
// TODO: Continue investigating how to do scroll offset animation like this: | |
// https://dribbble.com/shots/2201752-Profile-Header-Interaction-Prototype | |
class CustomAppBar extends StatefulWidget { | |
final String title; | |
CustomAppBar({this.title}); | |
@override | |
State<CustomAppBar> createState() { | |
return new CustomAppBarState(title: title); | |
} | |
} | |
class CustomAppBarState extends State<CustomAppBar> { | |
final String title; | |
final double barHeight = 66.0; | |
CustomAppBarState({ | |
this.title | |
}); | |
@override | |
Widget build(BuildContext context) { | |
final double statusBarHeight = MediaQuery.of(context).padding.top; | |
final TextStyle titleStyle = const TextStyle( | |
color: Colors.white, | |
fontWeight: FontWeight.w400, | |
fontSize: 22.0, | |
); | |
final ScaffoldState scaffold = Scaffold.of(context, nullOk: true); | |
final bool canPop = ModalRoute.of(context).canPop; | |
final bool hasDrawer = scaffold?.hasDrawer ?? false; | |
final bool hasEndDrawer = scaffold?.hasEndDrawer ?? false; | |
final List<Color> gradientColors = [ | |
const Color(0xFF7649F6), | |
const Color(0xFFFC537F) | |
]; | |
final Widget backButton = new IconButton( | |
icon: new Icon(Icons.arrow_back, size: 30.0, color: Colors.white), | |
onPressed: () { | |
Navigator.of(context).pop(); | |
} | |
); | |
Widget _leading; | |
Widget _ending; | |
if (hasDrawer) { | |
_leading = new IconButton( | |
icon: new Icon(Icons.menu, size: 30.0, color: Colors.white), | |
onPressed: () { | |
Scaffold.of(context).openDrawer(); | |
} | |
); | |
} else { | |
if (canPop) { | |
_leading = backButton; | |
} else { | |
_leading = null; | |
} | |
} | |
if (hasEndDrawer) { | |
_ending = new IconButton( | |
icon: new Icon(Icons.forum, size: 30.0, color: Colors.white), | |
onPressed: () { | |
Scaffold.of(context).openEndDrawer(); | |
} | |
); | |
} else { | |
_ending = null; | |
} | |
return new Container( | |
padding: new EdgeInsets.only(top: statusBarHeight), | |
height: statusBarHeight + barHeight, | |
decoration: new BoxDecoration( | |
gradient: new LinearGradient( | |
colors: gradientColors, | |
begin: const FractionalOffset(0.0, 0.0), | |
end: const FractionalOffset(0.9, 0.0), | |
stops: [0.0, 0.9], | |
tileMode: TileMode.clamp | |
) | |
), | |
child: new Stack( | |
fit: StackFit.expand, | |
children: <Widget>[ | |
new Align( | |
alignment: Alignment.centerLeft, | |
child: new Padding( | |
padding: const EdgeInsets.only(left: 20.0), | |
child: _leading | |
) | |
), | |
new Center(child: new Text(title, style: titleStyle)), | |
new Align( | |
alignment: Alignment.centerRight, | |
child: new Padding( | |
padding: const EdgeInsets.only(right: 16.0), | |
child: _ending | |
) | |
), | |
], | |
) | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment