Laporan Praktikum 2

Pendahuluan

Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membangun aplikasi lintas platform dengan satu basis kode (single codebase). Dengan Flutter, pengembang dapat membuat aplikasi yang dapat dijalankan pada sistem operasi Android, iOS, Web, hingga Desktop tanpa perlu menulis kode terpisah untuk setiap platform.

Flutter menggunakan bahasa pemrograman Dart sebagai bahasa utamanya. Selain itu, Flutter dilengkapi dengan fitur hot reload yang memungkinkan pengembang melihat perubahan kode secara instan tanpa harus menjalankan ulang aplikasi.

Selain performanya yang cepat, Flutter juga memiliki koleksi widget yang sangat lengkap, mulai dari widget dasar seperti Text, Container, dan Button, hingga widget kompleks yang dapat disesuaikan sesuai kebutuhan.

Pastikan perangkat yang digunakan telah memenuhi syarat berikut :

• Sudah menginstall git
• Sudah menginstall Android Studio
• Sudah menginstall Visual Studio Code (VS Code)
• Sudah menginstall Flutter SDK
• Sudah menginstall Dart SDK
• Sudah memasukkan Flutter dan Dart ke dalam PATH

Mengecek Instalasi Flutter

Buka terminal atau cmd, kemudian ketikkan perintah flutter doctor.

Membuat Proyek Flutter

Ketikkan perintah flutter create nama_proyek untuk membuat proyek baru.

Menjalankan Proyek Flutter

Masuk ke directory proyek kemudian jalankan perintah flutter run.

Dasar Dasar Flutter

Struktur Proyek Flutter

Folder lib/ digunakan untuk menyimpan seluruh kode Dart. Folder android/ dan ios/ digunakan untuk konfigurasi platform.

Stateless dan Stateful Widget

Stateless Widget

Stateless Widget adalah widget yang tidak memiliki state atau data yang dapat berubah.

Stateful Widget

Stateful Widget adalah widget yang memiliki state atau data yang dapat berubah.

Contoh Stateful Widget

import 'package:flutter/material.dart';

void main() {
  runApp(const MyStatefull());
}

Output:

Contoh Stateless Widget

import 'package:flutter/material.dart';

void main() {
  runApp(const MyStateless());
}

Output:

Basic Widget Flutter

1. Text

Widget Text digunakan untuk menampilkan teks pada layar.

Text(
  "Hai i am Text Widget"
)

2. Container

Container digunakan untuk mengatur tata letak dan style widget.

Container(
  width: 200,
  height: 100,
)

3. Elevated Button

Elevated Button digunakan sebagai tombol interaktif.

ElevatedButton(
  onPressed: () {},
  child: Text("Button"),
)

4. Icon

Icon digunakan untuk menampilkan simbol atau ikon.

Icon(
  Icons.favorite,
)

5. Image

Image digunakan untuk menampilkan gambar.

Image.asset(
  'assets/images/example.png',
)

6. Circle Avatar

Circle Avatar digunakan untuk menampilkan gambar atau teks berbentuk lingkaran.

CircleAvatar(
  radius: 50,
)

Latihan Tugas

1. Widget Vertical dan Horizontal

Membuat tampilan widget secara vertical dan horizontal menggunakan basic widget Flutter.

2. Profil Mahasiswa

Membuat tampilan profile menggunakan seluruh basic widget Flutter.

Jika tombol like ditekan, maka jumlah like akan bertambah.

Kesimpulan

Flutter merupakan framework modern yang mempermudah pengembangan aplikasi lintas platform dengan satu basis kode.

Dalam Flutter terdapat dua jenis widget utama yaitu Stateless Widget dan Stateful Widget yang digunakan sesuai kebutuhan aplikasi.

Basic widget seperti Text, Container, Elevated Button, Icon, Image, dan Circle Avatar menjadi dasar dalam membangun antarmuka aplikasi Flutter.