Yesterday

yesterday.dart

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
				]
			)
		)
	);
}