TUGAS 9 - Flutter Framework
Nama: Rule Lulu Damara
NRP: 5025211050
Kelas: PPB B
Flutter Framework
1. Deskripsi
Jawab:
Aplikasi Flutter ini memungkinkan pengguna untuk membuat nama-nama keren secara acak seperti "newstay," "lightstream," "mainbrake," atau "graypine." Pengguna dapat dengan mudah meminta nama baru, menyimpan favorit mereka, dan mengelola daftar nama-nama favorit dalam tampilan responsif yang cocok untuk berbagai perangkat, mulai dari ponsel hingga desktop. Aplikasi ini dirancang untuk memberikan navigasi yang intuitif agar pengguna dapat menikmati pengalaman interaktif dalam menciptakan dan menyimpan nama-nama menarik dengan lancar.
2. Implementations
Persiapan Proyek Flutter
- Buat
Proyek Baru Flutter:
- Gunakan perintah flutter create nama_proyek di terminal untuk membuat struktur dasar proyek Flutter. Ini mencakup direktori proyek dengan file-file seperti pubspec.yaml, android/ (atau ios/), dan lib/.
- Evidence
- Ubah
pubspec.yaml:
- File
pubspec.yaml adalah file konfigurasi proyek Flutter. Di sini, tambahkan
dependensi seperti english_words dan provider dengan versi yang
diperlukan. Jalankan flutter pub get di terminal untuk mengunduh dan
menginstal paket-paket tersebut.
Struktur Proyek dan File Utama:
- Pastikan
struktur proyek terorganisir dengan baik. File utama termasuk pubspec.yaml
untuk konfigurasi, lib/main.dart sebagai titik masuk aplikasi, dan folder
lib/ untuk menyimpan file-file Dart lainnya.
1.
File lib/main.dart:
- Import
Statements: Impor dependensi seperti english_words, flutter/material.dart,
dan provider untuk penggunaan kelas-kelas dan fungsi-fungsi yang
didefinisikan dalam paket-paket tersebut.
- Main
Function (void main()): Fungsi main() adalah titik masuk utama
aplikasi Flutter. Di dalamnya, panggil runApp() dengan widget MyApp untuk
memulai aplikasi.
- MyApp
Class: Kelas MyApp adalah widget utama yang menggunakan ChangeNotifierProvider
dari paket provider untuk manajemen state global. Ini menentukan tema
aplikasi dan halaman utama (MyHomePage).
- MyAppState
Class: Kelas MyAppState adalah model state aplikasi yang mengelola
data seperti kata acak saat ini dan daftar favorit menggunakan ChangeNotifier.
- MyHomePage Class: Widget MyHomePage menampilkan NavigationRail untuk navigasi antara GeneratorPage dan FavoritesPage, memberi pengguna cara yang mudah untuk beralih antara fungsi aplikasi.
1. Implementasi Widget Tambahan:
- GeneratorPage
Class: Halaman untuk menampilkan kata acak dan mengelola interaksi
pengguna seperti favorit. Menggunakan state dari MyAppState.
- BigCard
Class: Bagian dari GeneratorPage yang menampilkan kata acak dalam
kartu besar, menciptakan antarmuka yang menarik untuk pengguna.
- FavoritesPage
Class: Halaman untuk menampilkan daftar nama favorit dalam ListView,
memungkinkan pengguna untuk melihat dan mengelola nama-nama yang
disimpan.
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => MyAppState(),
child: MaterialApp(
title: 'Namer App',
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blueGrey),
),
home: MyHomePage(),
),
);
}
}
class MyAppState extends ChangeNotifier {
var current = WordPair.random();
void getNext() {
current = WordPair.random();
notifyListeners();
}
var favorites = <WordPair>[];
void toggleFavorite() {
if (favorites.contains(current)) {
favorites.remove(current);
} else {
favorites.add(current);
}
notifyListeners();
}
}
// ...
class MyHomePage extends StatefulWidget {
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var selectedIndex = 0;
@override
Widget build(BuildContext context) {
Widget page;
switch (selectedIndex) {
case 0:
page = GeneratorPage();
break;
case 1:
page = FavoritesPage();
break;
default:
throw UnimplementedError('no widget for $selectedIndex');
}
return LayoutBuilder(builder: (context, constraints) {
return Scaffold(
body: Row(
children: [
SafeArea(
child: NavigationRail(
extended: constraints.maxWidth >= 600,
destinations: [
NavigationRailDestination(
icon: Icon(Icons.home),
label: Text('Home'),
),
NavigationRailDestination(
icon: Icon(Icons.favorite),
label: Text('Favorites'),
),
],
selectedIndex: selectedIndex,
onDestinationSelected: (value) {
setState(() {
selectedIndex = value;
});
},
),
),
Expanded(
child: Container(
color: Theme.of(context).colorScheme.primaryContainer,
child: page,
),
),
],
),
);
});
}
}
class GeneratorPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var appState = context.watch<MyAppState>();
var pair = appState.current;
IconData icon;
if (appState.favorites.contains(pair)) {
icon = Icons.favorite;
} else {
icon = Icons.favorite_border;
}
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BigCard(pair: pair),
SizedBox(height: 10),
Row(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton.icon(
onPressed: () {
appState.toggleFavorite();
},
icon: Icon(icon),
label: Text('Like'),
),
SizedBox(width: 10),
ElevatedButton(
onPressed: () {
appState.getNext();
},
child: Text('Next'),
),
],
),
],
),
);
}
}
// ...
class BigCard extends StatelessWidget {
const BigCard({
super.key,
required this.pair,
});
final WordPair pair;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final style = theme.textTheme.displayMedium!.copyWith(
color: theme.colorScheme.onPrimary,
);
return Card(
color: theme.colorScheme.primary,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
pair.asLowerCase,
style: style,
semanticsLabel: "${pair.first} ${pair.second}",
),
),
);
}
}
// ...
class FavoritesPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
var appState = context.watch<MyAppState>();
if (appState.favorites.isEmpty) {
return Center(
child: Text('No favorites yet.'),
);
}
return ListView(
children: [
Padding(
padding: const EdgeInsets.all(20),
child: Text('You have '
'${appState.favorites.length} favorites:'),
),
for (var pair in appState.favorites)
ListTile(
leading: Icon(Icons.favorite),
title: Text(pair.asLowerCase),
),
],
);
}
}
Menjalankan Aplikasi Flutter
1.
Setup Lingkungan Flutter:
Pastikan Flutter SDK terinstal dan konfigurasi emulator atau
perangkat fisik yang terhubung untuk pengembangan Flutter.
2.
Langkah-langkah untuk Menjalankan
Aplikasi:
- Navigasi ke Direktori
Proyek: Buka terminal atau command prompt, arahkan ke direktori proyek
Flutter yang telah Anda buat.
- Instalasi Dependensi:
Jalankan perintah flutter pub get di terminal untuk mengunduh dan
menginstal semua dependensi yang diperlukan untuk proyek.
- Menjalankan Aplikasi: Gunakan perintah flutter run di terminal untuk membangun dan menjalankan aplikasi Flutter. Proses ini akan mulai aplikasi Anda di emulator atau perangkat yang terhubung.
3. Hasil
.png)
.png)
.png)
3.
Uji Aplikasi:
- Fungsionalitas:
Setelah aplikasi berjalan, uji fungsi seperti pembuatan nama acak,
penandaan favorit, dan fungsionalitas daftar favorit.
- Responsivitas
UI: Pastikan aplikasi merespons dengan baik terhadap berbagai ukuran
layar. Uji pada mode landscape dan portrait untuk memastikan tata letak UI
tetap konsisten dan nyaman digunakan.
4.
Pengembangan Lebih Lanjut:
- Modifikasi
dan Peningkatan: Sesuaikan aplikasi dengan kebutuhan Anda dengan
menambahkan fitur baru atau melakukan perubahan desain UI.
- Optimasi
Kode: Periksa dan optimalkan kode untuk meningkatkan performa dan
memelihara keterbacaan. Gunakan praktik terbaik dalam pengelolaan state
dan pembuatan UI di Flutter untuk menjaga kode tetap bersih dan mudah
dikelola.
Komentar
Posting Komentar