(Still Being) Made bySarincasm

On The Shoulders of Giants

A "Get Your Hands Dirty" project to learn Flutter

About

We will explore a potential product feature and use this to learn Flutter, by implementing our ideas as we go along.

The Concept

Can we offer fans more variety of content and more ways to engage with Onefootball, while gathering an insanely powerful signal for personalizing their experience.
At the same time, can we inspire creators so that they're invested in the success of Onefootball, and have a reason to send their fans to Onefootball, therefore increasing our reach and engagement every time they post content on our platform.
We will build a Creators Page - a profile page with all content that a single creator has posted on Onefootball. We will also explore how we can enable powerful personalization using this central idea.
Read more on this slack canvas.

3: Splash!

We make a static splash screen using an image and a few lines of code. We also learn about the `pubspec.yaml` file, and add an icon for our app.

Splash

We'll build a static splash screen for our app that looks like this

SplashScreen

Time to Code

Step 1: Boilerplate

Initializing a blank Flutter App

VSCode Pro Tip

Hit ⌘ + ⇧ + p to open the command pallete, and search for Flutter: New Project to create a new project.

Step 2: Splash Screen

Building a static splash screen

You will need the static asset file.You can download it here.

See exact code changes made in this step here.

Dive Deeper

Step 3: Refactor Splash Screen

Refactoring the splash screen to use a widget

VSCode Pro Tip

Move your cursor to the widget you want to reafactor and hit ⌘ + . to open the Quick Fix/Reafactor menu. Select Extract Widget

Gif Showing How to use the Refactor Menu

See exact code changes made in this step here.

Step 4: Add an Icon

Adding an icon to the app

You will need the static asset file.You can download it here.

See exact code changes made in this step here.

Step 5: Files

Refactoring the splash screen to use a separate file

See exact code changes made in this step here.