Flutter app development is nothing new to us. We’ve already built a few flutter apps. As a result, we have seen how we can use different types of flutter features.
Now we are going to build a Flutter app that will check our expenses first. Next, we will compare them according to the dates.
Firstly, we will learn different types of material designs, custom theme, and Widgets. It consists the bottom sheet material design component.
Secondly, while building the app, we will learn how Mapping data to widgets takes place. In addition, how we can format the date.
Finally, the app will teach us the way to add bars to the chart that changes with the volume of expenses.
Let us see how it looks initially.
We can add our expenses in two ways. Either we can use the floating action button. Or we can use the plus sign on the app bar.
What is Modal Bottom Sheet?
When we press any one of the buttons, it will open the Modal Bottom Sheet.
What is a Modal Bottom Sheet?
The Modal Bottom Sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app.
Moreover, it will appear over the UI. As a result, we don’t need to navigate to a different page. For performing a small task it’s fine.
Why?
Because it does not require the whole new screen to be built.
Now we can choose any date. And as an outcome, the Material Design date picker opens up a calendar as a dialog.
But before that we need to add some items.
Next, we can click the “Choose Date” button. It shows a dialog containing a Material Design date picker.
It sets to the current date.
While building this app, we will take a close look at these flutter functions.
We’ll also learn how we can add the business logic to our app.
Depending on this business logic, our app will keep adding the items and the chart bar will keep showing the items.
As the above image shows, the expense checker app have dealt with different types components at the same time.
In the next section, we will see the first step.
Leave a Reply