Part II: Navigation in Flutter

In Part I, we created a basic flutter based “Word Collector” app with a single page. In this article, we will create a new page to add a new word and learn about navigation in flutter. To follow along, the starter repo is available here.

Create “Add Word” Page

Let’s add a new dart file to our lib folder named add_word.dartand create a stateless widget like so: (we will come to stateful widgets later)

Now, we will replace Container with a Scaffold to provide a Material design visual structure to this page like so:

This adds a title bar at the top and a floating button at the bottom with the remaning space being specified by the body parameter. This is very similar to the home page that we had created in Part I.

Finally, let’s add a textfield with some padding in the center under the body parameter:

With these changes, WCAddWordPage looks like so:

Navigation From Home Page And Back

In order to add the navigation now, we will use Navigator and push a material route to move our newly created page whenever the floating button is clicked. With these, our page looks like so:

Finally, we will pop back to the home page when floating button is clicked on AddWord like so:

With these changes, we can now move back-and-forth between Home and AddWord Pages. In the next article, we will look at sending the word details back to the home page while popping back. Stay tuned!

To view the code for this article, please visit https://github.com/gupnik/word_collector/releases/tag/PartII.