Amazon.co.uk Widgets

This is the first part of a journey to build and publish a Flutter based app for the App Store and Google Play.

Contents

  1. Introduction
  2. Typography
  3. Permissive license and copyright
  4. Why are licenses important?
  5. The starter app
  6. The promise of Cross platform apps
  7. Development Pre-requisites, installing Flutter, Android Studio, Xcode and more
  8. Checking your Flutter environment
  9. Run your app on a simulator or real Apple or Google Android devices

Introduction

Follow along to learn everything you need to do to set up your environment, build a Flutter based app, put it into source control and publish it to the App Store and Google Play. Along the way you will need some third party tools and services and while the ones used in the examples will hopefully the simplest set of tools you can feel free to make other choices. We have published hundreds of apps for the App Store and Google Play, and will cover wider topics regarding publication and continuing distribution of your app. The first of those is about licenses and it is in this first article. Don't skip it!

Typography

This site is written for Joomla! 4.0. Joomla 4.0 uses Bootstrap 5.0, we also use prism.js to make code listings easy to see.

If the text is inside the kbd tag it is an indication that it is a command line for the terminal. If the text is inside the code tag it is an indication that it is a code term.

Bigger sections of code, like this minimal main.dart source code for the project are wrapped in code tags with a class of language-dart like this:

//
//      Copyright 2021 Multizone Ltd. All rights reserved.
//
//  Redistribution and use in source and binary forms, with or without modification,
//  are permitted provided that the following conditions are met:
//
//    * Redistributions of source code must retain the above copyright
//      notice, this list of conditions and the following disclaimer.
//    * Redistributions in binary form must reproduce the above
//      copyright notice, this list of conditions and the following
//      disclaimer in the documentation and/or other materials provided
//      with the distribution.
//    * Neither the name of Multizone Ltd. nor the names of its
//      contributors may be used to endorse or promote products derived
//      from this software without specific prior written permission.
//
//  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
//  ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
//  WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
//  DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
//  ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
//  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
//  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
//  ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
//  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
//  SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

import 'package:flutter/material.dart';
import 'app.dart';
void main() => runApp(App());


Permissive license and copyright BSD 3-Clause "New" or "Revised" License

As you can see from the code above theres a license for all code written for this project. The license is the same as the one used by "The Flutter Authors". This License, the BSD 3-Clause "New" or "Revised" License is a permissive license with a clause that prohibits others from using the name of the project or its contributors to promote derived products without written consent.

This project uses the same license. You can use anything you find here, just dont use the name of this site or my company. I mean, why would you? You're not me.

Copyright applies by default to creative work and this is why licenses are needed. This is explained well by the team at github.

The Legal Side of Open Source
Everything you've ever wondered about the legal side of open source, and a few things you didn't.

"Open source is an unusual circumstance, however, because the author expects that others will use, modify, and share the work. But because the legal default is still exclusive copyright, you need a license that explicitly states these permissions. If you don’t apply an open source license, everybody who contributes to your project also becomes an exclusive copyright holder of their work. That means nobody can use, copy, distribute, or modify their contributions – and that “nobody” includes you. Finally, your project may have dependencies with license requirements that you weren’t aware of. Your project’s community, or your employer’s policies, may also require your project to use specific open source licenses."

opensource.guide/legal/

Why are licenses important?

Licenses become important if you publish your work, because they give permission, state limitations, warranty and liability, and attach conditions. The chief condition here is to display the license in your work.

If you encounter licenses in the sample code you use, you should leave them in place. There is also a widget to display licenses for all the plugins and widgets used in your app. In a corporate setting you may need to review the licenses used in your project with your legal department.

Note: This is not legal advice.

The Flutter license

Copyright 2014 The Flutter Authors. All rights reserved.

Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:

    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
      copyright notice, this list of conditions and the following
      disclaimer in the documentation and/or other materials provided
      with the distribution.
    * Neither the name of Google Inc. nor the names of its
      contributors may be used to endorse or promote products derived
      from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Individual codelab source file licenses

 // Copyright 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

Starter app "If you wish to make an apple pie from scratch, you must first invent the universe." — Carl Sagan

First things first lets set up a computer with all the tools and technology needed to build the Starter app for Flutter. Doing this checks the environment is properly set up and serves as a convenient starting point for your application. Here it what it looks like once all the tools are installed and you build it for iOS and Android.

Flutter Material Components iOS Starter App 001   Flutter Material Components Android Starter App 001

The promise of cross-platform apps One source to rule them all!

Take a moment to marvel at those screenshots. On the left is iOS, a Simulator of the Apple iPhone SE 2nd Generation running iOS 13, on the right is Android, actually a physical Google Nexus 6p running Android 8.1. Theres an appBar elevated from the rest of the content, with a background colour, a Title centred on iOS and left aligned on Android per guidelines on platform variance. The text is nicely centred and theres a floating action button (FAB) at bottom right but nicely padded away from the screen edge and floating above the content. These are completely different operating systems and completely different resolution devices. This is the power that Flutter has. One set of code in one project to manage cross platform development with much of this heavy lifting done for you.

Development Pre-requisites

You'll need to get these out of the way first. You will need a recent and decent Apple macOS based computer if you want to build for iOS and submit apps to the App Store. Other computer operating systems are supported by Android Studio and other tools for Flutter development for Android too, but it has to be a macOS based computer to build for iOS because Apple developer tool Xcode is needed and this is only licensed for use on macOS. Even if you do decide for example to use a Chromebook which is very capable indeed of supporting Android Studio and Android app development, you will I hope want to build and run and test on iOS too. It is a key benefit of Flutter to be able to simultaneously ship on both platforms so keeping them both alive in the development and test cycle is crucial.

  1. Download, install and set up the Flutter SDK
  2. Install Android Studio and the Flutter and Dart plugins
  3. Install Xcode for macOS. Android Studio needs to be able to use the Xcode command line tools to build iOS apps, and you will need to make some adjustments to the iOS part of the Flutter project using Xcode.
  4. Prepare an Android and an iOS device and/or emulators for use as development targets. Real devices are faster and provide more realistic experience although the emulators are good they need a powerful computer to run effectively.

Publication Pre-requisites

  1. To publish your app in Google Play you will need to Sign in with your Google Account, Accept the terms, Pay the one time Registration Fee, and complete your Account details
  2. To publish your app in the App Store you will need to Enroll in Apple Developer Program with an Apple ID and pay for the membership year. You will need an Apple ID with two-factor authentication turned on. You’ll need to provide basic personal information, including your legal name and address. You'll need to provide further business information if you enroll on behalf of a business and it really is worth doing this now as it will eventually cause you problems if you do not. It takes some time to complete the process and check your business information so get this done early or you will delay your app launch. Don't skip this step if you are planning to publish your app. Get started early.

Optional continuous delivery pre-requisites

  1. Install Fastlane following step one of the instructions for Continuous delivery with Flutter. You'll need Fastlane to handle all the tedious tasks, like generating screenshots, dealing with code signing, and releasing your application. The rest of the steps in Fastlane setup will need to be completed once you create the Flutter project itself.
  2. Optionally, sign up for up a code repository like GitHub or Assembla for your source code.

Checking your Flutter environment

Once you have completed the development pre-requisites above you can use the flutter doctor command to check your environment is set up correctly and flutter upgrade to check you have the latest release

Run flutter upgrade and the output should confirm flutter is installed

% flutter upgrade
Flutter is already up to date on channel stable
Flutter 2.0.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c5a4b4029c (23 hours ago) • 2021-03-04 09:47:48 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0

Run flutter doctor and the output should confirm your environment is set up.

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.1, on macOS 11.2.2 20D80 darwin-x64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] Connected device (3 available)

• No issues found!

You'll need to work through any issues reported until Flutter doctor reports that there are no issues. Once there are no more issues you're ready to create a Flutter project.

Create the app project

When you originally create the project in Android Studio or using the flutter create command, it will create an application ID and package name which used by the android part of the project and will initially be the same. They are in fact independent of each other. You can change the package name (in pubspec.yaml, which is your code namespace, and it will not affect the application ID in app/src/main/AndroidManifest.xml. The application ID is used by Google Play and must not be changed once your app binary has been published to any track in Google Play. You can read more about this at developer.android.com. You should seriously consider your app, application ID and related naming for publication now. Changing it is possible later but is not exactly trivial.

flutter create nameofyourproject and the output should be similar to this (more lines though).


flutter create nameofyourproject
Creating project nameofyourproject...
  ...Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings (created)
  nameofyourproject/test/widget_test.dart (created)
  nameofyourproject/nameofyourproject.iml (created)
  nameofyourproject/.gitignore (created)
  nameofyourproject/.metadata (created)
  nameofyourproject/android/app/src/profile/AndroidManifest.xml (created)
  nameofyourproject/pubspec.yaml (created)
  nameofyourproject/README.md (created)
  ...
  nameofyourproject/ios/Runner.xcodeproj/project.pbxproj (created)
  nameofyourproject/lib/main.dart (created)
  ...
Running "flutter pub get" in nameofyourproject...                   1.7s
Wrote 72 files.

All done!


Check your devices

It is easier to use an Android device or the iOS simulator here as we dont have any certificates set up for development on real iOS devices. To use the iOS simulator launch using open -a simulator and it will appear as a run target in Android Studio. Check you have a device connected successfully and then you can run your app for the first time.

Type flutter devices and the output should be similar to this


2 connected devices:

Nexus 6P • android-arm64 iPhone SE (2nd generation) • ios

Run the app project on one device

In the terminal change into the project folder. cd nameofyourproject

flutter run or in Android Studio press ^R or select the run button from the toolbar.
Output should be similar to this (more lines though)

Running Gradle task 'assembleDebug'... Done                        39.3s
✓ Built build/app/outputs/apk/debug/app-debug.apk.
Installing build/app/outputs/apk/app.apk...                        13.2s


Run the app project on more than one device

Type flutter run -d all
Output should be similar to this

Launching lib/main.dart on Nexus 6P in debug mode...
Launching lib/main.dart on iPhone SE (2nd generation) in debug mode...
...
✓ Built build/app/outputs/apk/debug/app-debug.apk. Xcode build done. 77.5s Syncing files to device Nexus 6P... 302ms Syncing files to device iPhone SE (2nd generation)... 132ms ...

Starter app With Hot Reload!

Great! The starter app should now be running on your devices. Make and save a change to the text in main.dart and watch it reload. Make the change obvious and look quickly because it is fast! A key benefit of Flutter is this ability to hot reload. It makes the iteration of development changes easier to see on the device instantly.


v>