Abraham Williams

Posted on Dec 3, 2018 • Originally published at bendyworks.com

A month of Flutter: create the app

#flutter #tutorial

Originally published on bendyworks.com.

The start of any Flutter project involves installing the Flutter SDK and choosing an editor. I'll be using the Linux flavor of the SDK and Android Studio with the Flutter and Dart plugins installed.

Follow the linked instructions to install the Flutter SDK and set up the Android Emulator or iOS Simulator.

Once you have the SDKs installed run flutter doctor to make sure everything is installed correctly. "Connected device" might fail if you don't currently have the emulator running.

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.11.11, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[✓] Android Studio (version 3.2)
[✓] Connected device (1 available)

• No issues found!
~~~{% endraw %}

Now create the base app itself. {% raw %}`flutter create <name>`{% endraw %} is a handy command to do this.{% raw %}

~~~bash
$ flutter create birb
Creating project birb...
  # truncated...
  birb/.metadata (created)
  birb/.gitignore (created)
  birb/README.md (created)
Running "flutter packages get" in birb...                    1.2s
Wrote 64 files.

All done!
[✓] Flutter is fully installed. (Channel beta, v0.11.11, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices is fully installed. (Android SDK 28.0.3)
[✓] Android Studio is fully installed. (version 3.2)
[✓] Connected device is fully installed. (1 available)

In order to run your application, type:

  $ cd birb
  $ flutter run

Your application code is in birb/lib/main.dart.
~~~{% endraw %}

One change I'll make here is renaming the {% raw %}`birb` directory to `app`. In the future I plan on having the project as a [monorepo](https://hackernoon.com/one-vs-many-why-we-moved-from-multiple-git-repos-to-a-monorepo-and-how-we-set-it-up-f4abb0cfe469) and include Firebase Functions code in a sibling directory.

Make sure that `flutter test` passes.

~~~bash
$ flutter test
00:03 +1: All tests passed!
~~~

If you haven't already, set up a virtual device to run the app in. Alternatively you could connect a real device.

![Android Studio Virtual Device Configuration](https://thepracticaldev.s3.amazonaws.com/i/sdify7hp691wcf3uz1gw.png)

[Run the generated app](https://flutter.io/docs/get-started/test-drive) in the Android Emulator (or iOS Simulator) to make sure the app works. For this series I'll be using a Pixel 2 profile with the Play Store. The running app should look something like this:

![Screenshot of sample app running in Android Emulator](https://thepracticaldev.s3.amazonaws.com/i/2vgpmckmnl0ig8vh9wbf.png)

Tomorrow I'll [work on configuring continuous integration](https://github.com/abraham/birb/issues/2) to make sure tests are always passing.

## Code changes

- [#4 Create initial app](https://github.com/abraham/birb/pull/4)

Top comments (23)

Stargator • Dec 6 '18 • Edited

Hey @abraham ,

I'm having trouble getting started with flutter. I run flutter create foo, no issue.

I then go into foo and run flutter run, which gets the error listed below.

I would appreciate your help if possible and whenever you can.

flutter run
Launching lib/main.dart on Nexus 5 in debug mode...
Initializing gradle...                                       1.0s
Resolving dependencies...
* Error running Gradle:
ProcessException: Process "/Users/stargator/Workspace/foo/android/gradlew" exited abnormally:

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring root project 'android'.
> Could not resolve all artifacts for configuration ':classpath'.
   > Could not resolve com.android.tools.build:gradle:3.2.1.
     Required by:
         project :
      > Could not resolve com.android.tools.build:gradle:3.2.1.
         > Could not get resource 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.2.1/gradle-3.2.1.pom'.
            > Could not GET 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.2.1/gradle-3.2.1.pom'.
               > sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1s
  Command: /Users/stargator/Workspace/foo/android/gradlew app:properties


Please review your Gradle project setup in the android/ folder.

Abraham Williams • Dec 7 '18

What happens when you run flutter doctor?

Stargator • Dec 7 '18

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.13.1 17B48, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.0)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
[✓] Android Studio (version 3.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2018.3)
[✓] Connected device (1 available)

Stargator • Dec 7 '18

By the way, running on an emulator seems to work fine from the command line.

I'll have to try again (now that I am at home and not on my work's network) and see if I can run it on my Android device.

Stargator • Dec 7 '18

Gave it a try, seems like it has to do with my work's network blocking the dependencies for gradle

Abraham Williams • Dec 8 '18

Interesting. I'd recommend opening an issue with the Flutter team. That's something that flutter doctor should probably test for.

Trebuh • Dec 3 '18

Really nice introduction my friend. Flutter is one of my target frameworks to master in 2019. If you guys don't know yet - there is a Google Event 4/12 - developers.google.com/events/flutt... - probably worth seeing as they might announce some great features.

Abraham Williams • Dec 3 '18

Yep! I'm looking forward to it and will be at the local Google Developer Group viewing party.

Guney Ozsan • Dec 4 '18

Thanks for the introduction. Do you have any experience comparing Android studio and VS Code for Flutter?

I am a game developer with little experience with non-games. I am considering starting Flutter for my future non-game projects (getting out of my comfort zone for the first time). I'm considering VS Code for its light-weight, convenience and familiarity to me. But I wonder if Android studio worths switching and learning a new tool?

Curious because I'm a C# game developer working on Visual Studio 2017. VS 2017 supports C# so nicely that I can't think of any other IDE workflow for C#. Is it similar for Flutter, or doesn't matter much?

Gabriel Mayta • Dec 6 '18

I used Visual Studio Code with Flutter and It's works fine. I developed two apps, amazing.

Guney Ozsan • Dec 6 '18

Thank you. 2 apps is very promising.

Abraham Williams • Dec 4 '18

I've been an Atom user for the last several years with only a little VS Code experience. I know a lot of Atom users switched to Code so I suspect they are fairly similar.

Android Studio feels a lot heavier to use then Atom. Almost all the keyboard shortcuts I'm used to are different so I find that difficult. I think that the integration with flutter and the Android Emulator are not as good for Code.

Guney Ozsan • Dec 4 '18

Thanks for the insight. I am pretty used to working on a plugged device from game dev, I'll probably keep going like that. Anyway, Android Studio looks huge and scary to me:)

Abraham Williams • Dec 4 '18

It's got a lot of buttons and knobs but you can usually ignore most of it.

Deepu • Dec 4 '18 • Edited

Hey, just looking to learn Flutter soon. Thanks for this. Am so00 tempted to start a similar series besides you but will take 2 weeks to play with Dart first.

Your series will serve both as an inspiration and guide for my own series. Thanks.

Abraham Williams • Dec 4 '18

I think a similar series on learning Dart over two weeks would be very interesting too.

Abraham Williams • Dec 3 '18

At the top of this post there is some unintuitive UI to switch to the other posts in the series.

You can also look at the bottom of canonical page and that will automatically update with a list of all posts.

Gabriel Mayta • Dec 6 '18

I think that Flutter is the future of Mobile apps.

It's easy to learn.
From scratch you have components ready to use with Material Design and Cupertino.
The concept of components like React or Angular (Flutter called Widget) is awesome.
Easy to change the state of a widget

Great work Google!

Abraham Williams • Dec 7 '18

Yep, Flutter is pretty great so far. It's still pretty early stages to so I'm interested how it'll evolve.

Jose Ross Barredo • Jan 3 '19

Hey @abraham ,

My computer cant handle the stress over running Android Emulator that is prepackaged with Android Studio. After googling, i found this GenyMotion android emulator that is lightweight. Have you tried using this as an external emulator?