DEV Community

Pere Sola
Pere Sola

Posted on • Updated on

[wip] Learning Flutter & Dart

I took the course about Flutter in Frontend masters by Maximiliano Firtman and it was amazing. As I usually do, there are some stuff that I will need to remember, here it goes.

Dart

  • By Google. For FE apps, Angular Dart and Flutter. Dart 2. Compiles to native, Intermediate Language and JS. dartpad.dev

Flutter

Create a Flutter project in VS Code
  • Ctrl + Shift + P and select Flutter: New Project
  • Application template
  • Select folder or create one.
  • Name the project
  • It will take some time to create the project
Run project in localhost
  • Select platform

Image description

Image description

Image description

  • Run debugger or press F5

Image description

  • The app is now ready in a localhost:

Image description

Images
  • You can create an assets or images folder in the root of the project. And you need to add them in the pubspec.yaml file.
  • Scroll until To add assets to your application, add an assets section, like this:.
  • Un-comments assets: line and then you can add images one by one or just write images/. After that, images will be "spread" to all folders and versions of your app.
  • So you should have:
assets:
  - images/
Enter fullscreen mode Exit fullscreen mode
Make http requests
  • Go to pubspec.yaml file and look for dependencies:. There is flutter: so underneath we type http: (no version so we get the latest one).
Build for Android
  • We need to provide icons in Android studio.
  • Open the android subfolder of your project in Android studio. In mipmap folder there is a subfolder called ic_launcher. By default is the flutter logo.
  • Right click on mipmap > New > Image Asset.

Image description

  • In path select the image file and adjust as necessary.
  • Now we are ready to build the app, you can go back to VS Code and run flutter build appbundle or flutter build apk in the CLI.
Notable links shared in the course

Notable links I learnt on the way

Top comments (0)