Flutter for iOS-Scrolling Content

I didn’t see this post coming.

I had planned to talk about adapting the app for display on the iPad and realised I needed to start by creating a recipe details screen for the iPhone.

Unfortunately, the content didn’t scroll which caused a display issue when the number instructions or ingredients increased.

Ta Da

After a bit of research (see links below) I found the way to implement a natural iOS experience where the content scrolls under the tab and navigation bars.

BackBurner

We haven’t spent any time improving the style of the recipe details screen, it’s pretty bland, not something I’d want to release. We can tackle this in a future post, once we have a few more screens up and running.

Large navigation bar title that shrinks when the content is scrolled. This can be achieved when you use the CupertinoSliverNavigationBar as the top widget in the sliver list, it requires largeTitle or it errors, so you cannot use it as the normal navigation bar. The plan is to add it as extra functionality to the new TabScrollableContentScaffold widget.

XP

We needed to slow down and make sure that we could provide a native experience when scrolling content in a tab.

Which includes content appearing to scroll under the tab and navigation bar and for it to bounce and snap when it reaches the beginning or end. This was abstracted into a widget called TabScrollableContentScaffold so we can easily reproduce the experience on other tabs we build.

@override
Widget build(BuildContext context) {
  
  var appState = Provider.of<DigestableMeState>(context);

return TabScrollableContentScaffold(
    navigationBar: navBar(),
    children: [
      recipeTitleAndAuthor(appState),
      recipeImage(),
      for (Widget item in ingredients(appState))
        item,
      for (Widget item in instructions(appState))
        item,
      shrug()
    ],
  );
}

Mapping hurts, is costly, never under estimate it, get good at map -> reduce in the languages you use. Had to add some more code and tests to fix the mapping from ‘serpApiResult’ results to the ‘Recipe’ view model.

You may have noticed that the initial screen design changed, instructions and ingredients are not side by side, this sort of small change is the normal during most implementations, just remember to demo and agree them.

Links

• The code for this article
• Slivers, Demystified
• Custom Scroll Effects In Flutter Using CustomScrollView
• Google Codelabs : Building a Cupertino app with Flutter
• Compare Dart to other languages that implement LINQ
• 101 LINQ samples

Sound & Vision

One more thing

You go to your TV when you want to turn your brain off. You go to your computer when you want to turn your brain on. Those are not the same.

Steve Jobs_