Build a Custom Bottom Navigation Bar in Flutter with Animated Icons from Rive

Today I will show you how to build this custom bottom navigation bar in Flutter with animated icons from Rive.

Preview of BottomNavigationBar with Animated Icons

Also created a video tutorial 🎬, Build Custom Bottom Nav in Flutter with Animated icons

Project Setup 🛠️

We begin our journey with an empty Flutter project, create an assets directory. The first step involves downloading animated icons from the Rive community. Then rename the file to animated-icons.riv and add it to the assets folder. It’s crucial to ensure that this file is correctly referenced under assets in the pubspec.yaml. The last step is add the Rive package in your project.

RiveModel

Let’s create a model called RiveModel with: src, artboard, and stateMachineName.

class RiveModel {
  final String src, artboard, stateMachineName;

  RiveModel({
    required this.src,
    required this.artboard,
    required this.stateMachineName,
  });
}

Now you may think, what exactly are artboard and stateMachineName? Let’s back to the animated icons. When you click the remix button, it’s like seeing the blueprint.