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:
- Flutter
- Dart
- Bracket Pair Colorizer 2
I tend to use the Flutter: Select Device for switching between debugging the app on iOS, Android, and Web.
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.
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.
- 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
Popular packages
Packages for Flutter can be found on pub.dev. Common packages you’ll likely use:
- Provider for state management
- Charts_Flutter for graphing
- Spinkit for create loading widgets
- Cloud Firestore for working with Google’s Cloud Firestore API
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.
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.
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:
To this: