Apple recommend using a split view layout on iPads.
There is no Cupertino split view component out of the box, so we are going to build this one from scratch.
I used Apple’s Mail application as my benchmark and came up with some requirements:
Three Columns
- Sidebar
- Supplementary (Optional)
- Content
All columns are displayed when in Landscape.
In portrait only the content column is displayed and the nav bar allows you to view the Sidebar and supplementary columns.
The Sidebar has:
- A nav bar with icons
- Collapse
- Other actions like edit, del…
- Title (Heading)
- Navigation Tree
The supplementary column has:
- A nav bar with icons
- Collapse
- Other actions like edit, del…
- Large Title
- Sub-title
- Content area, often a list of items
The content column has:
- A nav bar with icons
- Other actions like edit, del…
- Large Title
- Content area
Ta Da
Next
Spoiler alert: Welcome to the new ‘Next’ section.
The next blog will complete the split view by adding a navigation menu to the sidebar.
This will conclude our work with iOS devices for a while.
Before then turning out attention to Android, we will take a look at unit, widget and acceptance tests, see you next time.
BackBurner
Ran out of time this week to complete the sidebar menu, so it gets it’s own post next time.
The navigation bars in the split view are opaque and do not have the same visual feature of a tab bar that allows the content to scroll under it. The aim is to add this later when we look at more advanced animation techniques.
We are leaving the requirement to only display the content area in portrait mode, with the option to slide in the sidebar and supplementary columns via the navigation bars. It fell into nice to have.
Isolating navigation and httpclient, so that they can be mocked or stubbed in the unit and widget tests, I will pick this up in the testing blog.
XP
85% Reuse
I renamed the ‘screen’ directory to ‘content’ with the aim that all the widgets under it will be used cross platform, and widgets in other directories will be platform specific.
I intend to monitor the code/widgets to see if we can hit or even exceed the expected reuse target across platforms.
More on metrics another time.
Project Structure
The tricky bit is deciding when to put areas under items and when to put items under areas. I start by putting areas under items e.g. the digest folder will have a models folder, a data folder etc… this way the supporting files are located next to the files referencing them.
I will then move things around when I start to feel lost.
Whilst creating the split view widget I moved all widgets models in to the area lib/model directory and all data under lib/data, which is a change in direction, but is working better for me.
Another way to tackle this is to just use the finder in VSCode ?P.
Themes
As part of building this layout, I refactored themes moving them out of the DigestibleMeState file into their own ‘ChangeNotifierProvider’, this has cleaned up the responsibilities and put us in a good position to setup the theme to dynamically change based on the time of day.
Building layouts with Rows and Columns
Split view is the largest piece of UI so far and I personally find it useful to experiment with the layouts using rows, columns and containers with background colours.
It doesn’t take much longer than using a drawing tool to produce a screen design.
I recommend playing with Columns, Rows and Containers when building new UI and just watching what happens.
Links
- The code for this article
- Apple guidelines on Split Views
- Apple guidelines on Navigation Bars
- Responsive layouts in Flutter: Split View and Drawer Navigation
- Implementing master-detail layouts in Flutter
- Lighten or darken a colour
Sound & Vision
One more thing…
You’ve got to find what you love. And that is as true for your work as it is for your lovers. Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle.”
Steve Jobs_ on finding your passion
