How to solve/aproach this in Flutter - flutter

I want to build the home page of a Flutter app as seen in the picture link below. It has a circular progress bar and list of dates of the month and then widgets below the Dates widget to record vitals and move to start exercise page.
The issue here is that, I want each of the Date to have a separate percentage circular bar and a separate start exercise widget and record vitals widget.
To explain further, If user clicks on 25Monday, the percentage bar and start exercise bar will show and it will only be for 25thMonday. If user clicks on the next day, a separate percentage bar and start exercise widget will display. This will allow tracking of user's progress in that if user clicks the previous day button, the progress percentage can be 25% and if user clicks today's button, the progress circular bar will show percentage for today.
Here is the picture of the app I want to build

Related

I would like to create a scrollable date buttons with widget shown on toggle in flutter

Please how do I create an app that has days of the month at the top and each of the month will have a separate page but the pages are conditionally shown. The days of the months will be used as buttons and when a button is clicked the widget corresponding to the button will be shown.
I have added a picture of an app describing what I would like to achieve.
The buttons will be inside a scrollable widget and are numbered from 1-31/30 depending on the month we are in.
Each day will be created as button so that onclick, it should display a corresponding widget accordingly.
What I want to achieve is that the day buttons should be all together in horizontal view while the widgets will be below but only the widget corresponding to the day will show.
Currenty I have been able to create a column of day button and it corresponding widget showing below it and other buttons are scattered but what I want to achieve is a scrollable separate buttons at the top and widgets changing below.
I would be glad if there is good approach to achieving this.
Here is the an example of what I want to achieve

How To Prevent Navigation Loops In Flutter

In my application I have 13 screens in total, some of them has links to other screens, I also have a drawer that has links to most of these screens.
The following image shows the only navigation flow that I want in the app:
as you can see the only screens that have links to other screens are the home, warehouses and close expiry screens. But because the drawer exists in every screen I now can navigate from warehouses to products then warehouses then products and so on, or from close expiry to warehouses to products to home to close expiry until the end of time.
what I want is this: whenever the user navigates to one of the home screen direct links, the screens stack should only contain the home screen and the navigated to screen with it's descendants.
In other words, I want to make sure the the screens stack has only one instance of any screen in the app. I don't want loops, and I also don't want to get rid of the drawer.
Is there any way to achieve that?
Thanks in advance.
The only way that I've found is to always navigate to the home screen before going to any other screen, this way we can achieve exactly what is asked in the question

Refresh Flutter App bar with out page refresh

I try to create a flutter application UI with the App bar and Bottom sheet. I want to update the app bar item count according to the bottom sheet values. Is there any way to do this?
I want to do it without refresh the page.

How to make a Profile picture inside a sliverappbar that expands in flutter

I need a sort of Avatar photo widget that when I scroll down it transforms into a circle having the user name next to it and when I scroll back up, it becomes big and shows the user name under it, just like older versions of the Samsung contacts app.

How to navigate through inherited widget pages with an app bar

Hi I’m a beginner in flutter and I have an app that have a tab bar view and one of the pages have a bottom notched app bar it have children:-a floating action button and other two material buttons,the floating action button navigates to a page with a form and when the form is filled I want it to navigate to the first material button page and the form has a counter so the form will only stay at the first material button page only until the counter is zero then it will be moved to the second material app button page.And I want this process to loop as long as the user create the form and if there is no created form I want the first material button page to display something like you don’t have anything yet.Please help it would mean a lot