Tugas 9 PPB - Flutter Framework 1
Nama : I Gusti Ngurah Ervan Juli Ardana
NRP : 5025211205
Kelas : Pemrograman Perangkat Bergerak B
Tahun : 2024
Pada pertemuan kelas Pemrograman Perangkat Bergerak B kali ini, kami diperkenalkan dengan Framework Flutter. Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membangun aplikasi antarmuka pengguna (UI) yang nativ di berbagai platform, termasuk iOS, Android, web, dan desktop dari satu kode sumber yang sama. Flutter dirancang untuk memudahkan pengembang dalam membuat aplikasi yang indah, cepat, dan kaya fitur. Pada pertemuan ini, saya akan mengimplementasikan dasar dari sebuah aplikasi Flutter berupa aplikasi pembuatan nama secara acak atau biasa disebut “Namer App”
Framework Flutter
Deskripsi Aplikasi
Namer App adalah aplikasi demo sederhana yang dibuat menggunakan Flutter untuk menunjukkan cara membuat aplikasi yang interaktif dan dinamis dengan antarmuka pengguna yang menarik. Aplikasi ini sering digunakan sebagai tutorial atau contoh untuk pengembang yang baru memulai dengan Flutter. Namer App menghasilkan nama acak untuk startup dan memungkinkan pengguna untuk menyimpan nama-nama favorit mereka.
Implementasi kode
pubspec.yaml
berfungsi untuk mengatur berbagai aspek penting dari proyek tersebut. Pertama, file ini menetapkan nama proyek sebagai "namer_app" dan memberikan deskripsi singkat bahwa ini adalah proyek Flutter baru. Selain itu, ada parameter publish_to yang diatur ke 'none', yang menunjukkan bahwa paket ini tidak akan dipublikasikan ke pub.dev dan hanya untuk penggunaan pribadi atau lokal
name: namer_app
description: A new Flutter project.
publish_to: 'none'
version: 0.0.1+1
environment:
sdk: ^3.2.0
dependencies:
flutter:
sdk: flutter
english_words: ^4.0.0
provider: ^6.0.0
cupertino_icons: ^1.0.8
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^3.0.0
flutter:
uses-material-design: true
main_dart
menggunakan paket english_words untuk menghasilkan nama acak, paket provider untuk manajemen state, dan paket flutter/material.dart untuk membangun antarmuka pengguna dengan gaya material. Aplikasi ini memiliki fungsionalitas untuk menghasilkan nama acak, menyimpan nama favorit, dan navigasi antara halaman utama dan halaman favorit.
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.deepOrange),
),
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();
case 1:
page = FavoritesPage();
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),
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),
),
],
);
}
}
Dokumentasi Hasil
Repository
Komentar
Posting Komentar