Laprak Aplikasi Mobile – Setup Flutter Development, Stateless & Statefull Widget, Basic Widgets
Instalasi Dart
Tujuan praktikum ini yaitu mahasiswa menginstall lingkungan flutter development, stateless dan stateful widget serta basic widgets flutter.
Mahasiswa mampu menyiapkan lingkungan development flutter seperti install SDK Flutter, Git, Android SDK, IDE, dll. Mahasiswa juga mampu membuat stateless dan stateful widget Flutter serta contoh basic widget Flutter.
Langkah-langkah
Setup Lingkungan Flutter Development — software yang dibutuhkan:
- Git
- Visual Studio Community (instal Desktop Development with C++)
- Android Studio
- Visual Studio Code dan ekstensi Flutter
- SDK Flutter, tambahkan ke PATH system variable
Setelah software lengkap, cek apakah lingkungan Flutter siap digunakan dengan mengetikkan flutter doctor pada terminal.
Buat Project Flutter "hai"
Membuat project Flutter dapat dilakukan melalui terminal dengan mengetik:
flutter create hai
cd hai
flutter runAgar lebih mudah, lanjutkan project di Visual Studio Code dan tambahkan folder “hai” ke workspace.
Struktur Project Flutter
- lib/ menyimpan seluruh kode Dart. File utama adalah main.dart.
- android/ berisi konfigurasi aplikasi Android.
- ios/ berisi konfigurasi aplikasi iOS.
- assets/ menyimpan gambar, font, dan aset lainnya.
- test/ untuk testing kode.
- pubspec.yaml konfigurasi utama proyek Flutter.
- README.md deskripsi proyek.
- .gitignore pengaturan Git.
Stateless Widget
Stateless Widget adalah widget yang tampilannya tidak berubah. Contohnya teks statis atau logo.
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("Hello Flutter!"),
),
),
);
}
}
Stateful Widget
Stateful Widget bersifat dinamis, di mana tampilan dapat berubah saat state berubah.
import 'package:flutter/material.dart';
void main() {
runApp(const MyStateful());
}
class MyStateful extends StatefulWidget {
const MyStateful({super.key});
@override
State<MyStateful> createState() => _MyStatefulState();
}
class _MyStatefulState extends State<MyStateful> {
int counter = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Stateful Widget")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Counter: $counter'),
ElevatedButton(
onPressed: () {
setState(() {
counter++;
});
},
child: const Text("Tambah"),
),
],
),
),
),
);
}
}
Container merupakan widget yang berfungsi sebagai KOTAK yang dapat menampung satu widget child dan menyediakan berbagai properti untuk dekorasi, mengatur posisi dan mengatur ukuran widget.
return Container(
width: 200,
height: 200,
margin: const EdgeInsets.all(20),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.blueAccent,
border: Border.all(color: Colors.white, width: 2),
borderRadius: BorderRadius.circular(10)),
);
ElevatedButton merupakan widget yang mewakili tombol dan memiliki shadow
return 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 merupakan widget yang digunakan untuk menampilkan icon, Flutter telah menyediakan set icon seperti Material Icons dari Google atau Cupertino Icons dari Apple
Image merupakan widget dasar yang digunakan untuk menampikan gambar dari berbagai sumber seperti asset, network, memory (byte data), file system.
- Buat folder di dalam proyek misalnya assets/images.
- Masukkan gambar (misalnya, foto.jpg) ke dalam folder tersebut.
- Daftarkan di pubspec.yaml dengan menambakan
assets: - assets/images/
CircleAvatar adalah widget yang sering digunakan untuk menampilkan gambar profil pengguna atau inisialnya dalam bentuk lingkaran.
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
runApp(const MyIcon());
}
class MyIcon extends StatelessWidget {
const MyIcon({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.add,
color: Colors.amber,
size: 50.0,
),
Icon(
CupertinoIcons.add,
color: Colors.red,
size: 50.0,
),
Image.network(
"https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Logo_Unand.svg/600px-Logo_Unand.svg.png",
width: 100,
height: 150,
),
Image.asset(
'assets/images/foto.jpg',
width: 100,
height: 150,
),
CircleAvatar(
radius: 30,
backgroundColor: Colors.green,
child: Text(
"IF",
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
SizedBox(
width: 10,
),
CircleAvatar(
radius: 30,
backgroundColor: Colors.blue,
child: Icon(
Icons.person,
color: Colors.white,
size: 30,
))
],
),
),
),
);
}
}
Tugas
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 MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Latihan 1: Widget Layout'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
height: 100,
color: Colors.blueAccent,
child: const Center(
child: Text(
'Container',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
const SizedBox(height: 20),
const Text(
'Susunan Horizontal:',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(
Icons.star,
color: Colors.amber,
size: 50.0,
),
Text('Text Bintang'),
Icon(
Icons.favorite,
color: Colors.red,
size: 50.0,
),
Text('Text Hati'),
],
),
],
),
),
),
);
}
}
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 MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Profil Mahasiswa'),
),
body: SingleChildScrollView(
child: Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const CircleAvatar(
radius: 80,
backgroundImage: AssetImage(
'assets/images/foto.jpg',
),
),
const SizedBox(height: 20),
const Text(
'Irgi Fatihul Ihsan',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 5),
const Text(
'2311531003',
style: TextStyle(
fontSize: 16.0,
color: Colors.grey,
),
),
const SizedBox(height: 30),
Container(
padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(10),
),
child: const Column(
children: [
InfoRow(
icon: Icons.school,
text: 'Informatika',
),
SizedBox(height: 15),
InfoRow(
icon: Icons.home,
text: 'Ambacang, Padang',
),
SizedBox(height: 15),
InfoRow(
icon: Icons.phone,
text: '0822-3234-1111',
),
],
),
),
const SizedBox(height: 30),
ElevatedButton(
onPressed: () {
print("Tombol 'Hubungi' ditekan!");
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blueAccent,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 15),
),
child: const Text('Hubungi'),
),
],
),
),
),
),
),
);
}
}
class InfoRow extends StatelessWidget {
final IconData icon;
final String text;
const InfoRow({
super.key,
required this.icon,
required this.text,
});
@override
Widget build(BuildContext context) {
return Row(
children: [
Icon(icon, color: Colors.blueAccent),
const SizedBox(width: 15),
Text(text, style: const TextStyle(fontSize: 16)),
],
);
}
}