Get Started to Flutter Application

Prequisite

Have you imagine you can build your first mobile app that can run on two Operating System types (Android and iOS) with one time code? or maybe create web applications that have a native look and feel on both Android and iOS device? Flutter can do that for you.

Based on website Flutter Dev, Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase. Its natively use Dart language as original programming language.

The Basic

Just like other Native mobile programming, Flutter is still using layout as their User Interface but we call flutter user interface as a Widget.

Standard widgets

• Container: Adds padding, margins, borders, background color, or other decorations to a widget.

• GridView: Lays widgets out as a scrollable grid.

• ListView: Lays widgets out as a scrollable list.

• Stack: Overlaps a widget on top of another.

Material widgets

• Card: Organizes related info into a box with rounded corners and a drop shadow.

• ListTile: Organizes up to 3 lines of text, and optional leading and trailing icons, into a row.

There're something you need to know before you build your first flutter app:

1. AppBar
   A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.

2. Column
   A widget that displays its children in a vertical array.

3. Row
   A widget that displays its children in a horizontal array.

4. Container
   A convenience widget that combines common painting, positioning, and sizing widgets.

5. Scaffold
   Implements the basic Material Design visual layout structure. We can call it a skeleton/frame to visual structure

Project Structure

lib/ - just as pub (Dart’s package manager), all the code will be here

pubspec.yml - stores a list of packages that are required to run the application, just like package.json does it. You should remember that in Flutter projects you cannot use pub directly, but instead, you will use the Flutter command: flutter pub get <package_name>

test/ - I’m sure you know what this is about. Right? You can run them via flutter test

iOS/ & android/ - the code specific for each platform, including app icons and settings where you set what permissions you’ll need for your application (like access to location, Bluetooth).

For the example of your first flutter app, I attach my GitHub links below.

My Github Project