Tugas Pertemuan 12
Framework Flutter Name App
Nama : Nadya Zuhria Amana
NRP : 5025211058
Kelas : Pemrograman Perangkat Bergerak B
Tahun : 2024
## Ulasan dan Instruksi
Aplikasi ini adalah aplikasi pembuat nama acak yang memungkinkan pengguna untuk menghasilkan nama acak, menandai nama sebagai favorit, dan melihat daftar nama favorit mereka. Berikut adalah penjelasan mendetail tentang cara kerja aplikasi dan langkah-langkah untuk menjalankannya.
### Struktur Proyek
Proyek ini terdiri dari beberapa file dan dependensi utama yang perlu diperhatikan:
- **pubspec.yaml**: Berisi informasi proyek, versi SDK, dan dependensi.
- **lib/main.dart**: File utama yang berisi logika aplikasi, termasuk state management dan UI.
### Dependensi
- `english_words`: Digunakan untuk menghasilkan pasangan kata acak.
- `provider`: Digunakan untuk state management.
### `pubspec.yaml`
```yaml
name: namer_app
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 0.0.1+1
environment:
sdk: '>=2.19.4 <4.0.0'
dependencies:
flutter:
sdk: flutter
english_words: ^4.0.0
provider: ^6.0.0
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
uses-material-design: true
```
### `lib/main.dart`
#### Import Statements
```dart
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
```
#### Main Function
Fungsi `main` memulai aplikasi dengan `MyApp`.
```dart
void main() {
runApp(MyApp());
}
```
#### MyApp Class
`MyApp` adalah widget utama yang menyediakan state management melalui `ChangeNotifierProvider`.
```dart
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.deepOrange),
),
home: MyHomePage(),
),
);
}
}
```
#### MyAppState Class
`MyAppState` adalah model state yang mengelola kata saat ini dan daftar favorit.
```dart
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();
}
}
```
#### MyHomePage Class
`MyHomePage` mengelola state halaman yang dipilih (Generator atau Favorites) dan menggunakan `NavigationRail` untuk navigasi.
```dart
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,
),
),
],
),
);
}
);
}
}
```
### GeneratorPage Class
Menampilkan pasangan kata acak dan tombol untuk menambahkannya ke favorit atau mendapatkan kata berikutnya.
```dart
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'),
),
],
),
],
),
);
}
}
```
### BigCard Class
Menampilkan kata acak dalam kartu besar.
```dart
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}",
),
),
);
}
}
```
### FavoritesPage Class
Menampilkan daftar pasangan kata yang ditandai sebagai favorit.
```dart
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
1. Pastikan Anda memiliki Flutter SDK terinstal.
2. Buka terminal dan arahkan ke direktori proyek.
3. Jalankan `flutter pub get` untuk menginstal dependensi.
4. Jalankan `flutter run` untuk menjalankan aplikasi di emulator atau perangkat yang terhubung.
### Kesimpulan
Aplikasi ini menyediakan antarmuka sederhana untuk menghasilkan pasangan kata acak, menandainya sebagai favorit, dan melihat daftar favorit. Dengan penggunaan `provider` untuk state management dan `english_words` untuk menghasilkan kata, aplikasi ini mudah dikembangkan dan dimodifikasi lebih lanjut sesuai kebutuhan.