Skip to content

Instantly share code, notes, and snippets.

@g33kidd
Created March 27, 2018 14:58
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save g33kidd/2192ae2699db10ab4019dd4076c45c95 to your computer and use it in GitHub Desktop.
Save g33kidd/2192ae2699db10ab4019dd4076c45c95 to your computer and use it in GitHub Desktop.
Custom AppBar for flutter
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