Skip to content

Instantly share code, notes, and snippets.

@g33kidd

g33kidd/app_bar.dart

Created March 27, 2018 14:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save g33kidd/2192ae2699db10ab4019dd4076c45c95 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save g33kidd/2192ae2699db10ab4019dd4076c45c95 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. g33kidd created this gist Mar 27, 2018.
    115 changes: 115 additions & 0 deletions app_bar.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,115 @@
    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
    )
    ),
    ],
    )
    );
    }
    }