Build a note-taking app with Flutter + Firebase — Part II

Implements a plain-text editor with reversible actions & Hero transitions

Yingxin Wu
Flutter Community

--

Flutter Keep note editor screenshot

Nice to have you in this second part of the series of Build a note-taking app with Flutter + Firebase. If you haven’t read the previous article, please find it here.

In part I, we’ve built the first screen for the notebook app, Flutter Keep. In this article, we’re going to create a note editor with reversible operations supported, and explore the magical Hero animations.

The note editor

There’re many types of notes in Google Keep, including plain-text notes, audio notes, and checklists, with optional image attachments. However, in this example, we’ll focus on the plain-text editor to keep things simple.

The following is a preview of what we’re going to build:

Note editor preview
Note editor preview

In essence, it composites of two text fields, one for the title, another for the plain-text content. Plus, a top AppBar and a ModalBottomSheet provides actions to update either the state or the color of the note.

--

--

Yingxin Wu
Flutter Community

Software developer, architect, swimmer, scuba diver