Nama : Nia Ramadhani
Nim : 2311531006
aplikasi mobile
PENDAHULUAN
Perkembangan teknologi mobile yang semakin pesat menuntut para pengembang perangkat lunak untuk menciptakan aplikasi yang tidak hanya fungsional tetapi juga memiliki antarmuka yang menarik, interaktif, dan dapat berjalan lintas platform dengan efisien. Salah satu solusi modern untuk memenuhi kebutuhan tersebut adalah Flutter, sebuah framework UI open-source yang dikembangkan oleh Google. Flutter memungkinkan pengembangan aplikasi untuk Android, iOS, web, dan desktop hanya dengan satu basis kode (single codebase), sehingga lebih hemat waktu dan biaya dalam proses pengembangan serta pemeliharaan aplikasi.
Flutter menggunakan bahasa pemrograman Dart, yang dirancang untuk membangun antarmuka pengguna yang cepat dan responsif. Salah satu kekuatan utama Flutter terletak pada pendekatan deklaratif dalam membangun UI, yang berpusat pada konsep widget. Setiap elemen dalam Flutter, baik itu teks, tombol, gambar, maupun layout, dibangun dari widget. Oleh karena itu, memahami konsep widget merupakan langkah awal yang sangat krusial bagi siapa pun yang ingin mengembangkan aplikasi menggunakan Flutter.
Terdapat dua jenis utama widget di Flutter, yaitu Stateless Widget dan Stateful Widget. Stateless Widget digunakan ketika tampilan UI tidak tergantung pada perubahan data, sedangkan Stateful Widget digunakan ketika UI perlu merespons perubahan data secara dinamis. Perbedaan mendasar antara keduanya sangat berpengaruh dalam desain dan arsitektur aplikasi, terutama dalam hal pengelolaan state atau kondisi aplikasi.
Selain memahami konsep dasar widget, pengembang juga perlu menguasai penggunaan basic widgets seperti Text, Image, Row, Column, Container, Button, dan lain sebagainya. Widget-widget dasar ini menjadi fondasi dalam membangun struktur dan tampilan antarmuka yang lebih kompleks.
Namun, sebelum mulai membangun aplikasi Flutter, langkah awal yang tidak kalah penting adalah melakukan setup environment Flutter pada perangkat pengembang. Proses ini meliputi instalasi Flutter SDK, pengaturan PATH environment, instalasi editor seperti Visual Studio Code atau Android Studio, serta pengaturan emulator atau perangkat fisik sebagai media pengujian aplikasi. Setup yang benar dan optimal akan mempermudah proses development, debugging, serta deployment aplikasi.
Dengan latar belakang tersebut, pembahasan ini akan difokuskan pada bagaimana melakukan setup Flutter untuk pengembangan, memahami perbedaan Stateless dan Stateful Widget, serta mengenal berbagai basic widgets yang digunakan dalam membangun antarmuka pengguna aplikasi.
Tujuan Pratikum
1.Menjelaskan langkah-langkah dalam melakukan setup lingkungan pengembangan Flutter pada komputer.
2.Memahami perbedaan antara Stateless Widget dan Stateful Widget, serta kapan penggunaannya tepat dalam pengembangan aplikasi.
3.Mengenal dan mempraktikkan penggunaan basic widgets untuk membangun tampilan dasar aplikasi Flutter.
4.Memberikan pemahaman praktis tentang struktur dasar aplikasi Flutter dan cara membangun antarmuka pengguna secara efisien.
LANGKAH PENGERJAAN
Install GIT dan konfigurasi sesuai wizard instalasi
Install Android Studio — agar bisa menggunakan Android SDK Manager & emulator.
Install Visual Studio Code dan tambahkan ekstensi Flutter.
Download / extract SDK Flutter, lalu tambahkan path SDK ke environment variables.
Periksa instalasi Flutter
Buka terminal / command prompt, jalankan perintah flutter doctor.
Jika semua dependensi terpasang dengan benar, tampilan output akan menunjukkan status “all good” atau menunjukkan apa yang masih kurang.
Buat proyek Flutter baru
Ketikkan flutter create hai di terminal untuk membuat proyek baru bernama “hai”.
Setelah itu masuk ke folder proyek dengan cd hai.
Jalankan proyek
Jalankan flutter run untuk menjalankan proyek ke emulator / perangkat fisik.
Pilih target perangkat bila diminta.
Buka dan kelola proyek di VS Code
Buka proyek “hai” di Visual Studio Code.
Struktur folder proyek
ios → konfigurasi iOS (Info.plist, dll)
test → untuk file testing
pubspec.yaml → file konfigurasi proyek
README.md → deskripsi & petunjuk
gitignore → atur file/folder yang diabaikan oleh Git
Membuat widget stateless
Buat file baru di folder lib bernama stateless.dart.
Tulis kode widget stateless sesuai contoh.
Jalankan / lihat hasilnya.
Membuat widget stateful
Buat file statefull.dart (biasanya stateful.dart) di folder lib.
Tulis kode widget stateful sesuai contoh — widget yang bisa berubah ketika state berubah (misal ketika tombol ditekan, input berubah, dsb).
Jalankan / lihat hasilnya.
Menggunakan widget dasar (basic widget)
Gunakan widget seperti Text, Container, ElevatedButton, Icon, Image, CircleAvatar, dll untuk membuat antarmuka sederhana.
Kombinasikan widget vertikal dan horizontal (Column, Row) sesuai tugas yang diberikan.
KESIMPULAN
Melalui praktikum ini dapat disimpulkan bahwa proses instalasi dan konfigurasi lingkungan kerja merupakan tahapan yang sangat penting agar Flutter dapat dijalankan dengan baik. Setelah semua tools berhasil dipasang, mahasiswa dapat memahami perbedaan mendasar antara widget stateless dan stateful. Widget stateless digunakan ketika tampilan bersifat statis dan tidak berubah akibat interaksi, sedangkan widget stateful digunakan untuk membangun tampilan yang dinamis dan mampu menyesuaikan diri terhadap perubahan data maupun input pengguna.
Selain itu, penggunaan basic widget seperti Text, Container, ElevatedButton, Icon, Image, dan CircleAvatar memberikan gambaran nyata bagaimana elemen antarmuka dasar dibangun dalam aplikasi Flutter. Dengan memanfaatkan kombinasi layout vertikal (Column) dan horizontal (Row), tampilan aplikasi dapat diatur secara lebih fleksibel dan rapi. Tugas yang diberikan, baik dalam membuat layout sederhana maupun tampilan profil dengan memanfaatkan berbagai widget dasar, membantu memperkuat pemahaman konsep sekaligus melatih keterampilan praktis dalam merancang antarmuka aplikasi.
Secara keseluruhan, praktikum ini memberikan pengalaman langsung yang tidak hanya memperdalam pemahaman teori, tetapi juga mengasah keterampilan teknis dalam membangun aplikasi Flutter. Hambatan kecil seperti pengaturan tata letak atau penyesuaian properti widget justru menjadi bagian penting dari proses pembelajaran yang memperkaya pemahaman mahasiswa terhadap pengembangan aplikasi mobile berbasis Flutter.
TUGAS
1. Membuat 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 LayoutWidgetsApp());
}
class LayoutWidgetsApp extends StatelessWidget {
const LayoutWidgetsApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: LayoutWidgetsPage(),
);
}
}
class LayoutWidgetsPage extends StatelessWidget {
const LayoutWidgetsPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(“Vertical & Horizontal Layout”),
backgroundColor: Colors.teal,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 80,
height: 80,
margin: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(12),
),
child: const Icon(Icons.home, color: Colors.white, size: 40),
),
const SizedBox(width: 20),
Container(
width: 80,
height: 80,
margin: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12),
),
child: const Icon(Icons.star, color: Colors.white, size: 40),
),
],
),
const SizedBox(height: 30),
Container(
width: 250,
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.green[100],
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.green, width: 2),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text(
“Tugas Flutter”,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
const Text(“Contoh Layout Vertical + Horizontal”),
const SizedBox(height: 10),
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text(“Tombol ditekan”)),
);
},
child: const Text(“Klik Saya”),
),
],
),
),
],
),
),
);
}
}
2. Memuat 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 ProfileApp());
}
class ProfileApp extends StatelessWidget {
const ProfileApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: ProfilePage(),
);
}
}
class ProfilePage extends StatelessWidget {
const ProfilePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(“Profil Mahasiswa”),
backgroundColor: const Color.fromARGB(150, 58, 146, 137),
centerTitle: true,
),
body: Row(
children: [
Expanded(
flex: 1,
child: Center(
child: CircleAvatar(
radius: 80,
backgroundColor: Colors.teal,
child: ClipOval(
child: Image.asset(
“assets/images/kae.jpg”,
fit: BoxFit.cover,
width: 300,
height: 300,
),
),
),
),
),
Container(
width: 1,
height: double.infinity,
color: const Color.fromARGB(255, 173, 167, 167),
),
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color.fromARGB(255, 255, 223, 238),
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: const Color.fromARGB(255, 219, 81, 150),
width: 2,
),
),
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
“Nama : Nia Ramadhani”,
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.bold),
),
SizedBox(height: 8),
Text(“NIM : 2311531006”),
SizedBox(height: 8),
Text(“Jurusan : Informatika”),
],
),
),
const SizedBox(height: 20),
Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.green[50],
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: const Color.fromARGB(255, 33, 109, 92),
width: 2,
),
),
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(“Alamat : Jakarta, Sumatera Barat”),
SizedBox(height: 8),
Text(“No HP : 0888-0760-8714”),
],
),
),
],
),
),
),
],
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.email,
color: Color.fromARGB(255, 253, 146, 205), size: 28),
SizedBox(width: 8),
Text(“syadirakaela@gmail.com”),
],
),
const SizedBox(height: 20),
ElevatedButton.icon(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text(“Profil disimpan”)),
);
},
icon: const Icon(Icons.save),
label: const Text(“Simpan Profil”),
),
],
),
),
);
}
}
Leave a Reply