Flutter for iOS-Layout

This is a good place to start, you can really get going with making your ideas reality, once you can show content and navigate around.

Login, logging and other framework items, although vital can and should wait until later. It’s all too easy to start a project and never get past the login screen, so simple don’t start with them.

I chose to use tab navigation for DigestableMe.

The advantage of the Tab Bar is it is always visible, one click navigation that people with Apple and Android phones are used to, which will give your app a native feel, and good Ux experience.

When you have a larger screen a Side Bar or Menu will provide a better experience. These layouts will be covered in other posts and if you are not concentrating on phone/mobile first you may want to skip this post.

Let’s assume we have analytics showing we should target iPhone users, so we can start by creating a traditional bottom Tab Bar.

In a future post we will then modify the application for Android phones and other devices.

Google recommends up to 5 top level icons and Apple 3–5, so we are going to set the max number of top level items to 5.

DigestableMe will start with these three tabs:

• Interests, a list of things to digest.
• Friends, people to digest with.
• History, recent first list of actions.

The new widget will be called TabbedLayout and will contain a Tab Bar and Content Area.

Its purpose is to:

• Highlight the core functions
• Simplify the user journey

We can now add some acceptance criteria to give direction and to know when we are done:

1. It will contain a Tab Bar
2. The Tab Bar can contain 2–5 items
3. The Tab Bar will be anchored to the bottom of the widget
4. The height of the Tab Bar will be the size of the largest item
5. Each item will comprise of a title and an icon
6. Cupertino icons will be used on Apple devices, Material on all others.
7. There will be a Content Area above the above the Tab Bar
8. The Content Area will expand to fill the available height.
9. When a Tab is pressed it displays the appropriate Content
10. Tab Items and Content are configurable I.e. inputs.
11. The TabbedLayout widget will expand to fill the available space.
12. The widget can be themed.
13. The widget can display as a skeleton when loading.

To start I created these new files:

• /test/widget/layout/tabbed_layout_tab_bar_test.dart
• /lib/widget/layout/tabbed_layout.dart

I then started writing tests and code to:

• Implement the criteria above
• Provide a contract for the code.
• Document the code through readable tests.

Ta Da

During the writing of the tests these additional files where added.

• /lib/widget/layout/domain/tab_item.dart
• /test/widget/layout/fixture/tabbed_layout_fixture.dart
• /test/widget/layout/tabbed_layout_tab_item_test.dart
• /test/widget/layout/tabbed_layout_content_test.dart

Some of the acceptance criteria have been skipped because the functionality is covered and tested by the CupertinoTabScaffold widget:

1. The Tab Bar will be anchored to the bottom of the widget
2. The height of the Tab Bar will be the size of the largest item
3. The Content Area will expand to fill the available height.
4. When a Tab is pressed it displays the appropriate Content
5. The Tabs widget will expand to fill the available space.

See the code for more details on the new widget and tests.

BackBurner

• Using material design for other devices and browsers, to give a cross platform look and feel.
• Branding, themes.

Including these acceptance criteria:

1. Cupertino icons will be used on Apple devices, Material on all others.
2. The widget can be themed.
3. The widget can display as a skeleton when loading.

XP

VSCode

Use the VSCode extension

to create the stateful widget skeleton code using a snippet.

Use the VSCode extension to create the TabItem class.

NB: I reduced the codeine to the constructor and toString, we will add more if needed in later posts.

People

Kent Beck, Agile Manifesto founder, TDD, extreme programming.

Sound & Vision

YAGNI, just sounded like Cagney…

Links

• Apple Human Interface Guidelines — Tab Bar
• Google Material Design — Navigation
• Top 6 Basic Patterns for Mobile Navigation: Pros and Cons
• Top 8 Mobile Navigation Menu Design for Your Inspiration
• Uncle Bob, TDD Demo.
• Flutter — State Management
• Flutter — Layouts
• Dart — Event bus package
• Handling errors in Flutter
• A Deep Dive Into Widget Testing in Flutter: Part II (Finder and WidgetTester)
• Cupertino Icons
• Add a Tab Bar and Navigation Bar with iOS style in your next Flutter app

One more thing

We had a fundamental belief that doing it right the first time was going to be easier than having to go back and fix it. And I cannot say strongly enough that the repercussions of that attitude are staggering. I’ve seen them again and again throughout my business life.

Steve Jobs_

Other posts in the series

Development

• Layout
• Lists

DevOps:

• Continuous Integration — Workflow
• Continuous Integration — Web