How To Create Your First Flutter App

·

3 min read

Featured on daily.dev
How To Create Your First Flutter App

Introduction

Flutter is an open-source and free framework for creating a mobile application with one body of code and deploy on the web, iOS, and android. It is developed by Google. Dart Programming Language is used in Flutter.

After hearing a lot of flutter from the social media and other blogging sites about the booming Flutter technology, now you yourself want to learn this. Then, you are at the perfect place, here you will be setting up your first flutter app.

The average annual pay for a Flutter Developer is around $97,446 a year . Just in case you need a simple salary calculator, that works out to be approximately $46.85 an hour. This is the equivalent of $1,874/week or $8,120/month. Quite Interesting !!

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

  • Chrome OS

VS Code extensions

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

1.png

Hello World: Your first app

After installation, Flutter has a custom Counter 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.

2.png

In the terminal, you can do this:

   > flutter create hello_world  
   > cd hello_world 

Both options will generate a Flutter project for you to begin

Inside the created project, are the following directories.

Screenshot from 2022-01-18 16-45-26.png

  • 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.

Run Your first app

In terminal, type flutter devices to view the usb devices connected that can be used for debugging.
Run flutter run to run app on the debug device. Or you can go to Run -> Start debugging to run app.

  > flutter devices  
  > flutter run  

11.png

Popular packages

Packages for Flutter can be found on 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. When you put the cursor on a widget, the yellow lightbulb appears to the left. Click it or press Ctrl + Full Stop (.) and the pop-up window appears.

3.png

Keystrokes

VS Code IDE does some key input detection like type stf or stl in the ide to auto-import all the code necessary to write a stateful or stateless widget.

4.png

13.png

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.

From this:

6.png

To this:

7.png