Home Flutter Membuat Bubble Bottom Bar di Flutter

Membuat Bubble Bottom Bar di Flutter

0

Halo teman-teman

Pada artikel kali ini kita akan memcoba membuat bubbule bootm bar di flutter menggunakan package bubble_bottom_bar.

Cara membuat bubble bottom bar :

  • Buat Project baru dengan nama bubble_buttom
  • Tambahkan package bubble_bottom_bar di pubspec.yaml

jalankan pub get jika dibutuhkan

$ flutter pub get

  • Import package bubble_bottom_bar
  •  Gunakan BubbleBottomBar widget pada properti bottomNavigationBar yang terdapat di Scaffold widget.

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 {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        alignment: Alignment.center,
        color: Colors.red[100],
        child: Text('Home Screen'),
      ),
    );
  }
}

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

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

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

berikut ini tampilannya:

Tampilan Bubble_bottom_bar di flutter

sekian artikel untuk kali ini, sampai jumpa di artikel selanjutnya, selamat mencoba..