Teori Dasar
Flutter merupakan framework open-source yang dikembangkan oleh Google untuk membangun aplikasi mobile, web, dan desktop dengan satu basis kode (single codebase). Keunggulan utama Flutter adalah kemampuannya menghasilkan aplikasi yang dapat dijalankan di berbagai sistem operasi seperti Android dan iOS tanpa harus menulis kode terpisah.
Dalam Flutter, seluruh tampilan aplikasi dibangun mengunakan widget. Widget adalah komponen dasar yang mewakili setiap elemen antarmuka pengguna, seperti teks, tombol, gambar, dan tata letak. Widget di Flutter dibagi menjadi dua jenis, yaitu Stateless Widget dan Stateful Widget.
- Stateless Widget adalah widget yang bersifat statis, artinya tampilan tidak akan berubah meskipun ada interaksi dari pengguna. Contohnya adalah teks atau ikon yang hanya ditampilkan tanpa aksi.
- Stateful Widget adalah widget yang dinamis dan dapat berubah sesuai interaksi atau kondisi tertentu, misalnya tombol yang menampilkan angka yang terus bertambah saat ditekan.
Selain widget, Flutter juga menyediakan berbagai basic widget seperti Text, Container, ElevatedButton, Icon, dan Image yang memudahkan pengembang untuk merancang antarmuka dengan cepat dan fleksibel. Proses pengembangan menggunakan Flutter didukung oleh hot reload, yaitu fitur yang memungkinkan perubahan kode langsung terlihat pada aplikasi tanpa perlu menjalankan ulang proyek.
Stateless dan Stateful Widget
Stateless Widget
Stateless Widget merupakan widget yang data atau tampilannya tidak mengalami perubahan ketika sebuah state dijalankan, Widget ini bersifat statis atau tetap misalnya teks statis, logo aplikasi dll
Buat class baru pada directory lib dengan nama stateless.dart kemudian tambahkan kode program berikut.
import ‘package:flutter/material.dart’;
void main() {
runApp(const MyStateless());
}
class MyStateless extends StatelessWidget {
const MyStateless({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(“Stateless Widget”),
),
body: const Center(
child: Text(“ini body”),
),
),
);
}
}
Stateful Widget
Statefull Widget merupakan widget dinamis yang ketika sebuah state berubah maka tampilan UI juga berubah. contohnya ketika tombol diklik atau ditekan maka tombol berubah warna atau form input nilainya berubah
- MyStateFulWidget merupakan class widget yang bersifat tetap (immutable) dan tidak memiliki state
- _MyStateFulWidgetState kelas state yang memiliki properti yang dapat berubah (state) dan bertanggung jawab untuk membangun UI
Buat class baru pada directory lib dengan nama stateful.dart kemudian tambahkan kode program berikut.
import ‘package:flutter/material.dart’;
void main() {
runApp(const MyStatefull());
}
class MyStatefull extends StatefulWidget {
const MyStatefull({super.key});
@override
State<MyStatefull> createState() => _MyStatefullState();
}
class _MyStatefullState extends State<MyStatefull> {
int _kelipatan = 0;
void _kelipatanDua() {
setState(() {
_kelipatan += 2;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(“Statefull Widget”),
),
body: Center(
child: Container(
width: 100,
height: 100,
color: Colors.amber,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(“Kelipatan 2 : “),
Text(
‘$_kelipatan’,
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _kelipatanDua,
tooltip: “Kelipatan 2”,
child: const Icon(Icons.add),
),
),
);
}
}
Basic Widget
Basic widget adalah komponen dasar Flutter untuk membangun tampilan (UI). Semua elemen pada layar Flutter berupa widget, seperti teks, gambar, tombol, maupun tata letak.
Widget dasar yang paling sering digunakan antara lain:
- Text: menampilkan teks dengan properti seperti style, textAlign, maxLines, dan overflow.
- Container: mengatur tata letak, ukuran, warna, margin, padding, dan dekorasi.
- Row & Column: mengatur susunan secara horizontal atau vertikal.
- Image: menampilkan gambar dari aset lokal maupun URL.
- ElevatedButton: tombol dengan efek elevasi.
- Icon: menampilkan ikon bawaan atau kustom.
- Scaffold: menyediakan struktur halaman seperti AppBar, Body, dan FloatingActionButton.
Text Widget
Text digunakan untuk menampilkan tulisan di layar. Beberapa propertinya:
- data: isi teks yang ditampilkan.
- style: mengatur tampilan teks (ukuran, warna, tebal, miring).
- textAlign: mengatur perataan teks.
- maxLines: membatasi jumlah baris.
- overflow: mengatur perilaku teks berlebih (misalnya ellipsis).
import ‘package:flutter/material.dart’; - void main() {
- runApp(const MyStateless());
- }
- class MyStateless extends StatelessWidget {
- const MyStateless({super.key});
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- home: Scaffold(
- appBar: AppBar(
- title: const Text(“Stateless Widget”),
- ),
- body: const Center(
- child: Text(
- “Hai, I am Text Widget”,
- style: TextStyle(
- fontSize: 14.0,
- color: Colors.red,
- fontWeight: FontWeight.bold,
- fontStyle: FontStyle.italic,
- ),
- textAlign: TextAlign.center,
- ),
- ),
- ),
- );
- }
- }
Container
Container adalah widget fleksibel di Flutter yang berfungsi mengatur tata letak, ukuran, warna latar, jarak, dan dekorasi.
Beberapa properti penting:
- width: menentukan lebar.
- height: menentukan tinggi.
- color: memberi warna latar belakang.
- margin: jarak luar terhadap widget lain.
- padding: jarak dalam antara isi dengan tepi container.
- decoration: menambahkan efek dekoratif seperti border, radius, shadow, atau gradient.
codenya:
import ‘package:flutter/material.dart’;
void main() {
runApp(const MyStateless());
}
class MyStateless extends StatelessWidget {
const MyStateless({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(“Stateless Widget”),
),
body: const Center(
child: Text(
“Hai, I am Text Widget”,
style: TextStyle(
fontSize: 14.0,
color: Colors.red,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
),
textAlign: TextAlign.center,
),
),
),
);
}
}
ElevatedButton
ElevatedButton adalah widget Flutter untuk membuat tombol dengan efek bayangan (elevasi) sehingga terlihat interaktif.
Properti utama:
- onPressed: fungsi yang dijalankan saat tombol ditekan (jika null, tombol nonaktif).
- child: isi tombol, biasanya teks atau ikon.
- style: mengatur tampilan tombol seperti warna, bentuk, atau padding.
cosenya:
import ‘package:flutter/material.dart’;
void main() {
runApp(const MyStateless());
}
class MyStateless extends StatelessWidget {
const MyStateless({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(“Stateless Widget”),
),
body: Center(
child: ElevatedButton(
onPressed: () {
print(“tombol ditekan”);
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
padding: const EdgeInsets.all(20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
child: const Text(“Elevated Button”),
),
),
),
);
}
}
Icon
Icon merupakan widget yang digunakan untuk menampilkan icon, Flutter telah menyediakan set icon seperti Material Icons dari Google atau Cupertino Icons dari Apple
Properti Icon
- icon properti yang menerima objek IconData yang menentukan ikon yang akan ditampilkan, seperti Icons.home, Icons.favorite, dll.
- size properti yang digunakan untuk mengatur ukuran ikon.
- color properti yang digunakan untuk mengatur warna ikon.
contoh penggunaan properti pada widget Icon
import ‘package:flutter/material.dart’;
import ‘package:flutter/cupertino.dart’;
void main() {
runApp(const MyStateless());
}
class MyStateless extends StatelessWidget {
const MyStateless({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(“Stateless Widget”),
),
body: const Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.add,
color: Colors.amber,
size: 50.0,
),
SizedBox(width: 20), // jarak antar icon
Icon(
CupertinoIcons.add,
color: Colors.red,
size: 50.0,
),
],
),
),
),
);
}
}
Image
Image adalah widget untuk menampilkan gambar dari berbagai sumber, seperti aset lokal, URL (network), memori, atau file.
Properti penting:
- image: menentukan sumber gambar (misalnya AssetImage, NetworkImage).
- width: mengatur lebar gambar.
- height: mengatur tinggi gambar.
- fit: menyesuaikan skala gambar dalam ruang yang tersedia (cover, contain, fill, dll).
- alignment: mengatur posisi gambar dalam ruang (center, topLeft, bottomRight, dll).
Penggunaan widget Image:
import ‘package:flutter/material.dart’;
void main() {
runApp(const MyStateless());
}
class MyStateless extends StatelessWidget {
const MyStateless({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // hilangkan banner debug
home: Scaffold(
appBar: AppBar(
title: const Text(“Stateless Widget – Logo UNAND”),
centerTitle: true,
backgroundColor: Colors.green,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Gambar dari internet
Image.network(
“https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Logo_Unand.svg/600px-Logo_Unand.svg.png”,
width: 120,
height: 150,
fit: BoxFit.contain,
),
const SizedBox(height: 20),
// Gambar dari assets lokal
Image.asset(
“assets/images/logo.jpg”,
width: 120,
height: 150,
fit: BoxFit.contain,
),
],
),
),
),
);
}
}
Circle Avatar
CircleAvatar adalah widget yang digunakan untuk menampilkan gambar profil dalam bentuk lingkaran.
Properti CircleAvatar
- backgroundImage properti yang menerima objek ImageProvider yang menentukan sumber gambar latar belakang.
- radius properti yang digunakan untuk mengatur jari-jari lingkaran.
- child properti yang digunakan untuk menampilkan widget di atas lingkaran.
contoh penggunaan properti pada widget CircleAvatar
import ‘package:flutter/material.dart’;
void main() {
runApp(const MyStateless());
}
class MyStateless extends StatelessWidget {
const MyStateless({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // Hilangkan banner debug
home: Scaffold(
appBar: AppBar(
title: const Text(“Stateless Widget – CircleAvatar”),
centerTitle: true,
backgroundColor: Colors.green,
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
CircleAvatar(
radius: 30,
backgroundColor: Colors.green,
child: Text(
“IF”,
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
SizedBox(width: 10), // jarak antar avatar
CircleAvatar(
radius: 30,
backgroundColor: Colors.blue,
child: Icon(
Icons.person,
color: Colors.white,
size: 30,
),
),
],
),
),
),
);
}
}
import ‘package:flutter/material.dart’;
void main() {
runApp(const MyStateless());
}
class MyStateless extends StatelessWidget {
const MyStateless({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // Hilangkan banner debug
home: Scaffold(
appBar: AppBar(
title: const Text(“Stateless Widget – CircleAvatar”),
centerTitle: true,
backgroundColor: Colors.green,
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
CircleAvatar(
radius: 30,
backgroundColor: Colors.green,
child: Text(
“IF”,
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
SizedBox(width: 10), // jarak antar avatar
CircleAvatar(
radius: 30,
backgroundColor: Colors.blue,
child: Icon(
Icons.person,
color: Colors.white,
size: 30,
),
),
],
),
),
),
);
}
}
Tugas
Tampilan Widget
1. Buatlah tampilan widget secara vertical dan horizontal dengan menggunakan minimal 3 buah basic widget dalam 1 tampilan
import ‘package:flutter/material.dart’;
void main() {
runApp(const SoalSatuApp());
}
class SoalSatuApp extends StatelessWidget {
const SoalSatuApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text(“Soal 1 – Vertical & Horizontal”),
backgroundColor: Colors.blue,
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// ===== Column (Vertical) =====
const Text(
“Contoh Column (Vertical)”,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const Icon(Icons.star, color: Colors.orange, size: 40),
Container(
width: 100,
height: 40,
color: Colors.green,
child: const Center(
child: Text(“Box 1”, style: TextStyle(color: Colors.white)),
),
),
const SizedBox(height: 30),
// ===== Row (Horizontal) =====
const Text(
“Contoh Row (Horizontal)”,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 60,
height: 60,
color: Colors.red,
child: const Icon(Icons.home, color: Colors.white),
),
const SizedBox(width: 10),
Container(
width: 60,
height: 60,
color: Colors.blue,
child: const Icon(Icons.person, color: Colors.white),
),
const SizedBox(width: 10),
Container(
width: 60,
height: 60,
color: Colors.purple,
child: const Icon(Icons.settings, color: Colors.white),
),
],
),
],
),
),
),
);
}
}
2. Buatlah tampilan yang berisi informasi profile kalian (foto, nama, nim, Alamat, nomor handphone, jurusan) dengan mengimplementasikan seluruh basic widget yang ada pada modul praktikum ini
import ‘package:flutter/material.dart’;
void main() {
runApp(const MyProfileApp());
}
class MyProfileApp extends StatelessWidget {
const MyProfileApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // hilangkan label debug
home: Scaffold(
appBar: AppBar(
title: const Text(“Profil Mahasiswa”),
centerTitle: true,
backgroundColor: Colors.green,
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Foto profil menggunakan CircleAvatar
const CircleAvatar(
radius: 60,
backgroundImage: AssetImage(“assets/images/logo.jpg”), // ganti dengan foto kamu
),
const SizedBox(height: 20),
// Nama dan NIM
const Text(
“Reza Septian”,
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
const Text(
“NIM: 2311533008”,
style: TextStyle(fontSize: 16, color: Colors.grey),
),
const SizedBox(height: 20),
// Informasi lain dalam bentuk Row (horizontal)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.home, color: Colors.blue),
SizedBox(width: 10),
Text(“Alamat: Padang, Sumatera Barat”),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.phone, color: Colors.green),
SizedBox(width: 10),
Text(“Nomor HP: 0812-3456-7890”),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.school, color: Colors.red),
SizedBox(width: 10),
Text(“Jurusan: Informatika”),
],
),
],
),
),
),
);
}
}
