Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Yesterday
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