Menerapkan Google Navigation Bar di Flutter untuk Navigasi yang Mudah

Mobile

Menerapkan Google Navigation Bar di Flutter untuk Navigasi yang Mudah

M. Dzikrul Hakim

August 1, 2023

Flutter adalah kerangka kerja pengembangan aplikasi seluler yang kuat dan populer. Untuk menciptakan navigasi yang intuitif dan menarik, Anda dapat menggunakan Google Navigation Bar, yang merupakan bagian dari paket google_nav_bar. Dalam artikel ini, kita akan membahas tentang Google Navigation Bar dan memberikan contoh penggunaannya dalam aplikasi Flutter.

Apa itu Google Navigation Bar?

Google Navigation Bar adalah komponen UI di Flutter yang meniru tata letak Google’s Bottom Navigation Bar yang populer. Ini menyediakan navigasi cepat dan mudah antara beberapa halaman di aplikasi Anda. Google Navigation Bar biasanya terdiri dari beberapa item (biasanya ikon) yang mewakili halaman-halaman yang berbeda. Pengguna dapat mengklik ikon untuk berpindah antara halaman-halaman tersebut.

Dengan menggunakan Google Navigation Bar, Anda dapat menciptakan antarmuka pengguna yang ramah pengguna dan membantu pengguna berpindah antara bagian-bagian penting dalam aplikasi dengan mudah.

Contoh Penggunaan Google Navigation Bar

Mari kita lihat contoh sederhana penggunaan Google Navigation Bar dalam aplikasi Flutter.

Pastikan Anda sudah menginstal Flutter dan sudah memiliki proyek Flutter yang sedang berjalan.
Buka file pubspec.yaml dan tambahkan pustaka google_nav_bar:

dependencies:
flutter:
sdk: flutter
google_nav_bar: ^5.0.6

Berikut adalah contoh codenya :

import ‘package:flutter/material.dart’;
import ‘package:flutter/src/widgets/framework.dart’;
import ‘package:flutter/src/widgets/placeholder.dart’;
import ‘package:google_nav_bar/google_nav_bar.dart’;

class ArtikelPage1 extends StatefulWidget {
const ArtikelPage1({super.key});

@override
State<ArtikelPage1> createState() => _ArtikelPage1State();
}

class _ArtikelPage1State extends State<ArtikelPage1> {
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
“Google Nav Bar”,
style: TextStyle(
fontSize: 18.0,
),
),
centerTitle: true,
),
body: Center(
child: Text(‘Page ${_selectedIndex + 1}’),
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(8.0),
child: GNav(
selectedIndex: _selectedIndex,
curve: Curves.easeOutExpo,
duration: Duration(milliseconds: 500),
tabBackgroundColor: Colors.grey[200]!,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
tabs: [
GButton(
icon: Icons.home,
text: ‘Home’,
),
GButton(
icon: Icons.logo_dev,
text: ‘Favorites’,
),
GButton(
icon: Icons.search,
text: ‘Search’,
),
GButton(
icon: Icons.person,
text: ‘Profile’,
),
],
onTabChange: (index) {
setState(() {
_selectedIndex = index;
});
},
),
),
);
}
}

Pada contoh di atas, kami menggunakan GoogleNavBar untuk membuat navigasi bawah yang terdiri dari empat item: “Home”, “Favorites”, “Search”, dan “Profile”. Setiap item memiliki ikon yang berbeda dari pustaka line_icons. Ketika pengguna memilih salah satu item, teks “Page” akan berubah sesuai dengan indeks item yang dipilih.

Berikut adalah renderan tampilanya :

Kesimpulan

Google Navigation Bar adalah komponen UI yang berguna di Flutter untuk menciptakan navigasi yang mudah dan intuitif di aplikasi Anda. Dalam artikel ini, kita telah melihat contoh sederhana tentang cara menggunakan Google Navigation Bar dalam aplikasi Flutter. Anda dapat menyesuaikan item dan tampilan secara lebih lanjut sesuai dengan kebutuhan proyek Anda untuk menciptakan navigasi yang sesuai dengan desain aplikasi Anda dan menyediakan pengalaman pengguna yang lebih baik.