Adds some Shrine updates from Material team. (#34)

pull/36/head
Andrew Brogdon 6 years ago committed by GitHub
parent ee59e80324
commit 92f692583d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -50,7 +50,8 @@ class _ShrineAppState extends State<ShrineApp>
home: HomePage( home: HomePage(
backdrop: Backdrop( backdrop: Backdrop(
frontLayer: ProductPage(), frontLayer: ProductPage(),
backLayer: CategoryMenuPage(onCategoryTap: () => _controller.forward()), backLayer:
CategoryMenuPage(onCategoryTap: () => _controller.forward()),
frontTitle: Text('SHRINE'), frontTitle: Text('SHRINE'),
backTitle: Text('MENU'), backTitle: Text('MENU'),
controller: _controller, controller: _controller,
@ -85,6 +86,7 @@ IconThemeData _customIconTheme(IconThemeData original) {
ThemeData _buildShrineTheme() { ThemeData _buildShrineTheme() {
final ThemeData base = ThemeData.light(); final ThemeData base = ThemeData.light();
return base.copyWith( return base.copyWith(
colorScheme: kShrineColorScheme,
accentColor: kShrineBrown900, accentColor: kShrineBrown900,
primaryColor: kShrinePink100, primaryColor: kShrinePink100,
buttonColor: kShrinePink100, buttonColor: kShrinePink100,
@ -92,9 +94,13 @@ ThemeData _buildShrineTheme() {
cardColor: kShrineBackgroundWhite, cardColor: kShrineBackgroundWhite,
textSelectionColor: kShrinePink100, textSelectionColor: kShrinePink100,
errorColor: kShrineErrorRed, errorColor: kShrineErrorRed,
buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.accent), buttonTheme: const ButtonThemeData(
primaryIconTheme: base.iconTheme.copyWith(color: kShrineBrown900), colorScheme: kShrineColorScheme,
inputDecorationTheme: InputDecorationTheme(border: CutCornersBorder()), textTheme: ButtonTextTheme.normal,
),
primaryIconTheme: _customIconTheme(base.iconTheme),
inputDecorationTheme:
const InputDecorationTheme(border: CutCornersBorder()),
textTheme: _buildShrineTextTheme(base.textTheme), textTheme: _buildShrineTextTheme(base.textTheme),
primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme), primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
accentTextTheme: _buildShrineTextTheme(base.accentTextTheme), accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
@ -105,9 +111,7 @@ ThemeData _buildShrineTheme() {
TextTheme _buildShrineTextTheme(TextTheme base) { TextTheme _buildShrineTextTheme(TextTheme base) {
return base return base
.copyWith( .copyWith(
headline: base.headline.copyWith( headline: base.headline.copyWith(fontWeight: FontWeight.w500),
fontWeight: FontWeight.w500,
),
title: base.title.copyWith(fontSize: 18.0), title: base.title.copyWith(fontSize: 18.0),
caption: base.caption.copyWith( caption: base.caption.copyWith(
fontWeight: FontWeight.w400, fontWeight: FontWeight.w400,
@ -128,3 +132,19 @@ TextTheme _buildShrineTextTheme(TextTheme base) {
bodyColor: kShrineBrown900, bodyColor: kShrineBrown900,
); );
} }
const ColorScheme kShrineColorScheme = ColorScheme(
primary: kShrinePink100,
primaryVariant: kShrineBrown900,
secondary: kShrinePink50,
secondaryVariant: kShrineBrown900,
surface: kShrineSurfaceWhite,
background: kShrineBackgroundWhite,
error: kShrineErrorRed,
onPrimary: kShrineBrown900,
onSecondary: kShrineBrown900,
onSurface: kShrineBrown900,
onBackground: kShrineBrown900,
onError: kShrineSurfaceWhite,
brightness: Brightness.light,
);

@ -22,33 +22,33 @@ class LoginPage extends StatefulWidget {
} }
class _LoginPageState extends State<LoginPage> { class _LoginPageState extends State<LoginPage> {
final _usernameController = TextEditingController(); final TextEditingController _usernameController = TextEditingController();
final _passwordController = TextEditingController(); final TextEditingController _passwordController = TextEditingController();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
body: SafeArea( body: SafeArea(
child: ListView( child: ListView(
padding: EdgeInsets.symmetric(horizontal: 24.0), padding: const EdgeInsets.symmetric(horizontal: 24.0),
children: <Widget>[ children: <Widget>[
SizedBox(height: 80.0), const SizedBox(height: 80.0),
Column( Column(
children: <Widget>[ children: <Widget>[
Image.asset('assets/diamond.png'), Image.asset('assets/diamond.png'),
SizedBox(height: 16.0), const SizedBox(height: 16.0),
Text( Text(
'SHRINE', 'SHRINE',
style: Theme.of(context).textTheme.headline, style: Theme.of(context).textTheme.headline,
), ),
], ],
), ),
SizedBox(height: 120.0), const SizedBox(height: 120.0),
PrimaryColorOverride( PrimaryColorOverride(
color: kShrineBrown900, color: kShrineBrown900,
child: TextField( child: TextField(
controller: _usernameController, controller: _usernameController,
decoration: InputDecoration( decoration: const InputDecoration(
labelText: 'Username', labelText: 'Username',
), ),
), ),
@ -58,7 +58,7 @@ class _LoginPageState extends State<LoginPage> {
color: kShrineBrown900, color: kShrineBrown900,
child: TextField( child: TextField(
controller: _passwordController, controller: _passwordController,
decoration: InputDecoration( decoration: const InputDecoration(
labelText: 'Password', labelText: 'Password',
), ),
), ),
@ -66,8 +66,8 @@ class _LoginPageState extends State<LoginPage> {
ButtonBar( ButtonBar(
children: <Widget>[ children: <Widget>[
FlatButton( FlatButton(
child: Text('CANCEL'), child: const Text('CANCEL'),
shape: BeveledRectangleBorder( shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)), borderRadius: BorderRadius.all(Radius.circular(7.0)),
), ),
onPressed: () { onPressed: () {
@ -76,9 +76,9 @@ class _LoginPageState extends State<LoginPage> {
}, },
), ),
RaisedButton( RaisedButton(
child: Text('NEXT'), child: const Text('NEXT'),
elevation: 8.0, elevation: 8.0,
shape: BeveledRectangleBorder( shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)), borderRadius: BorderRadius.all(Radius.circular(7.0)),
), ),
onPressed: () { onPressed: () {

@ -19,7 +19,7 @@ import 'package:flutter/widgets.dart';
class CutCornersBorder extends OutlineInputBorder { class CutCornersBorder extends OutlineInputBorder {
const CutCornersBorder({ const CutCornersBorder({
BorderSide borderSide: BorderSide.none, BorderSide borderSide: const BorderSide(),
BorderRadius borderRadius: const BorderRadius.all(Radius.circular(2.0)), BorderRadius borderRadius: const BorderRadius.all(Radius.circular(2.0)),
this.cut: 7.0, this.cut: 7.0,
double gapPadding: 2.0, double gapPadding: 2.0,

Loading…
Cancel
Save