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_

Lets theme the the application, make it look good, do it in a maintainable way that can be easily rebranded.

I started by adding a ‘light’ theme in its own file:

import 'package:flutter/cupertino.dart';

const CupertinoThemeData cupertinoLight = CupertinoThemeData(
  brightness: Brightness.light,
  primaryColor: CupertinoColors.activeBlue
);

And using it in the main.dart file:

return CupertinoApp(
  ...  
  theme: cupertinoLight,
  ...
);

We can then remove the colour settings that were added to get the initial green background for the tab.

Ok, what about a dark theme ?

import 'package:flutter/cupertino.dart';

const CupertinoThemeData cupertinoLight = CupertinoThemeData(
  brightness: Brightness.dark,
  primaryColor: CupertinoColors.activeGreen
);

Black text on a black background a little disappointing.

To fix this I created the text styles needed and added a switch(bool) to the application state file ‘DigestableMeState’ to control the switching between the light and dark modes.

Ok, now we look like some of Apple’s iOS applications, but what if we want to rebrand our application for EE ?

In mobile applications you don’t usual need to include the logo in the application screens as its identity is the app you install, so we can just concentrate of a swatch of colours and the typography.

A few more files and constants later…

Provider(
	create: (context) => DigestableMeState(
    	brightness: Brightness.dark,
        whiteLabel: WhiteLabel.ee
    ),
),

and we launch as EE in evening dark mode.

It is really about being flexible to change styles at the application level without having too may specific styles in the widgets themselves.

BackBurner

• Automatically toggling between light and dark mode based on the current device setting.
• Handling themes across platform to include Android or the web.
• Custom widgets themes for custom widgets, not even sure if they are necessary at this point so something to come back to. A custom widget theme would allow you to target the custom widgets with styles i.e. we could target the all ListItem widgets to add border, padding or other styles as the application level.

XP

Getting the dark theme to work required more effort than just having a top level theme.

I had to remove the Card from the ListItem widget and go back to simple Rows, Columns, which is really what I should have used in the first place.

I replaced text styles that I had specified in the widgets

style: const TextStyle(
	color: Colors.black87,
    fontSize: 14,
),

With text styles that I created to support the Apple Typography guidelines:

Injection:

Provider(
	create: (context) => DigestableMeState(
    	brightness: Brightness.light,
    ),
)

Construction:

DigestableMeState({Brightness? brightness}) {
    if (brightness != null) {
      this.brightness = brightness;
    }
    _cupertinoTypography = CupertinoTypography(this.brightness);
...

Definition:

CupertinoTypography(this.brightness);

TextStyle bodyLight = const TextStyle(
  color: CupertinoColors.black,
  fontSize: 17,
);

TextStyle bodyDark = const TextStyle(
  color: CupertinoColors.white,
  fontSize: 17,
);
TextStyle get body {
  return brightness == Brightness.dark ? bodyDark : bodyLight;
}
...

Usage:

var appState = Provider.of<DigestableMeState>(context);
Text(item.title, style: appState.cupertinoTypography.title3)

Links

• The code for this article
• Flutter White Label Apps Made Simple: What You Need to Know
• Use themes to share colors and font styles
• Theming a Flutter App: Getting Started
• How to check if dark mode is enabled on iOS/Android using Flutter?
• How To Use Themes in Flutter
• One Text Theme To Rule Them All
• Material Design – Typography
• Theming in Flutter
• Use a custom font

Sound & Vision

It’s only love with a little be of rain…

One more thing

“Older people sit down and ask, ‘What is it?’ but the boy asks, ‘What can I do with it?’”

Steve Jobs_ on showing a 9-year-old a Mac

Great quote, reminds me to play with new tech, make mistakes, learn, rather than try to define or control it.

Each year we try to make an improvement to our dinner on Christmas day, this year the focus is on better roasties.

Let’s look at how we can find and add a new roast potato recipe to our digest.

The acceptance for this requirement is to be able to:

• Search for a new recipe
• Save it to our digest:
  
  • Title
  • Author
  • Thumbnail image

To get started I added a top navigation bar with an action that allows us to add a recipe.

@override
Widget build(BuildContext context) {
  return CupertinoPageScaffold(
    navigationBar: const CupertinoNavigationBar(
      heroTag: "RecipeTabHeroTag",
      transitionBetweenRoutes: false,
      middle: Text(
        "Recipies",
      ),
      trailing: Icon(CupertinoIcons.add)
    ),
    child: Container(
      color: CupertinoColors.activeGreen,
      child: recipiesList(),
    ),
  );
}

I renamed the tab back to ‘Digests’ now we have a title of ‘Recipes’ in the top navigation bar.

Now for another quick decision we are going to slide up the screen when the add button is clicked and show a search bar to allow us to find new recipes.

With that out the way we just need to harness Google search to find some new recipes.

I turned to SerpAPI for this and grabbed some data from a recipe search for roast potatoes with balsamic vinegar.

https://serpapi.com/search.json?q=Roast+potatoes+with+balsamic&location=United+Kingdom&hl=en&gl=uk&google_domain=google.co.uk&api_key=secret_api_key

{
    "search_metadata": {
      "id": "61c3369cc99903747c1e643b",
      "status": "Success",
      "json_endpoint": "https://serpapi.com/searches/bdb5db8a7f4c5593/61c3369cc99903747c1e643b.json",
      "created_at": "2021-12-22 14:30:52 UTC",
      "processed_at": "2021-12-22 14:30:52 UTC",
      "google_url": "https://www.google.co.uk/search?q=Roast+potatoes+with+balsamic&oq=Roast+potatoes+with+balsamic&uule=w+CAIQICIOVW5pdGVkIEtpbmdkb20&hl=en&gl=uk&sourceid=chrome&ie=UTF-8",
      "raw_html_file": "https://serpapi.com/searches/bdb5db8a7f4c5593/61c3369cc99903747c1e643b.html",
      "total_time_taken": 1.99
    },
    "search_parameters": {
      "engine": "google",
      "q": "Roast potatoes with balsamic",
      "location_requested": "United Kingdom",
      "location_used": "United Kingdom",
      "google_domain": "google.co.uk",
      "hl": "en",
      "gl": "uk",
      "device": "desktop"
    },
    "search_information": {
      "organic_results_state": "Results for exact spelling",
      "query_displayed": "Roast potatoes with balsamic",
      "total_results": 12800000,
      "time_taken_displayed": 0.49
    },
    "recipes_results": [
      {
        "title": "Balsamic potatoes",
        "link": "https://www.jamieoliver.com/recipes/potato-recipes/balsamic-potatoes/",
        "source": "Jamie Oliver",
        "total_time": "2 hrs 20 mins",
        "ingredients":
        [
          "Balsamic vinegar",
          "maris piper potatoes",
          "red onions",
          "rocket",
          "olive oil"
        ],
        "thumbnail": "https://serpapi.com/searches/61c3369cc99903747c1e643b/images/bd928f9ef521c02bbdb2df96157011d6a02d619d06f8a6e0e62bb157f48e10e5.jpeg"
      },
      {
        "title": "Balsamic roast potatoes",
        "link": "https://www.taste.com.au/recipes/balsamic-roast-potatoes/1bcb6bd4-2efa-4f01-bc98-f2ce32eaa906",
        "source": "Taste",
        "rating": 4,
        "reviews": 2,
        "total_time": "1 hr 5 mins",
        "ingredients":
        [
          "Balsamic vinegar",
          "kipfler potatoes",
          "olive oil",
          "garlic"
        ],
        "thumbnail": "https://serpapi.com/searches/61c3369cc99903747c1e643b/images/bd928f9ef521c02bbdb2df96157011d625322c9b727d95f76706f0471bbaba31.jpeg"
      },
      {
        "title": "Balsamic roast potatoes",
        "link": "https://www.delicious.com.au/recipes/balsamic-roast-potatoes/1e2f30ad-d9b4-41bf-aa2e-16f1e2accfb7",
        "source": "Delicious",
        "rating": 5,
        "reviews": 1,
        "total_time": "1 hr 5 mins",
        "ingredients":
        [
          "Balsamic vinegar",
          "kipfler potatoes",
          "olive oil",
          "garlic"
        ],
        "thumbnail": "https://serpapi.com/searches/61c3369cc99903747c1e643b/images/bd928f9ef521c02bbdb2df96157011d6ebca3a2868589cb9feab32215a0ba5e8.jpeg"
      }
    ]
}

Added a list to return the results from the search.

When a result is selected (onTap) we add it to our recipe digest.

Ta Da

Back Burner

Saving the digest.

For now we save the added recipe in memory, later we can persist it locally and remotely to our data stores.

iOS Only – Click tab to reset

Adding functionality to navigate back to the top level/state when tapping on the current tab item, this is a good iOS experience, a design that people expect.

Animated Search Bar

I decided to avoid implementing a more advance search bar similar to the one in Apple’s “App Store” application that has animation on focus.

We can look at this and attempt to improve the search bar later on once the basics are in shape.

CupertinoSearchTextField

I’m getting some library level errors from Flutter asking me to report a framework bug when hitting enter on the keyboard in the search field using a iOS emulator.

For now I’ve abstracted it into a widget and intend to replace it with a custom version with more features.

I’ve also noticed that you need to enter twice on the keyboard in the emulator before the ‘OnTap’ event fires.

XP

In memory data

We need to store and maintain a list of recipes to allow us to add new recipes.

At this point are using a memory repository class to manage this and injecting it as a ChangeNotifierProvider.

ChangeNotifierProvider<MemoryRepository>(
	create: (_) => MemoryRepository(),
    lazy: false,
),

It sounds complicated but it’s just a list of recipes in memory and some methods to add and retrieve them.

List<Recipe> findAllRecipes();
Recipe addRecipe(Recipe recipe);

See the Flutter documentation for more information on state management.

When we move to a data store e.g. a DB via an API we can improve this code.

List Item Reuse

As part of displaying the search results we need to display a list again, so I abstracted the initial digest list item so we could reuse it and ensure our list items have the same look and feel across the app.

Widget recipesList() {
  final repository = Provider.of<MemoryRepository>(context);
  var recipes = repository.findAllRecipes();

  return ListView.builder(
    itemCount: recipes.length,
    itemBuilder: (context, index) {
      var listItemInfo = ListItemInfo(
        id: recipes[index].link,
        author: recipes[index].source,
        title: recipes[index].title,
        titleImage: Image.network(recipes[index].thumbnail),
        showAddIcon: false,
      );

      return ListItem(listItemInfo);
    },
  );
}

Widget recipeSearchResultsList() {
  var searchResultRecipes = _searchResults.data.length > 0
    ? Recipe.fromSerpApiResultJson(_searchResults.data)
    : <Recipe>[];

  final repository = Provider.of<MemoryRepository>(context);

  return ListView.builder(
    itemCount: searchResultRecipes.length,
    itemBuilder: (context, index) {
      var listItemInfo = ListItemInfo(
        id: searchResultRecipes[index].link,
        author: searchResultRecipes[index].source,
        title: searchResultRecipes[index].title,
        titleImage: Image.network(searchResultRecipes[index].thumbnail),
        showAddIcon: true,
        onTap: () => {
          repository.addRecipe(searchResultRecipes[index]),
          Navigator.pop(context)
        },
      );

      return ListItem(listItemInfo);
    },
  );
}

Scope Creep (Beware – YUTNI Your unlikely to need it)

For me this was the most tempting time to try and over engineer the project as it is still missing a number of key things.

I wanted to do more work on:

• data access, including batched api requests
• design much better widgets with nice animation
• add a theme and a flavour
• logging
• Automated acceptance testing.
• Improve the design for Android
• Look at how it would work as website
• bring in some state management libraries
• etc..
  

But experience is telling me to resist the urge to get side tracked, even some initial research on google, has slowed this post down considerably.

In the end I went back to the demo mentality of get it working, balanced with advice from Uncle Bob, that once it’s working that’s only 50%, you now need to get it right.

That equated to some more time extracting methods and tidying up.

As long as we give each class, method a single responsibility in its own file, we can easily improve them independently later on, as we move from concept to production ready.

Often the scope creep comes in when I get bored with the discipline of the task at hand as disciplines feel slow.

Links

• SerpApi Recipe results
  
• Add a Tab Bar and Navigation Bar with iOS style in your next Flutter app 
• Add elevation to any widget

A big thanks to M4trix Dev as his article on the iOS Tab Bar was invaluable and allowed me to quickly fix the problems I had with my first implementation.

People

“The thing is, it’s very easy to be different, but very difficult to be better.”

Jony Ive_

Sound & Vision

One more thing

“I have looked in the mirror every morning and asked myself: “If today were the last day of my life, would I want to do what I am about to do today?” And whenever the answer has been “No” for too many days in a row, I know I need to change something.”

Steve Jobs_

With xmas round the corner, our sponsor has asked that we add a new digest to share recipes.

Santa’s helper will need to get up and have a pre-breakfast boiled egg, so lets just cut to to the chase and start with some actual data, some json:

{
	"title": "How to boil an egg, the Heston Blumenthal way",
	"titleImage": "https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2014/11/5/1415205733799/4bfbd71a-6cd0-4494-833f-eaaed20a15b3-1020x612.jpeg?width=620&quality=45&auto=format&fit=max&dpr=2&s=ca3a95d7e761d267eff1b79b58cc4849",
	"author": "Heston Blumenthal",
	"origin": "https://www.theguardian.com/lifeandstyle/2014/nov/11/how-to-boil-an-egg-the-heston-blumenthal-way",
	"ingredients": [
        {
        	"quantity": "1",
			"quantityType": "unit",
            "name": "egg",
			"type": "Dairy"
        }
	],
	"steps": [
        {
        	"sequenceNumber": "1",
            "instruction": "Take a small saucepan with a glass lid and carefully place a single egg (or two, or three) inside it. Burford brown eggs have a nice orange yolk. Fill the pan so the water only just covers the eggs – not even a millimetre more. If you had a centimetre of water covering the egg then you could still get the same result, but you’d have to play with the timing."
        },
        {
        	"sequenceNumber": "2",
            "instruction": "Put the pan on maximum heat with the lid on and bring to the boil."
        },
		{
        	"sequenceNumber": "3",
            "instruction": "As soon as the water starts to bubble, remove from the heat. As you take the pan off, set a timer for six minutes; keep the lid on. Make sure you time it exactly, and you’ll end up with the perfect egg."
        }
	]
}

Some acceptance criteria:

• Displays a list of recipes
• Each recipe has a title, author and a picture.
  

And a design for our list item:

Because it’s so close to Christmas we couldn’t get our API approved, so we created a simple api client class that mocks the data for the recipe list.

Now we have the data we can display the data items in a list using the ListView widget.

Ta Da

You maybe thinking why didn’t we build the digest list first ?

Because we only have one interest, recipes, we can add the digest list when it is needed.

The focus is on building content that matters and not framework or things we might need.

So on that note, for now, lets just change the tab description:

recipies_tab.dart

BackBurner

Use of a API on a server, instead of mocked data.

Better application of styles, including inclusion of Apples design guideline for the TabBar, that state that it should be translucent when items are under it and opaque when at the end of the list.

XP

Use of dio a powerful Http client for Dart, which supports Interceptors, used to inject canned data.

The reason for choosing and using a package now is that it saves us having to create requests and response objects, we will hook it up to a real Api soon.

People

“The speed of the project is the speed at which ideas move between minds”

“or its inverse which is stronger, anything that slows the movement of ideas between minds slows the project down”

 Alistar Cockburn_

One more thing

“You can’t connect the dots looking forward; you can only connect them looking backward. So you have to trust that the dots will somehow connect in your future.”

Steve Jobs_