Created
July 13, 2020 19:29
-
-
Save Levi-Lesches/ad65a884ef229f43bf0237a34eceec74 to your computer and use it in GitHub Desktop.
Yesterday
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"; | |
// -------------------- Pick your colors! ------------------- | |
// There are two ways to make colors here: | |
// 1. Use Color(<code>). | |
// The "code" is what's called a "hex color code" -- it's that 6 letter code | |
// Except, you need to start it with "0xff". So, for example, pastel pink is: | |
// "fdd0e4", so "pastelPink" (below) is "Color(0xfffdd0e4)". These color codes | |
// can be taken from anywhere (try Googling "hex color picker") | |
// 2. Using the built-in colors -- they start with "Colors." | |
// There are a bunch of helpfully built-in colors to choose from. There are | |
// three places to find them: | |
// - https://material.io/resources/color | |
// On this website, you get to choose both the primary color, and the | |
// secondary color and see how an app could look with them. The built-in | |
// colors are on the side, in rows, and the columns are shades. The higher | |
// the number, the darker the shade. | |
// Those shades can be used here too, like "Colors.pink [300]" | |
// (See "pastelBlue" below, which uses the "100" shade). But you can't | |
// use those color names here, you have to find them some other way. | |
// - https://api.flutter.dev/flutter/material/Colors-class.html | |
// The official list of colors built-in to the code, along with their | |
// technical names. Just keep scrolling until you find a color you like, | |
// and use the name shown. Again, shades are allowed. | |
// - Here, using auto-complete. | |
// Just start typing "Colors." and see what comes up ¯\_(ツ)_/¯ | |
// | |
// Every line here should look like this: | |
// const Color <name> = <value>; | |
// | |
// Don't forget the semicolon! | |
// For colors with shades, you have to use "final" instead of "const" | |
// | |
// ----------------------- Have fun! I love you! ----------------------- | |
// These colors are useful to save for later. | |
// Leaving them here doesn't actually do anything, just gives them helpful names | |
const Color pastelPink = Color(0xfffdd0e4); | |
final Color pastelBlue = Colors.lightBlue [100]; | |
// This is where you set the colors that will be used in the app: | |
// These are the primary and secondary colors for the app. | |
const Color primaryColor = Colors.pink; // primary color | |
final Color secondaryColor = pastelBlue; // secondary color | |
// This color needs to be one of the built-in colors -- one that starts | |
// with "Colors." It should be the same as "primaryColor", but if that's not | |
// a built-in color, just choose the closest one here. | |
// | |
// This is used for other colors not listed here, such as the date picker. | |
const MaterialColor primaryColorSwatch = Colors.pink; | |
// These colors customize the title bar | |
const Color titleBarBackgroundColor = pastelPink; // the background color | |
const Color titleBarTextColor = Colors.pink; // the text color (make it legible!) | |
const Color titleBarIconsColor = Colors.pink; // the icon color (heart and arrow) | |
// The color of the save button in the bottom of the editor page | |
final Color saveButtonColor = pastelBlue; | |
// ------------------ That's it for colors. Actual code below ----------------- | |
void main() => runApp( | |
MaterialApp( | |
home: HomePage(), | |
routes: { | |
"editor": (_) => EditorPage() | |
}, | |
theme: ThemeData( | |
// --------------- This is where the colors are used --------------- | |
primaryColor: primaryColor, | |
appBarTheme: AppBarTheme( | |
color: titleBarBackgroundColor, | |
iconTheme: const IconThemeData(color: titleBarIconsColor), | |
textTheme: Typography.englishLike2018.apply(bodyColor: titleBarTextColor), | |
), | |
accentColor: secondaryColor, | |
buttonColor: Colors.lightBlue [100], | |
colorScheme: ColorScheme.fromSwatch( | |
primarySwatch: primaryColorSwatch, | |
accentColor: secondaryColor, | |
) | |
), | |
) | |
); | |
class HomePage extends StatelessWidget { | |
static const Widget emptyWidget = Center( | |
child: Text("Nothing saved yet. Tap the button to add a memory.") | |
); | |
@override | |
Widget build(BuildContext context) => Scaffold( | |
appBar: AppBar( | |
leading: const Icon(Icons.favorite), | |
title: const Text("Memories") | |
), | |
floatingActionButton: FloatingActionButton( | |
child: Icon(Icons.add), | |
onPressed: () => Navigator.of(context).pushNamed("editor"), | |
), | |
body: emptyWidget | |
); | |
} | |
class EditorPage extends StatefulWidget { | |
EditorState createState() => EditorState(); | |
} | |
class EditorState extends State<EditorPage> { | |
bool loading = false; | |
Widget get titleTextField => TextField( | |
textCapitalization: TextCapitalization.sentences, | |
decoration: const InputDecoration(labelText: "Title"), | |
); | |
Widget get datePicker => Row( | |
mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
children: [ | |
Text( | |
"This memory is for: ${ | |
MaterialLocalizations.of(context).formatShortDate(DateTime.now()) | |
}" | |
), | |
IconButton( | |
icon: const Icon(Icons.edit), | |
onPressed: () => showDatePicker( | |
context: context, | |
initialDate: DateTime.now(), | |
firstDate: DateTime(2003, 06, 10), | |
lastDate: DateTime(2200, 01, 01), | |
), | |
), | |
] | |
); | |
Widget get saveButtonBar => ButtonBar( | |
children: [ | |
FlatButton( | |
onPressed: () => Navigator.of(context).pop(), | |
child: const Text("Cancel"), | |
), | |
RaisedButton.icon( | |
label: const Text("Save"), | |
onPressed: () => setState(() => loading = true), | |
icon: loading | |
? SizedBox( | |
height: 24, | |
width: 24, | |
child: CircularProgressIndicator( | |
valueColor: AlwaysStoppedAnimation<Color>( | |
Theme.of(context).primaryColor | |
), | |
) | |
) | |
: const Icon(Icons.save), | |
), | |
] | |
); | |
@override | |
Widget build(BuildContext context) => Scaffold( | |
appBar: AppBar(title: const Text("Edit text memory")), | |
body: Padding( | |
padding: const EdgeInsets.all(20), | |
child: Column( | |
children: [ | |
titleTextField, | |
const SizedBox(height: 10), | |
datePicker, | |
const SizedBox(height: 10), | |
Expanded( | |
child: TextField( | |
maxLines: null, | |
textCapitalization: TextCapitalization.sentences, | |
onChanged: (_) => setState(() {}), | |
decoration: const InputDecoration( | |
labelText: "Body", border: InputBorder.none | |
), | |
) | |
), | |
saveButtonBar | |
] | |
) | |
) | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment