This is Part 8 in the series where I’ll cover all the Flutter widgets that are in this YouTube playlist. I have created my own widget guide which I believe will help people who are new in this space. Please have a look at this GitHub project to explore all the amazing widgets.
Click here to ⏬ the App available on Google Play Store. 📱
My main motive behind this series is to keep things to the point. Your time is precious, let’s not waste it and get started.
Do you ever feel a need to have some kind of a UI element, that attracts user attention so that they can perform the primary task your app has to offer. Let’s take for example that you have a note taking app. The primary task is to write notes and save them in the app. Where do you feel is the best position to place the “add note” option on the screen? One option is to have it on your app bar as a menu option visible at all times. Sure, but it is not accessible as it is on the top corner. Other options are to keep it in a navigation drawer or on the screen as a card but all of these does not sound like places to keep a primary action.
Flutter has a widget to take care of this problem.
1 | What?
FAB as a UI component hovers over your screen to let your users access an important part of your application or perform some kind of an important task. Take for example the Gmail Android app. There you’ll see how the FAB is visible on the screen at all times, letting the user perform the primary action that a user can perform in an e-mail app, i.e. compose an email.
AB (floating action button) is one of my favorite widgets to use. Let’s see how you can add it in your project.
2 | Wondering how it works?
Have a look at the Code snippet below.
Below is the visual representation of the code above.
3 | Explanation
In this article, you’ll be learning about Radio Widget as well. In the above example, we have several radio buttons on the screen to control the FAB size and its position relative to the BottomAppBar Widget. Let’s see how it all works.
First, we have to understand how the Radio widget works. We have a class by the name of _OptionItem that is a StateLess widget. You pass in 4 values to it namely value (the value a radio button holds), groupValue (currently selected value for a group of radio buttons), onChanged (a method called when a radio button is selected, you update the groupValue here) and a title (text to be displayed next to the radio button). When the value and the groupValue are same for a radio button then that button is marked as selected.
Here, let’s look into the group of radio buttons that change FAB’s position. The value is different for every Radio widget, the groupValue here is the current FAB position, the method that we want to call when you click on a Radio widget is _onLocationChanged which updates the groupValue to the selected value.
Observe how the fab location changes and how the bottom app bar adjusts itself as the location is changing. The notch shape between the FAB and the app bar here is set to a default value — CircularNotchedRectangle(). You can create your notch shape as well.
Flutter Widget Guide — FadeTransition Widget in 5 mins or less.
This is Part 7 in the series where I’ll cover all the Flutter widgets that are in this YouTube playlist. I have created…
Up next 👇
How many claps does this article deserve?
If you find this article useful, please click the 👏 button and share to help others find it! Feel free to clap many times (10💥, 20💥 or maybe 50💥 ?) It fuels my focus to write more of it.
Feel free to leave a comment 💬 below and let me know if I can improve the way I write my posts (I am new to this 🙂) or if you find anything wrong in the code mentioned above. All kinds of suggestions will help me grow and improve.
Feeling like being awesome? Buy me a cup of coffee
⭐️ this repo to show some ❤️ and motivate me to work on the project 😃
Have a wonderful day 🙂