Tutorial Flutter #3 – Membuat Aplikasi Pertama Anda

Rumahcoding.co.id – Pada kesempatan kali ini tutorial Flutter #3 akan membahas Cara Membuat Aplikasi Pertama Anda di Flutter. Setelah kita mempelajari structure project Flutter, maka akan sangat mudah ketika kita ingin membangun aplikasi menggunakan Flutter.

Sebelumnya, kita perlu tahu apa saja bagian-bagian yang bisa dicustom sesuai dengan project yang akan dibuat, yaitu:

1. Header, yaitu bagian yang menangani semisal informasi aplikasi, title maupun icon.
2. Body, yaitu bagian yang berisi content aplikasi yang akan dibuat.
3. Footer, bagian optional yang bisa dicustom semisal list menu, floating action button, dan lain-lain.

Kurang lebih, desainnya seperti ini:

Ketiga bagian di atas dibungkus dengan Class Scafold. Class Scafold ini yang nantinya akan membentuk struktur tata letak dasar mulai dari header, body sampai footer.

Sekarang kita akan coba menerapkan beberapa code yang bisa diletakan pada masing-masing bagian. Mari kita mulai.

Bagian Header

Pada bagian header kita akan coba menerapkan code di bawah ini:

// Header
appBar: AppBar(
  title: Text("Flutter Demo"),
),

Pada bagian body kita akan menerapkan code berikut:

 // Body
body: Center( 
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text("Hello World",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
      ),
    ],
  ),
), 

Terakhir pada bagian footer kita akan menerapkan code berikut:

 // Bottom
floatingActionButton: new FloatingActionButton( 
  child: Icon(Icons.add),
  onPressed: () => print("Add"),
), 

Berikut code selengkapnya:

 import 'package:flutter/material.dart';

class App extends StatelessWidget{

  @override 

  Widget build(BuildContext context){

    return Scaffold( 
// Header
appBar: AppBar(
  title: Text("Flutter Demo"),
),
      // Body
      body: Center( 
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text("Hello World",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
            ),
          ],
        ),
      ),
      // Bottom
      floatingActionButton: new FloatingActionButton( 
        child: Icon(Icons.add),
        onPressed: () => print("Add"),
      ),
    );
  }
} 

Panggil class App dan simpan pada main.dart

home: App(), // class yang akan dijalankan

Jalankan aplikasi tersebut. Jika berhasil akan tampil seperti ini:

Sampai di sini, kita sudah berhasil membuat aplikasi pertama menggunakan Flutter. Anda bisa mengcustom code di atas sesuai dengan kebutuhan project. Selamat mencoba dan jangan lupa bahwa #AnyOneCanCode