Journey from Scratch till Play Store — The Holy Qur’an | Flutter App
I’ve already written an article explaining the basis of this app which you can read here. Since then, I’ve added few more features to this app as a lot of people were asking me to upload this on play store. If you are popping up on this article first then just few things that I want to highlight here:
- This app Follows MVC Architecture
- Data is being fetched from APIs
- No State Management is used
- v 1.0.0 is Open Source
- Play Store
Let the story begin…!
Once upon a time there was a boy and he was very fond of mobile de… Hahaha just kidding I know I sucks in story telling so without wasting time let’s jump to the actual point. I wanted to learn jSON data parsing and stuff regarding APIs and https request. So, I was searching to develop an app using complex jSON data. I’ve already worked with COVID19 Tracker app but it was quite simple. One of my friends shared an API of Holy Quran. Hence, the journey begins with a simple idea of developing an app that let’s people read the Qur’an digitally.
Features — Latest Version V 1.0.0
- Easy Navigations — You can simply open up any Surah, Sajda or Juzz directly from their indexes.
- Fancy and Beautiful UI — The UI design and color combination of this app is a little different from trendy Qur’an apps.
- Surah/Sajda Information — By long pressing any Sajda or Surah index will show you brief information i.e. juz number, number of ayahs, meaning of surah etc.
- 3D Drawer Animation — It’s technically not a feature but I tried to make the look a little different.
Animation may cause some issues on wider screen phone or android pie. Similarly, there other bugs as well. But I guess as a beginner it’s not a big deal😢
Anyways, I’ll update it soon.
Features in Future — V 1.1.0
- Offline Reading Mode — I will use PDF or localize the data
- Bookmark
- Search — As it is my first app 😜. I skipped it without any reason. Although, I knew this can be developed with dynamic APIs.
- Resume Reading — A user can resume from where he/she left reading.
Previous Version
Earlier, this app only had Surah and Sajda index as major data portions.
Previously, the drawer holds meta data information about Qur’an like Number of Juzs, Surahs, Ayahs, Sajdas, Ruku etc. And as always, my picture in the bottom in which I’m just looking at some pigeons in the sky. The hell if I know why??!! 😆
Final Version
You’ve already gone through the features I’ve added in latest version. I’m just going to add those which are newer.
So, this version holds:
- Juzz Index — All the 30 Juz from Qur’an were added.
- Surah/Sajda Info — By long pressing any surah or sajda you can view brief information about it.
- Drawer Updated — I add few other options in drawer list and removed the meta data information.
- Introduction — Added on boarding screens acting as little intro to this app.
- Help Guide — Help tab for explaining full features and usage of this app.
- Share app — Share tab holding, GitHub repo, app link and rate button to play store.
So, the combo was really cool!!
What I Learned during this development?
jSON Data parsing
As I’ve mentioned earlier that I wanted to learn jSON data parsing so that’s first in the list. And I used a lot of resources but this article is the top notch help.
3D Drawer Animation
Apart from this, I implemented the 3D animation in drawer and although I followed my favorite Flutter Developer and I had all the code but implementing it in a real app with responsiveness was a little challenging for me.
App Performance
Another thing I implemented in my app is a proper fashion for coding in flutter. Earlier, I simply start writing code and I keep on inserting widgets in widgets and hell of nesting, alongside animations and the code is like 400 to 500 lines long and it becomes real pain when I myself need to find some piece of code in it.
So, this time I managed my app very properly. Extracted out widgets for code reusability and also little effort on performance when it comes to using animations. For that, I used AnimatedBuilder for the first time which only rebuilds the widgets inside it not the whole screen, hence, leading to better performance.
Share Option
I implemented the Share feature in my app for the first time. I used share package. One important thing for you all who are looking forward to use this package. Make sure to rebuild you app after implementing the code otherwise it will keep on giving errors and exceptions and your hope for applying this will start fading away with every error you get.
Rate & Feedback via Play Store
This is very simple stuff, but since I learned this so I need to mention it. By pressing the Rate & Feedback button you will be redirected to the app in google play store. I used another package launch_review that let’s you open your app on play store or apple store very easily.
Feels more like bunch of packages rather than app.
Banner Designing
I learned a lot of stuff while using Adobe XD like use of pen tool, opacity and making little shades in your design and making it a little attractive. Although, I’ve been using Adobe XD for every design I made, however, here I’m sure there are some skills++ in my designing :). I’m not a designer so for me Adobe XD does the job.
Uploading app on Play Store
Last but not the least, It was a whole new experience of making an app live on play store. I was very excited that its my first app and it is available across the globe. Any one can access it and use it, obviously which requires internet connection 😅
Finally, here we are…!
In the end, few words from my side ahmm ahmm ahmm…!
“If you ask me the ultimate resource or guide to follow, everything is welcome along with these two things:
Practice & Consistency
It’s for all of those people who asks, how to become good at development. Last thing, I’m really grateful to Waleed Arshad who pinged me to learn APIs & jSON data ❤ Apart from this there’s nothing very special but yet my feelings are like…”
Thanks Y’ all & #HappyFluttering 💙
Let’s connect @m_hamzashakeel or @m-hamzashakeel
