Tutorial Membuat Bubble Bottom Bar di Flutter

Jika sebelumnya kita pernah membahas cara membuat bottom appbar keren mengggunakan convex, pada tutorial kali ini kita akan coba membuat bubble bottom bar di flutter menggunakan package bubble_bottom_bar. Seperti apa tampilan dari navigasi bubble bottom bar ? berikut contoh tampilannya :

Package : https://pub.dev/packages/bubble_bottom_bar

Saat artikel ini dibuat versi terbaru di 1.2.0, Jika terdapat versi terbaru maka silahkan gunakan versi terbaru tersebut untuk pengalaman yang lebih baik.

Cara membuat bubble bottom bar :

1. Buat project baru

$ flutter create belajar_flutter

2. Tambahkan package bubble_bottom_bar di pubspec.yaml

dependencies:
  bubble_bottom_bar: ^1.2.0

jalankan pub get jika dibutuhkan

$ flutter pub get

3. Import package bubble_bottom_bar

...
import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';
...

4. gunakan BubbleBottomBar widget pada properti bottomNavigationBar yang terdapat di Scaffold widget.

return Scaffold(
  appBar: ...,
  body: ...,
  bottomNavigationBar: BubbleBottomBar(
    opacity: .2,
    currentIndex: 0,
    onTap: (_) => {},
    items: <BubbleBottomBarItem>[
      BubbleBottomBarItem(
        backgroundColor: Colors.red,
        icon: Icon(
          Icons.dashboard,
          color: Colors.black,
        ),
        activeIcon: Icon(
          Icons.dashboard,
          color: Colors.red,
        ),
        title: Text("Home"),
      ),
...

currentIndex berguna untuk menentukan posisi navigasi yang sedang aktif. Agar nilai tersebut dapat berubah saat di tap maka kita harus menggunakan statefull widget dan membuat fungsi untuk mengupdate state. Contoh penggunaan lengkapnya seperti dibawah ini

main.dart

import 'package:flutter/material.dart';
import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';

import 'screen.dart';

void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int currentIndex;
  @override
  void initState() {
    super.initState();
    currentIndex = 0;
  }

  void changePage(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  Widget _getWidget() {
    if (currentIndex == 1) {
      return RiwayatScreen();
    } else if (currentIndex == 2) {
      return FolderScreen();
    } else if (currentIndex == 3) {
      return GalleryScreen();
    }
    return HomeScreen();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Belajar Bottom Navigasi'),
      ),
      body: _getWidget(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
        backgroundColor: Colors.red,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      bottomNavigationBar: BubbleBottomBar(
        hasNotch: true,
        fabLocation: BubbleBottomBarFabLocation.end,
        opacity: .2,
        currentIndex: currentIndex,
        onTap: changePage,
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(16),
        ), //border radius doesn't work when the notch is enabled.
        elevation: 8,
        items: <BubbleBottomBarItem>[
          BubbleBottomBarItem(
              backgroundColor: Colors.red,
              icon: Icon(
                Icons.dashboard,
                color: Colors.black,
              ),
              activeIcon: Icon(
                Icons.dashboard,
                color: Colors.red,
              ),
              title: Text("Home")),
          BubbleBottomBarItem(
              backgroundColor: Colors.deepPurple,
              icon: Icon(
                Icons.access_time,
                color: Colors.black,
              ),
              activeIcon: Icon(
                Icons.access_time,
                color: Colors.deepPurple,
              ),
              title: Text("Riwayat")),
          BubbleBottomBarItem(
              backgroundColor: Colors.orange,
              icon: Icon(
                Icons.folder_open,
                color: Colors.black,
              ),
              activeIcon: Icon(
                Icons.folder_open,
                color: Colors.orange,
              ),
              title: Text("Folders")),
          BubbleBottomBarItem(
              backgroundColor: Colors.green,
              icon: Icon(
                Icons.image,
                color: Colors.black,
              ),
              activeIcon: Icon(
                Icons.image,
                color: Colors.green,
              ),
              title: Text("Gallery"))
        ],
      ),
    );
  }
}

Untuk screen-nya, disini kita pisahkan pada file yang bernama screen.dart

screen.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        alignment: Alignment.center,
        color: Colors.red[100],
        child: Text('Home Screen'),
      ),
    );
  }
}

class RiwayatScreen extends StatelessWidget {
  const RiwayatScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        alignment: Alignment.center,
        color: Colors.deepPurple[100],
        child: Text('Riwayat Screen'),
      ),
    );
  }
}

class FolderScreen extends StatelessWidget {
  const FolderScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        alignment: Alignment.center,
        color: Colors.orange,
        child: Text('Folders Screen'),
      ),
    );
  }
}

class GalleryScreen extends StatelessWidget {
  const GalleryScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        alignment: Alignment.center,
        color: Colors.green[200],
        child: Text('Gallery Screen'),
      ),
    );
  }
}

5. Selesai.. silahkan coba refresh projek flutter anda.

Penutupan

Seperti halnya library lain, bubble_bottom_bar juga memiliki keterbatasan seperti posisi FloatingActionButton docked yang hanya support di posisi center dan end saja. Namun dengan mengetahui lebih banyak informasi package pada pub.dev seperti package bubble_bottom_bar ini tentu sangat membantu baik untuk sekedar inspirasi maupun untuk mempermudah pengerjaan projek.

Selamat mencoba 🙂