Ok, time to add the side menu widget to the iPad split view, it should look something like this.
We only need one level for now so it is relatively straight forward.
Ta Da
The tricky bit this time was getting the side menu to communicate with the content areas to switch content out based on the the menu item selected.
Next
That’s it for iOS for now.
Before then turning out attention to Android, we will take a look at unit, widget and acceptance tests, see you next time.
XP
Widget Events
The side menu needed to communicate when a menu item was selected so that the content areas could be changed based on the item selected.
To do this I create an event ‘MenuItemtapped’ that is fired when a menu item is tapped and bubbles up to the parent splitview widget, which in turn, sets the selected index value and notifies the content to change.
The event extends the built in widget notification class.
This is powerful stuff and allows us to keep the widgets loosely coupled so that we can use the side menu in another widget other than the splitview should we need to. Chema Rubio article is a good summary on how to use events in your application.
ListTile
Replaced custom list item with the Cupertino version of the ListTile.
Now we have a widget for lists and view model for the list items, that provides a standard list tile experience on iOS that can easily be extend to Android.
Testing Widgets Throw Assertions
Found these useful matchers in the Flutter source code in ‘flutter/dev/conductor/core/test/common.dart’.
Matcher throwsAssertionWith(String messageSubString) {
return throwsA(
isA<AssertionError>().having(
(AssertionError e) => e.toString(),
'description',
contains(messageSubString),
),
);
}
Matcher throwsExceptionWith(String messageSubString) {
return throwsA(
isA<Exception>().having(
(Exception e) => e.toString(),
'description',
contains(messageSubString),
),
);
}
Usage Example:
expect(
() => Version.increment(version, level).toString(),
throwsAssertionWith("Do not increment"),
);
BackBurner
Adding recipes
The functionality to search and add recipes has not been implemented, the priority now is to get everything fully under test and provide a native experience for Android users.
Sub menus
Submenu items with expansion will be added when needed.
List Items
Not sure if the CupertinoListTile is quite what I want.
- Text is small.
- Divider line placement is not centred.
- Highlighting of selected item could be polished up.
It’s functional for now but list items are very import so we want a great one, so we will revisit it after adding the Android version.
Links
- Material ListTile
- Cupertino ListTile
- Flutter orientation lock: portrait only
- How to create a side menu in Flutter
- Responsive Side Navigation Bar
- Flutter, notifications ‘bubble up’ and values ‘go down’
- Explore IndexedStack Widget In Flutter
Sound & Vision
One more thing…
“I don’t think it’s good that Apple’s perceived as different. I think it’s important that Apple’s perceived as much better. If being different is essential to doing that, then we have to do that, but if we can be much better without being different, that’d be fine with me. I want to be much better.”
Steve Jobs
