CHALLENGE FLUTTER
Menganalisis dan Memodifikasi Program Flutter
Nama:
Dehira Zallea Iskandar
Kelas:
XI PPLG 2
Tujuan Praktikum
Tujuan dari praktikum ini adalah untuk mempelajari struktur dasar program Flutter, memahami fungsi widget yang digunakan, serta melakukan modifikasi program agar tampilan aplikasi menjadi lebih menarik dan interaktif.
---
Analisis Program
Program Flutter merupakan aplikasi yang dibuat menggunakan bahasa pemrograman Dart dan framework Flutter. Pada program ini terdapat beberapa bagian penting yang memiliki fungsi masing-masing.
1. Fungsi main()
void main() {
runApp(MyApp());
}
Fungsi "main()" merupakan titik awal program dijalankan. Fungsi "runApp()" digunakan untuk menjalankan widget utama aplikasi yaitu "MyApp".
---
2. Widget MaterialApp
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Aplikasi Flutter',
)
Widget "MaterialApp" digunakan sebagai dasar aplikasi Flutter yang berfungsi untuk mengatur tema, judul aplikasi, navigasi, dan tampilan utama aplikasi.
---
3. Widget Scaffold
Scaffold(
appBar: AppBar(),
body: Center(),
)
Widget "Scaffold" digunakan sebagai kerangka dasar tampilan aplikasi yang terdiri dari AppBar dan Body.
---
4. Widget Column
Column(
children: [],
)
Widget "Column" digunakan untuk menyusun beberapa widget secara vertikal dari atas ke bawah.
---
5. Widget ElevatedButton
ElevatedButton(
onPressed: () {},
child: Text('Buka Halaman'),
)
Widget "ElevatedButton" digunakan untuk membuat tombol interaktif yang dapat ditekan pengguna.
---
Modifikasi Program
Pada praktikum ini saya melakukan beberapa modifikasi pada program, yaitu:
1. Mengubah judul aplikasi.
2. Mengubah warna tema aplikasi.
3. Menambahkan ikon Flutter.
4. Menambahkan tombol interaktif.
5. Menambahkan halaman kedua menggunakan Navigator.
6. Membuat tampilan lebih rapi dan menarik.
---
Kode Program Hasil Modifikasi
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Aplikasi Flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hasil Modifikasi Flutter'),
centerTitle: true,
actions: [
Icon(Icons.notifications),
SizedBox(width: 10),
],
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.flutter_dash,
size: 100,
color: Colors.blue,
),
SizedBox(height: 20),
Text(
'Selamat Datang di Aplikasi Flutter',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
SizedBox(height: 15),
ElevatedButton(
child: Text('Buka Halaman'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HalamanKedua(),
),
);
},
),
],
),
),
);
}
}
class HalamanKedua extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Halaman Kedua'),
),
body: Center(
child: Text(
'Ini adalah halaman kedua',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
),
);
}
}
---
Penjelasan Kode Program:
MaterialApp
Digunakan sebagai dasar aplikasi Flutter untuk mengatur tema dan halaman utama aplikasi.
Scaffold
Digunakan untuk membuat struktur tampilan aplikasi seperti AppBar dan Body.
AppBar
Digunakan untuk membuat bagian header aplikasi.
Column
Digunakan untuk menyusun widget secara vertikal.
Icon
Digunakan untuk menampilkan ikon Flutter pada aplikasi.
Text
Digunakan untuk menampilkan tulisan pada layar aplikasi.
ElevatedButton
Digunakan untuk membuat tombol yang dapat ditekan pengguna.
Navigator.push()
Digunakan untuk berpindah dari halaman utama ke halaman kedua.
---
Hasil Aplikasi
Berikut merupakan hasil aplikasi setelah dilakukan modifikasi program Flutter.
Aplikasi yang telah dimodifikasi memiliki tampilan yang lebih menarik dibandingkan program awal. Perubahan yang dilakukan meliputi penggantian warna tema, penambahan ikon, penambahan tombol interaktif, serta penambahan halaman kedua.
Pada halaman utama aplikasi terdapat:
- Judul aplikasi pada AppBar.
- Ikon Flutter.
- Tulisan sambutan.
- Tombol untuk berpindah halaman.
- Tampilan yang lebih rapi dan modern.
Selain itu aplikasi dapat berjalan dengan baik tanpa mengalami error saat dijalankan pada emulator maupun perangkat Android.
1. Tampilan halaman utama aplikasi.
2. Tampilan halaman kedua.
3. Tampilan saat tombol ditekan.
4. Tampilan hasil modifikasi warna dan layout.
---
Kendala yang Dihadapi
Beberapa kendala yang saya alami selama praktikum yaitu:
- Kesalahan penulisan syntax pada awal pembuatan program.
- Kesulitan memahami fungsi Navigator.
- Penyesuaian tata letak agar tampilan lebih rapi.
Namun kendala tersebut dapat diatasi dengan memperbaiki syntax dan mencoba program secara bertahap.
---
Kesimpulan
Dari praktikum ini saya dapat memahami struktur dasar aplikasi Flutter serta fungsi dari beberapa widget utama seperti MaterialApp, Scaffold, Column, dan ElevatedButton. Saya juga belajar melakukan modifikasi tampilan aplikasi agar menjadi lebih menarik dan interaktif.
Praktikum ini membantu meningkatkan pemahaman tentang pengembangan aplikasi menggunakan Flutter dan bahasa Dart.
Komentar
Posting Komentar