Pada praktikum kali ini, kita akan mempersiapkan flutter environtment seperti menginstall flutter SDK, Git, Android SDK, Vscode extension, dan lain-lain. Kemudian, kita akan melakukan beberapa contoh stateless dan statefull widget flutter serta membuat contoh basic widgets flutter
Pertama, install Git disini, jika sudah cek git di terminal.
Kemudian, install Visual Studio dengan menginstal Desktop Development with C++
Kemudian, installasi android studio. Andoid studio dapat diinstal disini.
Setelah setup didownload dan diinstal, buat project baru di Android Studio. Pilih Empty Activity
Kemudian klik setting dan pilih SDK Manager
Setelah itu buat seperti ini
Kemudian, kita setting extension di VSCode dengan menambahkan extension flutter seperti gambar berikut:
Setelah itu, kita perlu menginstall Flutter SDK. SDK dapat didownload disini.
Setelah didownload, ikuti folder path seperti digambar. Kemudian atur Environtment Variable nya
Kemudian buatlah seperti ini di bagian user variable
Setelah dimasukkan ke environtment variable, cek flutter dengan menggunakan perintah berikut di terminal
flutter doctorJika sudah seperti digambar maka sudah bisa mengembangkan aplikasi menggunakan flutter
Untuk membuat project flutter, pergi ke directory yang diinginkan kemudian gunakan kode terminal berikut:
flutter create haiJika sudah maka akan seperti berikut:
Untuk mengetes project flutter yang sudah dibuat, pergi ke folder tersebut dan gunakan perintah berikut untuk menjalankan project:
flutter runMaka tampilannya akan seperti berikut:
Sekarang, kita akan mencoba membuat 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")),
),
);
}
}
Maka hasilnya akan seperti berikut:
Selanjutnya adalah membuat Statefull. 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
Buatlah kode berikut di file baru bernama statefull.dart
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(
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),
),
),
);
}
}
Maka hasilnya akan seperti berikut
Selanjutnya, kita akan mempelajari basic widget di flutter. Pertama ada text. Text merupakan widget dasar yang digunakan untuk menampikan teks pada layer
- data berisi teks yang akan ditampilkan
- style properti yang menerima objek TextStyle yang digunakan untuk mengontrol tampilan teks seperti fontSize, color, fontWeight (bold), fontStyle (italic)
- textAlign mengatur teks secara horizontal seperti TextAlign.center, left, right
- maxLines berfungsi membatas jumlah baris yang akan ditampilkan
- overflow mengatur teks yang terlalu panjang (TextOverflow.ellipsis) untuk menambahkan “…..” di akhir teks
Contoh kodenya seperti 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(
body: Center(
child: Text(
"Hai I am Text Widget",
style: const TextStyle(
fontSize: 14.0,
color: Colors.red,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
),
textAlign: TextAlign.center,
),
),
),
);
}
}
Hasilnya adalah sebagai berikut:
Selanjutnya yaitu Container. Container merupakan widget yang berfungsi sebagai KOTAK yang dapat menampung ssatu widget child dan menyediakan berbagai properti untuk dekorasi, mengatur posisi dan mengatur ukuran widget.
- child properti yang menerima satu widget yang akan ditempatkan didalam container
- color mengatur warna background
- width dan height mengatur lebar dan tinggi container
- padding mengatur jarak antara konten dengan bagian dalam container
- margin mengatur jarak antara container dengan widget lain diluar container
- decoration properti yang menerima objek BoxDecoration yang dapat mengatur warna, border, corner radius dan shadow pada Container.
Contoh kodenya adalah seperti 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(
body: Center(
child: 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),
),
),
),
),
);
}
}
Hasilnya adalah sebagai berikut:
Selanjutnya yaitu ElevatedButton. ElevatedButton merupakan widget yang mewakili tombol dan memiliki shadow
- onPressed berfungsi untuk menerima sebuah fungsi atau callback ketika tombol di tekan
- child properti yang berisi satu widget yang akan ditampilkan didalam tombol biasanya Text atau Icon
- style properti yang menerima objek ButtonStyle sehingga dapat menyesuaikan tampilan tombol seperti backgroundColor, foregroundColor, padding dan shape
Contoh kodenya adalah seperti berikut:
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(
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"),
),
),
),
);
}
}
Hasilnya adalah seperti berikut:
Selanjutnya adalah icon. Icon merupakan widget yang digunakan untuk menampilkan icon, Flutter telah menyediakan set icon seperti Material Icons dari Google atau Cupertino Icons dari Apple
- icon properti yang menerima object IconData yang merepresentasikan ikon yang akan ditampilkan dari kelas Icons atau CupertinoIcons
- color mengatur warna ikon
- size mengatur ukuran ikon dalam piksel
Contoh kodenya adalah sebagai berikut:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.add, color: Colors.amber, size: 50.0),
SizedBox(height: 20), // spacing between icons
Icon(CupertinoIcons.add, color: Colors.red, size: 50.0),
],
),
),
),
);
}
}
Hasilnya adalah sebagai berikut
Selanjutnya adalah widget Image. Image merupakan widget dasar yang digunakan untuk menampikan gambar dari berbagai sumber seperti asset, network, memory (byte data), file system.
- image properti yang menerima object ImageProvider seperti AssetImage, NetworkImage dll)
- width dan height mengatur lebar dan tinggi gambar
- fit digunakan untuk menyesuaikan ukuran gambar seperti cover, fill, contain
- aligment digunakan untuk mengatur posisi gambar
Contoh kodenya adalah sebagai berikut:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Image.network(
"https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Logo_Unand.svg/600px-Logo_Unand.svg.png",
width: 100,
height: 150,
),
),
),
);
}
}
Hasilnya adalah sebagai berikut:
Selanjutnya adalah images.
- Buat folder di dalam proyek misalnya assets/images.
- Masukkan gambar (misalnya, logo.png) ke dalam folder tersebut.
- Daftarkan di pubspec.yaml: Buka file pubspec.yaml dan tambahkan baris berikut di bawah bagian flutter:
Karena assets/images sudah dimasukkan, coba ganti logo unand yang sebelumnya menjadi file. Ubah menjadi seperti berikut
Kemudian, widget CircleAvatar. CircleAvatar adalah widget yang sering digunakan untuk menampilkan gambar profil pengguna atau inisialnya dalam bentuk lingkaran.
- Child Widget yang akan ditampilkan di dalam lingkaran seperti Text (inisial) atau Icon.
- backgroundImage Digunakan untuk menampilkan gambar dari ImageProvider, seperti NetworkImage atau AssetImage.
- radius Mengontrol ukuran lingkaran, ukuran defaultnya adalah 20.
- backgroundColor Mengatur warna latar belakang lingkaran
Contoh kodenya adalah seperti berikut:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
radius: 30,
backgroundColor: Colors.green,
child: const Text(
"IF",
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
const SizedBox(width: 10),
CircleAvatar(
radius: 30,
backgroundColor: Colors.blue,
child: const Icon(Icons.person, color: Colors.white, size: 30),
),
],
),
),
),
);
}
}
Hasilnya adalah sebagai berikut:
Tugas
- Buatlah tampilan widget secara vertical dan horizontal dengan menggunakan minimal 3 buah
basic widget dalam 1 tampilan - 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
Hasil:
Link Repo Gihub: https://github.com/farhnsaptr/hai