Tujuan
Tujuan praktikum ini yaitu mahasiswa mampu menguasai konsep Navigation dan Routing pada Flutter :
- Membuat aplikasi yang dapat berpindah dari halaman satu ke halaman lain
- Membuat aplikasi yang dapat mengirim dan menerima data dari halaman lain
Teori
Navigation dan Routing Flutter
Navigation atau Navigasi merupakan sebuah proses berpindah dari satu halaman (screen/page) ke halaman lain dalam sebuah aplikasi flutter, misalkan perpindahan dari halaman login aplikasi ke halaman utama aplikasi ketika tombol login ditekan atau proses perpindahan dari halaman produk ke halaman detail produk dan proses kembalinya dari halaman detail produk ke halaman produk. Navigasi pada flutter menggunakan widget Navigator yang mana bekerja menggunakan konsep tumpukan (stack), Gambar berkut ini merupakan konsep dasar navigasi pada flutter.
Routing atau Rute adalah sebuah sistem yang digunakan untuk mendefinisikan dan mengelola routes dalam aplikasi, setiap route didefinisikan sehingga Ketika akan memanggil halaman cukup dengan memanggil nama route tersebut, hal ini mempermudah dalam mengelola route tanpa harus membuat instance baru setiap kali akan memanggil suatu halaman.
Jenis Routing pada Flutter
- Navigator (Anonymous Routes)
- Named Routes
- Generated Routes
- Router / Navigator 2.0
Widget Navigation menampilkan halaman dengan konsep tumpukan menggunakan animasi transisi Ketika berpindah ke halaman, untuk berpindah ke halaman baru diakses melalui BuildContext dengan memanggil method seperti push() atau pop() secara langsung.
Named Routes atau Rute Bernama mengelola route pada widget MateriapApp atau CupertinoApp kemudian memanggilnya berdasarkan nama yang telah diberikan, berikut contoh penggunaan named routes pada Flutter.
Generated Routes yang sebuah mekanisme mengelola routes dengan mengirimkan paremeter dan handle error.
Mekanisme pengelolaan routes ini digunakan jika aplikasi yang membutuhkan route yang komplek, biasanya digunakan Ketika membuat aplikasi web pada flutter.
Jenis Method Navigation
- Push dan Pop : Menambahkan halaman baru dan kembali ke halaman sebelumnya
- Push Replacement : Mengganti halaman saat ini dengan halaman baru
- Push and Remove Until : Menghapus semua halaman sebelumnya
Mengirim dan Menerima data
- Mengirim data
- Dengan constructor
- Dengan named routes dan arguments
- Menerima data
- Dengan Constructor
- Menggunakan ModalRoute.of(context)
Langkah-Langkah
Multiple Screen
- Buat file dart baru
- Buat class menggunakan stateless widget dengan nama MyNav
- Inisialisasi route pada MaterialApp
- Buat class Product dan Product Detail
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'),
),
),
);
}
}
Mengirim dan Menerima Data
- Buat file dart baru
- Inisialisasi route pada MaterialApp
- Buat class baru Homepage, MyProfile, MyProduct
- Pada class Homepage, pindah ke halaman MyProfile dengan mengirimkan data ID dan Name ketika diklik tombol Profile melalui constructor
- Menerima dan menampilkan data dari HomePage pada MyProfile
- Pada class Hompage, pindah ke halaman MyProduct dengan mengirimkan data ID dan Name Ketika diklik tombol Product menggunakan named routes
- Menerima dan menampilkan datadari HomePage pada MyProduct
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 HomePage(),
'/product': (context) => const MyProduct(),
},
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
const MyProfile(id: 1, name: 'Ahda'),
),
);
},
child: const Text('Profile'),
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(
context,
'/product',
arguments: {'id': 101, 'name': 'Laptop'});
},
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<String, dynamic>?;
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
- Buatlah halaman login dan halaman utama, kemudian inputkan username dan password, Ketika diklik login akan berpindah ke halaman utama dengan mengirimkan data username dan password, tampilkan data tersebut pada halaman utama.
- Beberapa widget flutter telah menggunakan Konsep navigation dan routing seperti Tabs, Bottom Navigation Bar dan Drawer. Berikan contoh penerapan salah satu dari ketiga widget tersebut
- main.dart
import 'package:flutter/material.dart';
import 'login_page.dart';
import 'home_main.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: '/',
routes: {
'/': (context) => const LoginPage(),
'/home': (context) => const HomeMain(),
},
);
}
}import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
const LoginPage({super.key});
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
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',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16),
TextField(
controller: _passwordController,
obscureText: true,
decoration: const InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 24),
ElevatedButton(
onPressed: () {
final username = _usernameController.text;
final password = _passwordController.text;
// Pindah ke halaman home dengan mengirim data
Navigator.pushNamed(
context,
'/home',
arguments: {
'username': username,
'password': password,
},
);
},
child: const Text('Login'),
),
],
),
),
);
}
}import 'package:flutter/material.dart';
class HomeMain extends StatefulWidget {
const HomeMain({super.key});
@override
State<HomeMain> createState() => _HomeMainState();
}
class _HomeMainState extends State<HomeMain> {
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
final args =
ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>?;
final username = args?['username'] ?? 'Guest';
final password = args?['password'] ?? '-';
// Isi konten setiap tab
final List<Widget> _pages = [
Center(child: Text('Selamat datang, $username!', style: const TextStyle(fontSize: 18))),
Center(child: Text('Password kamu: $password', style: const TextStyle(fontSize: 18))),
const Center(child: Text('Halaman Setting', style: TextStyle(fontSize: 18))),
];
return Scaffold(
appBar: AppBar(title: const Text('Halaman Utama')),
body: _pages[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.lock), label: 'Password'),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
],
),
);
}
}
Tinggalkan Komentar
Komentar
Belum ada komentar.