Flutter for iOS-Lists

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_

Other posts in the series

Development

• Layout
• Lists

DevOps:

• Continuous Integration — Workflow
• Continuous Integration — Web