Learning Mobile Development
The most common question asked when I was doing research on building a mobile application is whether to build it native or use a framework (like a wrapper of a certain language) to make a cross-platform application.
In the midst of trying out the two cross-platform options, it was a whole mess of frustration and searching for answers just to get started. Let me explain what I faced for each platform,
Was so much more straight forward, I've always liked how Google writes its documentation of getting started. To me that's the gold standard of writing documentation, Installing was quick and easy. The only problem was having to read through how to get started and experiment on building the widgets. The experience was so much better than React Native that I just stuck with Flutter and starting building and improving the widgets and familiarising with how it works. There's so many building blocks to it too and best of all, it builds really fast and is more compact in the size of the application.
So I started out building my app on flutter and although it wasn't a breeze at the start. Where I faced an issue using the material dart package with bottom navigation. Originally, I added a bottomNavigation bar for every screen created. However, doing so created a problem with the UI. Whenever I used to bottom navigation bar, it would create a new screen, and it looked like the entire screen was moving. From a UX perspective, it was an incorrect application and this took me 2 days to find out what exactly went wrong. Stackoverflow, google, and medium all the sources and keywords to find out about the issue.
Since it took me 2 days of research and plenty of reading, and I managed to resolve it in the end. As it turns out, the reason for this is that the material package by default does not have a persistent bottom navigation bar this is a default based on just the material UI way of doing things. There are a few options to resolve this,
- For bottom navigation, use the cupertino package.
- Use a different package,
- Handle the state of the Navigation Bar using the inbuilt states.
While I did manage to solve it by using the 2nd option, I still found that it didn't sit well with how I handled the state. using GetX to handle the state of my screens was something I had in mind, but was not successful in applying to it. So for now until I can figure out what is going on, it's the solution I have at the moment.
Finally, my current progress in building the app, it's still far off but the goal here is to get all the necessary UI components built first and get it working functionally before working on fine-tuning the design.