Pendahuluan
Perkembangan teknologi mobile saat ini sangat pesat, terutama dengan adanya framework Flutter yang memungkinkan pengembangan aplikasi lintas platform dengan efisiensi tinggi. Dalam pembuatan aplikasi, salah satu aspek penting yang harus diperhatikan adalah navigasi antar halaman (screen) dan pengelolaan data antar halaman. Navigasi yang baik memberikan pengalaman pengguna (user experience) yang lebih interaktif dan mudah dipahami.
Praktikum ini bertujuan untuk mempelajari konsep Navigation dan Routing pada Flutter, yaitu cara berpindah dari satu halaman ke halaman lain serta cara mengirim dan menerima data antar halaman. Melalui kegiatan ini, mahasiswa diharapkan mampu memahami penggunaan Navigator, Named Routes, serta implementasi berbagai jenis routing yang sering digunakan dalam pengembangan aplikasi Flutter modern. Selain itu, praktikum juga mencakup pembuatan halaman Login dan Home, yang menjadi dasar dari hampir semua aplikasi mobile.
Dengan memahami konsep ini, pengembang aplikasi dapat membangun struktur aplikasi yang terorganisir, mudah dikelola, dan memiliki alur navigasi yang jelas antara berbagai fitur di dalam aplikasi.
Langkah Pengerjaan
1.Multiple Screen
import ‘package:flutter/material.dart’;
void main() => runApp(const MyNav());
class MyNav extends StatelessWidget {
const MyNav({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: ‘/’,
routes: {
‘/’: (context) => const Product(),
‘/product_detail’: (context) => const ProductDetail(),
},
);
}
}
class Product extends StatelessWidget {
const Product({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text(‘Product’)),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, ‘/product_detail’);
},
child: const Text(‘Go to Product Detail’),
),
),
);
}
}
class ProductDetail extends StatelessWidget {
const ProductDetail({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text(‘Product Detail’)),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text(‘Back to Product’),
),
),
);
}
}
2.Mengirim dan Menerima Data antar Halaman
import ‘package:flutter/material.dart’;
void main() => runApp(MyNav());
class MyNav extends StatelessWidget {
const MyNav({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: ‘/’,
routes: {
‘/’: (context) => const HomePage(),
‘/product’: (context) => const MyProduct(),
},
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text(‘Home Page’)),
body: Center(
child: Row(
children: [
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const MyProfile(id: 01, name: ‘Kaela’),
),
);
},
child: const Text(‘Profile’),
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(
context,
‘/product’,
arguments: {‘id’: 1, ‘name’: ‘Hp’},
);
},
child: const Text(‘Product’),
),
],
),
),
);
}
}
class MyProfile extends StatelessWidget {
final int id;
final String name;
const MyProfile({super.key, required this.id, required this.name});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text(‘Profile’)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(‘ID: $id’),
Text(‘Name: $name’),
],
),
),
);
}
}
class MyProduct extends StatelessWidget {
const MyProduct({super.key});
@override
Widget build(BuildContext context) {
final args = ModalRoute.of(context)!.settings.arguments as Map?;
final int id = args?[‘id’] ?? 0;
final String name = args?[‘name’] ?? ‘Unknown’;
return Scaffold(
appBar: AppBar(title: const Text('Product')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Product ID: $id'),
Text('Product Name: $name'),
],
),
),
);}
}
Tugas:
Buat halaman login dan halaman utama.
Ketika login diklik, halaman berpindah ke HomePage dengan mengirimkan username dan password, lalu ditampilkan di halaman utama.
import ‘package:flutter/material.dart’;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: ‘Navigation Demo’,
home: const LoginPage(),
);
}
}
class LoginPage extends StatefulWidget {
const LoginPage({super.key});
@override
State createState() => _LoginPageState();
}
class _LoginPageState extends State {
final TextEditingController usernameController = TextEditingController();
final TextEditingController passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text(“Login Page”)),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: usernameController,
decoration: const InputDecoration(labelText: “Username”),
),
TextField(
controller: passwordController,
obscureText: true,
decoration: const InputDecoration(labelText: “Password”),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
String username = usernameController.text;
String password = passwordController.text;
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
HomePage(username: username, password: password),
),
);
},
child: const Text("Login"),
)
],
),
),
);}
}
class HomePage extends StatelessWidget {
final String username;
final String password;
const HomePage({super.key, required this.username, required this.password});
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text(“Home Page”),
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.home), text: “Tab 1”),
Tab(icon: Icon(Icons.star), text: “Tab 2”),
Tab(icon: Icon(Icons.person), text: “Tab 3”),
],
),
),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
decoration: const BoxDecoration(color: Colors.blue),
child: Text(“Hello, $username”,
style: const TextStyle(color: Colors.white, fontSize: 20)),
),
ListTile(
leading: const Icon(Icons.info),
title: const Text(“User Info”),
onTap: () {
Navigator.pop(context);
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(“Password: $password”)),
);
},
),
ListTile(
leading: const Icon(Icons.exit_to_app),
title: const Text(“Logout”),
onTap: () {
Navigator.pop(context);
Navigator.pop(context);
},
),
],
),
),
body: TabBarView(
children: [
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(“Welcome, $username!”,
style: const TextStyle(fontSize: 22)),
const SizedBox(height: 10),
Text(“Password: $password”,
style: const TextStyle(fontSize: 18)),
],
),
),
const Center(child: Text(“This is Tab 2”)),
const Center(child: Text(“This is Tab 3”)),
],
),
bottomNavigationBar: const MyBottomNav(),
),
);
}
}
class MyBottomNav extends StatefulWidget {
const MyBottomNav({super.key});
@override
State createState() => _MyBottomNavState();
}
class _MyBottomNavState extends State {
int _selectedIndex = 0;
final List _pages = [“🏠 Home”, “⭐ Favorite”, “⚙️ Settings”];
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: (index) {
setState(() {
_selectedIndex = index;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(“You selected: ${_pages[index]}”)),
);
});
},
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: “Home”),
BottomNavigationBarItem(icon: Icon(Icons.star), label: “Favorite”),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: “Settings”),
],
);
}
}
Kesimpulan
Berdasarkan hasil praktikum yang telah dilakukan, dapat disimpulkan bahwa Navigation dan Routing merupakan komponen fundamental dalam pengembangan aplikasi Flutter. Melalui penerapan multiple screen, aplikasi dapat berpindah antar halaman dengan lancar, baik menggunakan metode Navigator push/pop maupun Named Routes.
Selain itu, proses pengiriman dan penerimaan data antar halaman berhasil diimplementasikan menggunakan konstruktor dan argumen pada named routes. Tugas tambahan berupa pembuatan halaman Login dan Home juga memperlihatkan bagaimana data dari pengguna dapat ditransfer dan ditampilkan kembali di halaman lain menggunakan stateful widget dan navigator.
Dengan demikian, praktikum ini memberikan pemahaman menyeluruh tentang bagaimana sistem navigasi bekerja dalam Flutter serta bagaimana mengatur alur perpindahan data antar halaman, yang menjadi dasar penting dalam pengembangan aplikasi mobile berskala besar.
cllick
