TUGAS 9 - Framework Flutter Name App
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