Merge "baku/todos: adds basic CRUD features"
diff --git a/examples/todos/flutter.yaml b/examples/todos/flutter.yaml
index 5f2e40e..fe54c87 100644
--- a/examples/todos/flutter.yaml
+++ b/examples/todos/flutter.yaml
@@ -1,3 +1,8 @@
name: todos
material-design-icons:
+ - name: action/check_circle
+ - name: action/delete
- name: content/add
+ - name: content/clear
+ - name: navigation/arrow_back
+ - name: navigation/close
diff --git a/examples/todos/lib/components/todo_collection.dart b/examples/todos/lib/components/todo_collection.dart
new file mode 100644
index 0000000..f3baf81
--- /dev/null
+++ b/examples/todos/lib/components/todo_collection.dart
@@ -0,0 +1,69 @@
+// Copyright 2015 The Vanadium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+import 'todo_item.dart';
+import 'todo_dialog.dart';
+import '../todo_model.dart';
+
+/// [TodoCollection] is a [StatefulComponent] component.
+///
+/// This component is responsible for holding a list of TodoModel instances
+/// and rendering the list appropriately. A Todo list fills the whole screen
+/// and is composed of a tool bar, a list view, and the floating action button
+/// for adding a new Todo item.
+class TodoCollection extends StatefulComponent {
+ TodoCollectionState createState() => new TodoCollectionState();
+}
+
+class TodoCollectionState extends State<TodoCollection> {
+ List<TodoModel> todos = new List<TodoModel>();
+
+ void removeTodo(TodoModel todo) {
+ setState(() {
+ todos.remove(todo);
+ });
+ }
+
+ void addTodo(String title) {
+ // Use `setState(fn)` to signal to the framework that some internal state
+ // has been changed and a needs to be rebuilt. If the state update is not
+ // wrapped in a `setState` call the change will not be displayed to the
+ // screen.
+ setState(() {
+ todos.add(new TodoModel(title: title));
+ });
+ }
+
+ Widget buildTodo(BuildContext context, int index) {
+ if (index >= todos.length) {
+ return null;
+ }
+
+ TodoModel todo = todos[index];
+
+ return new TodoItem(
+ // Key is required here to support a requirement of child
+ // ScrollableMixedWidgetList.
+ key: todo.key,
+ todo: todo,
+ onDelete: removeTodo);
+ }
+
+ Widget build(BuildContext context) {
+ return new Scaffold(
+ toolBar: new ToolBar(center: new Text('TODO List')),
+ // Avoiding MaterialList/ScrollableList here since children
+ // would be required to have a pre-defined height via the contstructor
+ // property itemExtent.
+ // SEE: http://goo.gl/cB5bOE
+ body: new ScrollableMixedWidgetList(
+ builder: buildTodo, token: todos.length),
+ floatingActionButton: new FloatingActionButton(
+ child: new Icon(icon: 'content/add'),
+ onPressed: () => showDialog(
+ context: context, child: new TodoDialog(onSave: addTodo))));
+ }
+}
diff --git a/examples/todos/lib/components/todo_dialog.dart b/examples/todos/lib/components/todo_dialog.dart
new file mode 100644
index 0000000..3c542b7
--- /dev/null
+++ b/examples/todos/lib/components/todo_dialog.dart
@@ -0,0 +1,81 @@
+// Copyright 2015 The Vanadium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+typedef void TodoHandleSave(Todo);
+
+class TodoDialog extends StatefulComponent {
+ TodoDialog({Key key, this.value: "", this.title: "Add Todo", this.onSave})
+ : super(key: key);
+
+ final String title;
+ final TodoHandleSave onSave;
+ final String value;
+
+ TodoDialogState createState() => new TodoDialogState();
+}
+
+class TodoDialogState extends State<TodoDialog> {
+ String value;
+
+ @override
+ void initState() {
+ super.initState();
+ value = config.value;
+ }
+
+ void handleInputChange(String update) {
+ value = update;
+ }
+
+ // The Input widget gets different values on change versus on submit, be
+ // sure to update the todo with the most recent value.
+ void handleInputSubmit(String value) {
+ handleInputChange(value);
+ save();
+ }
+
+ void close() {
+ Navigator.pop(context);
+ }
+
+ void save() {
+ close();
+ config.onSave(value);
+ }
+
+ static final GlobalKey inputKey = new GlobalKey(debugLabel: 'todo input');
+
+ Widget build(BuildContext context) {
+ Text label = new Text("What needs to get done?");
+ Input input = new Input(
+ key: inputKey,
+ initialValue: value,
+ onChanged: handleInputChange,
+ onSubmitted: handleInputSubmit);
+ List children = <Widget>[label, input];
+
+ return new Scaffold(
+ toolBar: buildToolbar(),
+ body: new Container(
+ margin: new EdgeDims.all(24.0), child: new Block(children)));
+ }
+
+ Widget buildToolbar() {
+ return new ToolBar(
+ left: new IconButton(icon: "navigation/close", onPressed: close),
+ center: new Text(config.title),
+ right: <Widget>[
+ // NOTE: The right spacing is off here.
+ new FlatButton(
+ child: new Text('SAVE'),
+ // NOTE: without this the button text color is black instead of
+ // white. Is there a correct/canonical way to reach into the
+ // theme and grab the toolbar text color to use here?
+ textColor: Colors.white,
+ onPressed: save)
+ ]);
+ }
+}
diff --git a/examples/todos/lib/components/todo_item.dart b/examples/todos/lib/components/todo_item.dart
new file mode 100644
index 0000000..51f4ce6
--- /dev/null
+++ b/examples/todos/lib/components/todo_item.dart
@@ -0,0 +1,252 @@
+// Copyright 2015 The Vanadium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import 'dart:ui' as ui;
+import 'package:flutter/material.dart';
+import 'package:flutter/painting.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/animation.dart';
+
+import "../todo_model.dart";
+
+const Duration _todoSnapDuration = const Duration(milliseconds: 200);
+
+typedef void TodoHandleDelete(TodoModel);
+
+enum TodoStatus { idle, completing, deleting, }
+
+class TodoItem extends StatefulComponent {
+ TodoItem({Key key, this.todo, this.onDelete}) : super(key: key) {
+ assert(todo != null);
+ assert(onDelete != null);
+ }
+
+ final TodoModel todo;
+ final TodoHandleDelete onDelete;
+
+ TodoItemState createState() => new TodoItemState();
+}
+
+// TODO(jasoncampbell): Create a throttle animation so that dragging
+// appears to slow down as the item gets closer to the threshold.
+class TodoItemState extends State<TodoItem> {
+ HorizontalDragGestureRecognizer drag;
+ ValuePerformance<double> snapPerformance;
+
+ TodoItemState() {
+ drag = new HorizontalDragGestureRecognizer(
+ router: Gesturer.instance.pointerRouter,
+ gestureArena: Gesturer.instance.gestureArena)
+ ..onStart = handleDragStart
+ ..onUpdate = handleDragUpdate
+ ..onEnd = handleDragEnd;
+
+ snapPerformance = new ValuePerformance<double>(
+ variable: snapValue, duration: _todoSnapDuration)
+ ..addStatusListener(handleSnapAnimationStatus);
+ }
+
+ TodoModel todo;
+ TodoStatus status;
+ Size size = new Size(ui.window.size.width, 0.0);
+ double position = 0.0;
+ double lastDelta;
+
+ final double dragThreshold = ui.window.size.width / 2 * 0.75;
+
+ final AnimatedValue<double> snapValue =
+ new AnimatedValue<double>(1.0, end: 0.0, curve: Curves.easeOut);
+
+ /// Override `initState()`.
+ @override
+ void initState() {
+ super.initState();
+
+ todo = config.todo;
+ }
+
+ void dispose() {
+ snapPerformance?.stop();
+ super.dispose();
+ }
+
+ void handleSnapAnimationStatus(PerformanceStatus update) {
+ if (update == PerformanceStatus.completed) {
+ setState(() {
+ snapPerformance.progress = 0.0;
+ position = 0.0;
+
+ // Make sure the right thing happens after the snap animation.
+ switch (status) {
+ case TodoStatus.completing:
+ todo.completed = true;
+ status = TodoStatus.idle;
+ break;
+ case TodoStatus.deleting:
+ config.onDelete(todo);
+ break;
+ default:
+ status = TodoStatus.idle;
+ }
+ });
+ }
+ }
+
+ void handlePointerDown(PointerDownEvent event) {
+ drag.addPointer(event);
+ }
+
+ void handleDragStart(Point globalPosition) {
+ position = 0.0;
+ }
+
+ void handleDragUpdate(double delta) {
+ double update = position + delta;
+
+ // NOTE: My eyes might be playing tricks on me but I think this prevents
+ // some jitter while dragging a Todo horizonatlly.
+ if (position != update) {
+ bool pastThreshold = update.abs() > dragThreshold;
+
+ // Prevent the drag from moving past the treshold.
+ if (!pastThreshold) {
+ setState(() {
+ lastDelta = delta;
+ position = update;
+
+ double statusThreshold = dragThreshold / 2;
+
+ // Update status based on the current position.
+ if (position.abs() > statusThreshold) {
+ if (position.isNegative) {
+ // Dragging to the left (revealing the delete icon).
+ status = TodoStatus.deleting;
+ } else {
+ // Dragging to the right (revealing the complete icon).
+ status = TodoStatus.completing;
+ }
+ } else {
+ // When dragging back and forth between the original position and
+ // the status threshold return the item to the idle state.
+ status = TodoStatus.idle;
+ }
+ });
+ }
+ }
+ }
+
+ void handleDragEnd(Offset velocity) {
+ snapPerformance.play();
+ }
+
+ void handleResize(Size update) {
+ setState(() {
+ size = update;
+ });
+ }
+
+ Widget build(BuildContext context) {
+ Widget overlay = new BuilderTransition(
+ variables: <AnimatedValue<double>>[snapPerformance.variable],
+ performance: snapPerformance.view, builder: (BuildContext context) {
+ double left = snapValue.value.clamp(0.0, 1.0) * position;
+
+ return new Positioned(
+ width: size.width,
+ left: left,
+ child: new TodoItemBody(todo: todo, status: status));
+ });
+
+ List<Widget> children = [
+ // NOTE: This instance of TodoItemBody will never be seen, it is used
+ // entirely for sizing purposes and appears behind the action icons
+ // below. The visible instance is inside of a positioned element on top
+ // of the stack and as a result will lack a hight constraint.
+ new TodoItemBody(todo: todo, onResize: handleResize),
+ ];
+
+ Widget background = new Container(
+ decoration: new BoxDecoration(
+ backgroundColor: Theme.of(context).canvasColor,
+ border: new Border(
+ bottom: new BorderSide(
+ color: Theme.of(context).dividerColor, width: 1.0))),
+ height: size.height,
+ child: new Row(<Widget>[
+ new Flexible(
+ child: new Container(
+ child: new Align(
+ child: new Icon(
+ icon: "action/check_circle",
+ color: IconThemeColor.white),
+ alignment: const FractionalOffset(0.0, 0.5)),
+ decoration: new BoxDecoration(
+ backgroundColor: Colors.greenAccent[100]),
+ padding: const EdgeDims.all(24.0))),
+ new Flexible(
+ child: new Container(
+ child: new Align(
+ child: new Icon(
+ icon: "action/delete", color: IconThemeColor.white),
+ alignment: const FractionalOffset(1.0, 0.5)),
+ decoration: new BoxDecoration(
+ backgroundColor: Colors.redAccent[100]),
+ padding: const EdgeDims.all(24.0)))
+ ]));
+
+ children.add(background);
+ children.add(overlay);
+
+ return new Listener(
+ onPointerDown: handlePointerDown,
+ behavior: HitTestBehavior.translucent,
+ child: new Stack(children));
+ }
+}
+
+typedef void TodoHandleResize(Size);
+
+class TodoItemBody extends StatelessComponent {
+ TodoItemBody({Key key, this.todo, this.status, this.onResize});
+
+ final TodoModel todo;
+ final TodoHandleResize onResize;
+ final TodoStatus status;
+
+ void maybeCallResize(Size size) {
+ if (onResize != null) {
+ onResize(size);
+ }
+ }
+
+ Widget build(BuildContext context) {
+ Color backgroundColor;
+
+ switch (status) {
+ case TodoStatus.completing:
+ backgroundColor = Colors.greenAccent[100];
+ break;
+ case TodoStatus.deleting:
+ backgroundColor = Colors.redAccent[100];
+ break;
+ default:
+ backgroundColor = Theme.of(context).canvasColor;
+ }
+
+ String message = todo.title;
+
+ if (todo.completed) {
+ message = "COMPLETED: ${todo.title}";
+ }
+
+ return new SizeObserver(
+ onSizeChanged: maybeCallResize,
+ child: new Container(
+ decoration: new BoxDecoration(backgroundColor: backgroundColor),
+ child: new Padding(
+ padding: const EdgeDims.all(24.0),
+ child: new Text(message))));
+ }
+}
diff --git a/examples/todos/lib/main.dart b/examples/todos/lib/main.dart
index e0cf583..6e40cfa 100644
--- a/examples/todos/lib/main.dart
+++ b/examples/todos/lib/main.dart
@@ -4,6 +4,8 @@
import 'package:flutter/material.dart';
+import './components/todo_collection.dart';
+
/// Start the Todo application.
///
/// Use the Flutter `runApp` function render this application's widget tree
@@ -21,10 +23,9 @@
/// composition of the widget tree it can inherit from `StatelessComponent`.
class App extends StatelessComponent {
final ThemeData theme = new ThemeData(
- brightness: ThemeBrightness.light,
- primarySwatch: Colors.indigo,
- accentColor: Colors.pinkAccent[200]
- );
+ brightness: ThemeBrightness.light,
+ primarySwatch: Colors.indigo,
+ accentColor: Colors.pinkAccent[200]);
/// Build a `MaterialApp` widget.
///
@@ -32,86 +33,8 @@
/// only an empty Todo List is rendered as the single, default route.
Widget build(BuildContext context) {
return new MaterialApp(
- title: 'TODO',
- theme: theme,
- routes: {'/': (RouteArguments args) => new TodoList()}
- );
- }
-}
-
-/// `TodoList` is a `StatefulComponent` component.
-///
-/// This component is responsible for holding a list of `Todo` items and
-/// rendering the list appropriately. A Todo list fills the whole screen
-/// and is composed of a tool bar, a list view, and the floating
-/// action button for adding a new Todo item.
-class TodoList extends StatefulComponent {
- TodoListState createState() => new TodoListState();
-}
-
-class TodoListState extends State<TodoList> {
- List<Todo> todos = new List<Todo>();
-
- void addTodo() {
- // Use `setState(fn)` to signal to the framework that some internal state
- // has been changed and a needs to be rebuilt. If the state update is not
- // wrapped in a `setState` call the change will not be displayed to the
- // screen.
- setState(() {
- todos.add(new Todo(title: 'FAB Item #${todos.length}.'));
- });
- }
-
- Widget build(BuildContext context) {
- return new Scaffold(
- toolBar: new ToolBar(
- center: new Text('TODO List')
- ),
- body: new MaterialList(
- type: MaterialListType.oneLine,
- children: todos
- ),
- floatingActionButton: new FloatingActionButton(
- child: new Icon(icon: 'content/add'),
- onPressed: addTodo
- )
- );
- }
-}
-
-class Todo extends StatefulComponent {
- Todo({Key key, this.title, this.completed: false}) : super(key: key);
-
- final String title;
- final bool completed;
-
- TodoState createState() => new TodoState();
-}
-
-class TodoState extends State<Todo> {
- bool completed;
-
- /// Override `initState()`.
- ///
- /// Initialize internal state value `completed` with the value passed into
- /// the parent `Todo` constructor. The `config` property allows the state
- /// instance to access the properties of the `Todo` component.
- @override
- void initState() {
- super.initState();
- completed = config.completed;
- }
-
- void toggle() {
- setState(() {
- completed = !completed;
- });
- }
-
- Widget build(BuildContext context) {
- return new ListItem(
- center: new Text('${config.title} - done: $completed'),
- onTap: toggle
- );
+ title: 'TODO',
+ theme: theme,
+ routes: {'/': (RouteArguments args) => new TodoCollection()});
}
}
diff --git a/examples/todos/lib/todo_model.dart b/examples/todos/lib/todo_model.dart
new file mode 100644
index 0000000..37aecb4
--- /dev/null
+++ b/examples/todos/lib/todo_model.dart
@@ -0,0 +1,17 @@
+// Copyright 2015 The Vanadium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:uuid/uuid.dart';
+
+class TodoModel {
+ TodoModel({this.id, this.title, this.completed: false}) {
+ id ??= new Uuid().v4();
+ }
+
+ String id;
+ String title;
+ bool completed;
+ Key get key => new ObjectKey(this);
+}
diff --git a/examples/todos/pubspec.yaml b/examples/todos/pubspec.yaml
index dc298bd..855c158 100644
--- a/examples/todos/pubspec.yaml
+++ b/examples/todos/pubspec.yaml
@@ -1,5 +1,6 @@
name: todos
description: A minimal Flutter project.
dependencies:
+ uuid: 0.5.0
flutter:
path: ../../../../../../flutter/packages/flutter
