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.
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.