skip to Main Content
Tutorial Flutter #2 : Membuat Aplikasi Flutter Untuk Pemula

Tutorial Flutter #2 : Membuat Aplikasi Flutter untuk Pemula

Tutorial Flutter – Pada bagian ini, kita akan mempelajari dasar-dasar aplikasi Flutter dan cara membuat aplikasi sederhana Flutter di Android Studio. Pastikan kita sudah menginstall Flutter SDK, ini sudah dibahas pada artikel sebelumnya tentang “Tutorial Instalasi Flutter”.

1. Membuat Aplikasi Flutter

Langkah 1 ━ Buka Android Studio.

Langkah 2 ━ Buat Projek Flutter dengan klik File → New → New Flutter Project.

New Flutter Project

Langkah 3 ━ Berikutnya, pilih Aplikasi Flutter. Untuk ini, pilih Flutter Application → klik Next. 

Flutter Application

Langkah 4 ━ Konfigurasikan detail aplikasi seperti dibawah iniKonfigurasi

 

 

 

Langkah 5 ━ Berikutnya, klik tombol finish. Setelah mengklik tombol finish.

New project

Langkah 6 ━ Periksa struktur aplikasi proyek Flutter. Berikut komponen struktur aplikasi Flutter dan fungsinya:

struktur aplikasi proyek Flutter

  • .idea : sebagai tempat menyimpan konfigurasi untuk Android Studio.
  • .android : sebagai tempat menyimpan proyek Android lengkap dan digunakan ketika membuat aplikasi Flutter untuk Android.
  • .ios : sama dengan fungsi folder android, berguna sebagai penyimpan proyek namun untuk proyek Mac lengkap.
  • .lib : ini adalah folder penting, folder tempat untuk melakukan 99% pekerjaan proyek. Dalam folder ini, kita akan menemukan file Dart (main.dart) yang berisi kode aplikasi Flutter kita.
  • .test : pada folder ini berisi kode Dart, untuk melakukan pengujian otomatis saat membangun aplikasi.
  • .gitignore : file untuk mengontrol versi Git.
  • .metadata : digunakan untuk melacak properti proyek Flutter.
  • .packages : digunakan untuk membuat daftar dependensi untuk proyek Flutter.
  • flutter_demoapp.iml : file ini melakukan tugas internal, yang dikelola oleh Flutter SDK.
  • pubspec.yaml : file konfigurasi proyek yang banyak digunakan selama bekerja dengan proyek Flutter.
  • pubspec.lock: file yang dibuat secara otomatis berdasarkan file .yaml . Ini memegang pengaturan lebih detail tentang semua dependensi.
  • README.md: file yang dibuat secara otomatis yang menyimpan informasi tentang proyek. 

 

Langkah 7 ━ Buka file main.dart dan ganti kode pada file tersebut dengan kode berikut ini:

import ‘package:flutter/material.dart’;  

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

class MyApp extends StatelessWidget {  

  // This widget is the root of your application.  

  @override  

  Widget build(BuildContext context) {  

    return MaterialApp(  

      title: ‘Hello World Flutter Application’,  

      theme: ThemeData(  

        // This is the theme of your application.  

        primarySwatch: Colors.blue,  

      ),  

      home: MyHomePage(title: ‘Home page’),  

    );  

  }  

}  

class MyHomePage extends StatelessWidget {  

  MyHomePage({Key key, this.title}) : super(key: key);  

  // This widget is the home page of your application.  

  final String title; 

@override  

  Widget build(BuildContext context) {  

    return Scaffold(  

      appBar: AppBar(  

        title: Text(this.title),  

      ),  

      body: Center(  

        child: Text(‘Hello World’),  

      ),  

    );  

  }  

 

Pada percobaan ini terdapat tanda merah pada bagian MyHomePage({Key key, this.title}) : super(key: key); disini bisa diganti dengan:

class

 

 

Langkah 8 ━ Jalankan aplikasi. Untuk menjalankan ini, maka buka Run → Run ‘main.dart’. Setelah dijalankan, maka akan tampil output dari aplikasi.

android

2. Memahami kode-kode dart diatas:

Baris 1 mengimpor paket flutter, material .

impor

 


Baris 3
Ini adalah titik masuk dari aplikasi Flutter. Memanggil fungsi runApp dan meneruskannya sebagai objek kelas MyApp. Tujuan dari fungsi runApp adalah untuk melampirkan widget yang diberikan ke layar.

run app

Baris 5-17 Widget digunakan untuk membuat UI di dalam kerangka Flutter, StatelessWidget adalah widget. MyApp memperluas StatelessWidget dan mengganti build method. Tujuannya untuk membuat bagian dari UI aplikasi, disini menggunakan MaterialApp. Dan ini memiliki tiga properti: 

  • Title, Judul aplikasi
  • Theme, Tema widget
  • Home, UI bagian dalam aplikasi

Widget

Baris 19-38 MyHomePage mirip dengan MyApp, kecuali mengembalikan widget Scaffold. Widget ini berisi dua properti appBar dan body. AppBar adalah widget lain untuk merender header aplikasi, widget Center digunakan untuk memusatkan widget anak, dan Text adalah widget terakhir yang digunakan untuk menampilkan konten teks dan ditampilkan di tengah layar. 

MyHomePage

Referensi:

  1. https://www.tutorialspoint.com/flutter/flutter_creating_simple_application_in_android_studio.htm
  2. https://www.javatpoint.com/flutter-first-application

 

Penulis Artikel : Ichda Hayati (Webmaster – Xsis Mitra Utama)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top