Kerangka Dasar File main.dart

File main.dart adalah file utama dari aplikasi yang di develop menggunakan Flutter SDK. File ini dibuat ketika project digenerate menggunakan perintah Flutter: New Project pada Visual Studio Code Command Pallet.

Mari kita buat aplikasi baru. Pada tutorial menggunakan nama hello_flutter. Lalu hapus semua isi dari main.dart, lalu tambahkan code berikut dan coba Run Without Debugging (Ctrl F5).

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext ctx){
    return MaterialApp(home: Text('Hello'),);
  }
}

Seperti sudah dibahas sebelumnya, aplikasi flutter adalah aplikasi berbasis widget. Library atau package widget yang digunakan pada code diatas adalah material.dart, untuk menggunakan library pihak ketiga atau yang kita develop sendiri, digunakan perintah import.

import 'package:flutter/material.dart';

Fungsi main() adalah fungsi khusus dari dart. Ketika aplikasi dijalankan, maka fungsi ini yang pertama kali dijalankan. Pada contoh, fungsi main hanya menjalankan class MyApp.

Perhatian: Alternative penulisan menggunakan fungsi arrow jika hanya ada 1 baris perintah saja.

void main(){
  runApp(MyApp());
}

// alternative penulisan

void main() => runApp(MyApp());

Untuk membuat widget, kita harus membuat class. Pada code kita deklarasikan class MyApp yang di extends dari class StatelessWidget dari material.dart package. Untuk documentasi lengkap, click StatelessWIdget documentation.

Perhatian: konvensi penulisan nama class menggunakan pascal case. Contoh class hitungakar ditulis dengan pascal case adalah HitungAkar.

StatelessWidget memiliki method yang harus kita definisikan, yaitu method build dengan argument BuildContext. Untuk dokumentasi lengkap, click build method documentation.

build function akan mengembalikan widget Text yang berisi ‘Hello Flutter’ menggunakan object MaterialApp dengan route home. Route adalah abstrak dari screen atau page pada sebuah aplikasi.

MaterialApp adalah widget yang mudah digunakan untuk membungkus sejumlah widget yang biasanya diperlukan untuk aplikasi material design. Untuk dokumentasi lengkap, click MaterialApp documentation.

class MyApp extends StatelessWidget {
  Widget build(BuildContext ctx){
    return MaterialApp(home: Text('Hello Flutter'),);
  }
}

Tutorial ini baru membahas kerangka dasar dari file main.dart. Pada tutorial selanjutnya akan dikembangkan agar tampilan aplikasi lebih menarik.