DevOps Blog

How To Create Your First Flutter App

4 minute read
Jonathan Johnson

Flutter has quickly entered the app development world. Launched by Google in October 2018, Flutter now has a reported 500,000+ users a month. It’s good for quick app development, prototyping new features, A/B testing new features, or even building an all-out application.

Flutter is a cross-platform development tool that lets a dev write one body of code and deploy on the web, iOS, and android. Desktop development has also recently been added, with a Flutter for Desktop Alpha release.

Getting started is easy, especially with some extra tips and tricks.

Installing Flutter

The Flutter install guide is very helpful, with detailed instructions on how to get Flutter installed on each OS:

  • Mac
  • Windows
  • Linux

VS Code extensions

VS Code is a great IDE for any programming language and Flutter is no exception. Specifically, the Flutter extension to VS Code gives a batch of flutter commands that can be run from VS Code. Normally, they’re run from the command line.

Flutter has some great extensions on the VS Code marketplace that speed up some of the development process. A few notable extensions are:

The last one is added for fun. It helps see through the enormous amount of parenthesis and brackets created by nesting widget inside of widget.

I tend to use the Flutter: Select Device for switching between debugging the app on iOS, Android, and Web.

Flutter App

Hello World: Your first app

After installation, Flutter has a custom Hello World app that is easy to set up. Any new project created begins with this starter app.

In VS Code, creating a new application is easy. Access the menu with Command + Shift + P. Select Flutter: New Project.

Flutter First App

In the terminal, you can do this:

flutter create myapp
cd myapp
flutter devices
flutter run

Both options will generate a Flutter project for you to begin.

Demo Page

Inside the created project, are the following directories.

Project Direction

  • android controls all your android deployment instructions.
  • ios controls your iOS deployment instructions.
  • pubspec.yaml stores all your app dependencies, assets folders, font instructions, etc.
  • lib is where the bulk of the application files are written and stored.

Popular packages

Packages for Flutter can be found on https://pub.dev/. Common packages you’ll likely use:

Flutter shortcuts, tips & tricks

VS Code and Android Studio both offer helpful shortcuts that speed up your Flutter development.

Lightbulb icon

The lightbulb icon will appear while you’re developing, and it makes adding or removing widgets so much easier. It might not look like a lot now, but this tool is a huge timesaver, keeping you from having to copy and paste bodies of code.

When you put the cursor on a widget, the yellow lightbulb appears to the left. Click it and the pop-up window appears. Its options will add common widgets to the selected widget or remove or extract the present widget.

Lightbulb

Keystrokes

Code is automatically written with the lightbulb, and the VS Code IDE also does some key input detection.

Type stf or stl in the ide to auto-import all the code necessary to write a stateful or stateless widget. When the shortcut is selected, all the code appears with 5 cursors to name your new widget.

Keystroke

Keystrokes1

Hotkey

Another helpful hotkey is: alt + shift + f. This shortcut automatically formats the code to the Flutter standard. It only works if there are no errors found in the code.

The hotkey will turn a batch of code like this:

Hotkey

And turn it into this:

Hotkey result

Additional resources

For more articles like this, explore these resources:

Free Download: Enterprise DevOps Skills Report

Human skills like collaboration and creativity are just as vital for DevOps success as technical expertise. This DevOps Institute report explores current upskilling trends, best practices, and business impact as organizations around the world make upskilling a top priority.


These postings are my own and do not necessarily represent BMC's position, strategies, or opinion.

See an error or have a suggestion? Please let us know by emailing blogs@bmc.com.

BMC Brings the A-Game

BMC works with 86% of the Forbes Global 50 and customers and partners around the world to create their future. With our history of innovation, industry-leading automation, operations, and service management solutions, combined with unmatched flexibility, we help organizations free up time and space to become an Autonomous Digital Enterprise that conquers the opportunities ahead.
Learn more about BMC ›

About the author

Jonathan Johnson

Jonathan Johnson is a tech writer who integrates life and technology. Supports increasing people's degrees of freedom.