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

[Music] today I'll show you how to build this custom bottom navigation bar in FL with animated icons from right we are starting with an empty flter project that includes an assess directory inside the LI folder you'll find models in the main do D file we have bottom naap with animated icons which is currently a stateful wi it also up here mention the background color for the bottom navigation bar we are going to use reanimated icons from The Ripe Community you can easily download those I have already added it to our asset directory it's important to also mention them in pp. EML under asset lastly we need to add the right package which I have already done for us inside the models folder I have created r model which source artboard and state ma name but what exactly are artboard and state ma name let's back to our animated icons when you click remix button it's like seeing the blueprint you'll notice that each icon is named which is what we call artboard every artboard is linked to a state Mach here the name is timer interactivity also the state machine has two states ideal and active those states are key because they let us control the animation of the icon now let's back to our code and the most fun part the nav item model includes two keyers title and R High R refer to a r model and the bottom nav item that holds all the item for our bottom navigation bar let's back to the bottom nap with animated icons and this is the preview of what we need to build for that we're not going to use the traditional bottom navigation bar wizard instead use container this container has a padding all around of 12 for its appearance we set the Box decoration color to bottom na B color with an opacity of 0.8 the container currently takes up all all the screen to address this we'll set the height to 56 just for now also to fix that issue will wrap the container in a safe area set the horizontal margin to 24 now to give it a rounded ages we we add a border radius of 24 to enhance the look further let's add a shadow we'll use the same bottom NAB B color but with reduced opacity of zero 0.3 the Shadows offset is x0 y 20 and also set a blow radius of 20 it looks perfect now now let's display the icons we do this using a row whose children are generated through least. generate the length is set to bottom na items. length with each icon having a height and width of 36 R animation. assess to Def The Source it initially display only one icons for all this happens because our file contains all the icons and we need to specify which one we want using output now perfect for better spacing between them set the main AIS alignment to space between you'll notice some icons are animating While others are right don't worry about it we'll address this very soon finally let's remove the fixed height from the container for better layout it's more efficient to create a variable Nam R icon this way instead of repeatedly using bottom nav items index. RVE we can simply refer to R icon to manage the animation we need to set up a controller during the on it stage let's define the state Machine controller then assign it using chome artboard here we need to pass the artboard and state machine name after that our next step is to attach this controller to the artboard now that we have our controller set up you might be wondering what exactly we are going to control with it let's head back to the r editor under inputs you'll find the active checkbox setting this active to True trigger the animation this is exactly what we'll use to control our animation to access that here we use the fine input however we need to mention the name of the input now let's create an empty list called RVE icon input We'll add our input to that list allowing us to access it from inure in our code finally and importantly let's wrap our size box with theer detector on tapping this will set the input status to true it working as expected but there's a small issue now all the icons are animating continuously each icon takes 1 second to complete its animation then it repeats so we'll stop the animation after 1 second using future. delayed and just like that the problem is solved let's tie the up our code a bit with some refactoring first we'll create a function name animate the icon this function will record an index as its parameter we'll take the relevant code from our on Tab method and place here now instead of having a long block of code we simply call animate the icon similarly for on init let's create a function called Ry on init we'll move the enter on init code into this function then in our on init we'll just reference r on init that makes our code much cleaner and more manageable take a look at this there's an animated bar on selected icon let's replicate that start by wrapping the size box with a column don't worry about it just set the main excess size to Mint and the problem is solved then add animated container above the icons set the duration to 200 milliseconds bottom margin to two height to four and width to 20 onbox decoration set the color and give it a border radius on all side of 12 next extract this into new wi it called animated bur and add a parameter is active if is active equal to true the width is 20 otherwise is zero for now we'll assume is active if the index is equal zero let's introduce a new variable selected now index on tapping an icon update selected NAB index using set apply this to animated bir so that the bir shows on top of selected icon also if the icon is not selected then the icon opacity is 0.5 with those changes it looks much better and behave as expected our bottom navigation will looks perfect now but there's one oversight we have defined controllers but Haven dispose of them let's fix that first we'll create a list of state Machine controller named controllers for now it's an empty list during the r on init process We'll add our controller to this list and make sure to dispose all those controllers when they are no longer needed now let's set our Pages we'll create a variable called pages and include listtop text those are chat search history notification and profile in the body of our app we'll use center with the text wi it to display those pages thank you so much for watching if you're interested in more FL animated videos feel free to check out this one I hope you'll find it just as helpful and enjoyable happy coding

Channel: The Flutter Way

Views: 9,222

Keywords: flutter, Android App, iOS app, mobile app, UI speed code, flutter app design, flutter responsive ui

Id: jq-GVjzezBQ

Length: 9min 38sec (578 seconds)

Published: Sun Jan 07 2024