Sitemap
Flutter Community

Articles and Stories from the Flutter Community

Follow publication

Member-only story

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

5 min readMar 7, 2020

--

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.

--

--

Flutter Community
Flutter Community

Published in Flutter Community

Articles and Stories from the Flutter Community

Yingxin Wu
Yingxin Wu

Written by Yingxin Wu

Software developer, architect, swimmer, scuba diver