myGarden FLUTTER APPLICATION
Today, I want to share details about basic flower tracking appalication with some features and its code.
The purpose of this article is to develop a Flutter app. The app should facilitate the basic requirements given in the project description and some more.
- Extensive User Interfaces
- Contain an “input” screen where the user has to enter data
- Include a list (with an underlying SELECT)
- INSERT, UPDATE, SELECT, DELETE on the database
- With list screen, input screen, extra screen (e.g. splash)
- Flutter features- screen, tabs, multi-row lists, linking to the camera, linking to a network, animations, preferences, etc.
Okay, enough of the talk, let’s get to work!
The myGarden application is flower tracking and learner application. The users of the application can keep track of their flowers and learn about them by saving the flower images and details in the firestore database. The myGarden application is capable of the following features. The main screen of the application is for a list view of the existing flowers. This view is ordered by the time of flower entry is uploaded. Also, the user is able to search the flowers by keywords.
This new flower entry can upload the flower image either directly captured from the camera or selected from the mobile phone gallery, the Flower name, and a description of the flower. The application is able to update existing flower entries anytime. All the fields can be updated even the flower image. And all the fields in flower insert and update are validated to omit the null values and improve the user-friendliness. The user can delete the existing flower entry from the application by selecting. Apart from the main feature’s application is added with a custom animated splash screen and about page.
FEATURE DESCRIPTION & USER INTERFACES
This section of the report is demonstrating the features and user interaction areas of the myGarden application.
Based on the requirement given for the app,
“As a Learn a flower app users I need to see a list of flowers, and by selecting one I need to see more details on the flower”
following features were finalized to develop the myGarden application.
1.1 Main Features.
As the main features of the myGarden application, the following features were developed.
1.1.1 Flower Home
This is the main User interface of the myGarden application this UI mainly displays the existing flowers of the firestore database to the user as a thumbnail list view. Each flower entry displayed in this UI is ordered by the time they are uploaded to the firestore. The Flower name, the description can be seen on top of the flower image and the uploaded time can be seen on the right. The time ago feature was implemented to represent the upload time of each flower entry. The user can scroll up and down to see the full list.
In this UI top bar (App bar) is a custom build section that was including the application title also the search feature. When the user touches on the magnifier icon the app bar will transform to the search bar.
Also, the bottom of the main UI has a floating button to insert the new flower entries to the firestore. When the user is touching the floating increment button, UI will navigate to the Add flower UI for new flower adding.
1.1.2 Search Flower
In this screen, the user is able to search a specific flower or a group by keywords. The search is implemented as on keypress search. When the insert single character, the underline select query will update to increase the useability and user-friendliness. All the flower names that match the search pattern will filter and display on this view. Users can clear the search by touching the magnifier icon and get back to the main screen.
1.1.3 Adding New Flower
Adding the new flower to the firestore can be archived with this UI. This interface requires 3 information to add the new flower entry to the firestore.
1. Flower image
2. Flower name
3. Flower description
The flower image can be selected using the blue color camera floating button on top of the app logo. That will browse the mobile phone internal gallery and select an image. Soon as the image was selected, that will display instead of the app log in this screen.
The flower name and the description can be given to the text field given after the image display container. All the fields in this UI are validated with a null check. The user has to fill all the fields and select an image to insert the desired flower entry to the firestore database.
After filling all the fields user can insert the new flower entry to the firesotre. The flower image will store in the firebase database and the URL of the uploaded image will store in the firestore along with the flower entry. After successful insertion user will notify as the new flower is added with a custom notification dialog message.
After the user confirms the dialog, myGarden application will redirect to Main UI and update the displaying list with the newly added flower entry on top of it.
1.1.4 View flower.
Selecting a single flower entry from the main UI will redirect to the view flower screen. In this UI, the user is able to see the specific flower in a more detailed view. A full flower image will display on this screen. Apart from the viewing, this screen is also used to update and delete the selected flower. Top bar back navigation will redirect the user back to the main screen from the flower view screen.
1.1.5 Update flower.
The selected flower updates can be done through the flower view screen. The user can change the flower image, flower name, and flower description on this screen. The flower image can be changed by touching the floating camera button on the existing image and browse the new image from the gallery or camera. After the changes are made, the user can save the flower by touching the bottom save button. Same as in the add flower screen, this update was also validated. After all the required fields were there, the user can update the flower and when the update is successful, the app will notify the user with a custom notification dialog.
1.1.6 Delete flower.
Same as the update, flower deletion can be done in the flower view screen of the selected flower. Users can delete the flower using the top right corner trash bin button. When the fower is deleted successfully, the app will notify the user with a custom confirmation dialog.
After the user confirms, the app will be redirected to the main screen of the list of flowers. As flower add, flower view and flower update.
1.2 Other Features.
Apart from the main features of the myGarden application requirement, I have implemented few other features to increase the usability and user-friendliness of the application as follows.
1.2.1 Splash screen.
When the user loads the myGarden application this custom animated splash screen will load. Then the app is loaded, the main screen will appear with the Curved Animation (curve: Curves.elasticInOut ) transmission.
1.2.2 Custom Animated AppBar.
This is the normal app bar when the application is loaded to the main screen. In this, I build a dynamic custom app bar for getting user-friendliness.
This custom app bar has 4 sections.
1. Logo — display the app log
2. Title — Application title
3. Search button — to change the app bar in to search bar
4. App bar navigation — navigate to the profile/about page and log out from the application.
When the user touch on the magnifier icon app bar will transform into the search bar. then the user can search specific flowers using this search bar. After again touch on the magnifier icon, the search bar will transform back into the normal app bar.
Also, the profile and logout navigation buttons will appear after the user touch on the 4th section of the app bar. Using that user can navigate to the Profile view and call the logout function of the application.
1.2.3 Custom Animated Notification Dialog Box.
Instead of using default popup notification, for myGarden application, I have created custom notification dialogs for the following events.
· Flower Add confirmation notification
· Flower Add/Update input form validations
1.2.4 Static Profile/About Screen.
This static profile screen was developed as an about page of the application.
1.2.5 Linking to Gallery Camera
This feature provides users to upload flower images in the phone gallery. The Camera image is loaded from the internet to the add image user interface. The icon works as an icon button, which works when pressed. When the icon is pressed it will request permission to access the gallery of the phone. Then the gallery of the phone will be loaded. From gallery, any image can be upload.
1.2.6 Linking to network
Connecting to firebase through linking to the network.
I hope you found this article useful!
You can find my own code on Here.
If you have any queries regarding this tutorial, feel free to comment out in the comment section below or contact me.
