Created
October 28, 2020 10:21
-
-
Save developerjamiu/04080e761327077115693d544f5cbd7d to your computer and use it in GitHub Desktop.
Snippet showing a custom app bar
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'; | |
import 'package:flutter/services.dart'; | |
void main() { | |
runApp( | |
MaterialApp( | |
debugShowCheckedModeBanner: false, | |
home: CustomAppBarDemo(), | |
), | |
); | |
} | |
class CustomAppBarDemo extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
appBar: AppBar( | |
backgroundColor: Colors.yellow.shade300, | |
leading: Icon(Icons.arrow_back), | |
title: 'Geography', | |
description: | |
'Lorem ipsum dolor sit amet, consectetur \ndipiscing elit donec consectetur semper', | |
), | |
body: Center( | |
child: Text( | |
'Body Here', | |
style: Theme.of(context).textTheme.headline6, | |
), | |
), | |
); | |
} | |
} | |
class AppBar extends StatelessWidget implements PreferredSizeWidget { | |
final Widget leading; | |
final String title; | |
final String description; | |
/// Default [Color] is [White] | |
final Color backgroundColor; | |
@override | |
final Size preferredSize; | |
const AppBar({ | |
Key key, | |
@required this.leading, | |
@required this.title, | |
@required this.description, | |
this.backgroundColor = Colors.white, | |
}) : preferredSize = const Size.fromHeight(200.0), | |
super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return AnnotatedRegion( | |
value: SystemUiOverlayStyle( | |
statusBarColor: Colors.transparent, | |
statusBarIconBrightness: Brightness.dark, | |
), | |
child: Container( | |
color: backgroundColor, | |
height: preferredSize.height, | |
padding: EdgeInsets.only( | |
right: 16.0, | |
left: 16.0, | |
top: MediaQuery.of(context).padding.top + 16.0, | |
), | |
child: Column( | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: <Widget>[ | |
leading, | |
SizedBox(height: 16), | |
Text( | |
title, | |
style: TextStyle( | |
fontSize: 24, | |
fontWeight: FontWeight.bold, | |
), | |
), | |
SizedBox(height: 16), | |
Text( | |
description, | |
style: TextStyle(height: 1.5), | |
), | |
], | |
), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment