Laporan Praktikum Aplikasi Mobile
Setup Flutter Development, Stateless & Statefull Widget, Basic Widgets
Aliffia Humairah - 2311531004
Langkah Pengerjaan:
A. Setup Lingkungan Flutter Development
1. Install GIT
Download GIT disini kemudian install sesuai dengan wizard instalasinya.
2. Install Visual Studio
Ada library flutter yang dibut menggunakan Bahasa C++ maka perlu diinstall Visual Studio.
3. Install Android Studio
Meskipun kita dapat membuat aplikasi flutter tanpa menggunakan Android Studio akan tetapi sangat direkomendasikan unutk menginstallnya, karena pada Android Studio terdapat Android SDK Manager dan kita dapat membuat emulator untuk menjalankan aplikasi flutter.
4. Install Visual Studio Code
5. Install SDK Flutter
Cek Setup Flutter Development
B. Project Pertama Flutter “hai”
Membuat project flutter dapat dilakukan menggunakan beberapa cara yaitu dapat melalui Command Prompt / Terminal dan juga dapat dibuat langsung dari IDE yang kita gunakan
Via Terminal / Command Prompt
Muncul beberapa pilihan project akan dijalankan pada windows, chrome, edge. kemudian ketikkan 1,2, atau 3 untuk menampilkan outputnya, jika pilih Chrome, akan muncul seperti gambar berikut.
Via Visual Studio Code
C. Struktur Project Flutter
Keterangan :
D. Stateless dan Statefull Widget
Stateless
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
Output :
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.
Output :
Halaman pertama yang muncul seperti pada gambar berikut.
Jika diklik icon + maka akan langsung muncul kelipatan yang dimulai dari 2.
E. Basic Widget
Text
Text merupakan widget dasar yang digunakan untuk menampikan teks pada layer.
Properti :
contoh :
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.
Properti :
contoh :
ElevatedButton
ElevatedButton merupakan widget yang mewakili tombol dan memiliki shadow
Properti :
contoh :
Icon
ElevatedButton merupakan widget yang mewakili tombol dan memiliki shadow
Properti :
contoh :
Image
Image merupakan widget dasar yang digunakan untuk menampikan gambar dari berbagai sumber seperti asset, network, memory (byte data), file system.
Properti :
contoh : Netwok Image
CircleAvatar
CircleAvatar adalah widget yang sering digunakan untuk menampilkan gambar profil pengguna atau inisialnya dalam bentuk lingkaran.
Properti :
contoh :
Latihan /Tugas:
import 'package:flutter/material.dart';
void main() => runApp(const MyWidgetApp());
class MyWidgetApp extends StatelessWidget {
const MyWidgetApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: WidgetScreen(),
);
}
}
class WidgetScreen extends StatelessWidget {
const WidgetScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromARGB(255, 255, 255, 255),
appBar: AppBar(
title: const Text("Vertical & Horizontal Widgets"),
centerTitle: true,
backgroundColor: const Color.fromARGB(255, 51, 175, 16),
),
body: Center(
child: Column(
// VERTICAL layout utama
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Bagian 1: Teks
const Text(
"Basic Widgets",
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
const SizedBox(height: 20),
// Bagian 2: Deretan icon horizontal
Row(
// HORIZONTAL layout
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(
Icons.home,
size: 50,
color: Color.fromARGB(255, 32, 176, 0),
),
SizedBox(width: 30),
Icon(
Icons.favorite,
size: 50,
color: Color.fromARGB(255, 255, 17, 0),
),
SizedBox(width: 30),
Icon(Icons.star, size: 50, color: Colors.orange),
],
),
const SizedBox(height: 30),
// Bagian 3: Container
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color.fromARGB(255, 178, 235, 169),
borderRadius: BorderRadius.circular(12),
),
child: const Text(
"Ini adalah Container",
style: TextStyle(fontSize: 18),
),
),
const SizedBox(height: 30),
// Bagian 4: Tombol
ElevatedButton.icon(
onPressed: () {},
label: const Text("Klik Saya"),
style: ElevatedButton.styleFrom(
backgroundColor: const Color.fromARGB(255, 52, 169, 48),
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 12,
),
),
),
],
),
),
);
}
}
Outputnya:
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 Saya'),
backgroundColor: const Color.fromARGB(255, 246, 146, 255),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(height: 40),
// Foto Profil menggunakan CircleAvatar dan Image.asset
CircleAvatar(
radius: 80,
backgroundColor: Colors.white,
child: ClipOval(
child: Image.asset(
'assets/images/profil.jpg',
width: 150,
height: 150,
fit: BoxFit.cover,
),
),
),
const SizedBox(height: 20),
// Nama
const Text(
"Aliffia Humairah",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
),
const SizedBox(height: 10),
// NIM
const Text(
"2311531004",
style: TextStyle(fontSize: 18, color: Colors.grey),
),
const Divider(
height: 40,
thickness: 1,
indent: 50,
endIndent: 50,
color: Colors.grey,
),
// Informasi Kontak dalam Container dengan Icon dan Text
_buildInfoContainer(
icon: Icons.location_on,
text: "Kapalo Koto, Kota Padang",
),
_buildInfoContainer(icon: Icons.phone, text: "08123456789"),
_buildInfoContainer(icon: Icons.school, text: "Informatika"),
const SizedBox(height: 20),
// Tombol untuk aksi
ElevatedButton(
onPressed: () {
print("Tombol ditekan");
},
child: const Text("Hubungi Saya"),
),
const SizedBox(height: 40),
],
),
),
),
);
}
}
Widget _buildInfoContainer({required IconData icon, required String text}) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
padding: const EdgeInsets.all(15),
decoration: BoxDecoration(
color: Colors.blueGrey.shade50,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 2,
blurRadius: 5,
offset: const Offset(0, 3),
),
],
),
child: Row(
children: [
Icon(icon, color: Colors.indigo),
const SizedBox(width: 15),
Expanded(child: Text(text, style: const TextStyle(fontSize: 16))),
],
),
);
}
Outputnya:
File tugas dapat dilihat pada link GitHub: https://github.com/AliffiaHumrh/2311531004_PraktikumAplikasiMobile2_KelasB.git