My Introduction To Flutter
TLDR: This is just a little synopsis based on my
experience using flutter to make my first app. The app is a simple GUI for a data monitoring
API that I had previously developed.
Before I had thought about flutter and how amazing it is I had gone head first into React with a huge amount of work to do for a group project and little time to do it. I learnt quite a lot about how to use React and slap together things found in online examples but I never really understood some of the core mechanics and I definitely had no idea about state management. Instead of continuing with React I wanted to give flutter a go. The main advantage of write once and deploy to android and ios was a huge incentive for me. Apart from my minimal React experience I had done no mobile app development and I thought it'd be interesting to dive into that side of software development since the type of design challenges are very different to what I had previously done.
This app acts as a dashboard for myself to monitor various things that I usually monitor through terminals on my desktop. The first thing I wanted to monitor was the list of people currently hosting web apps on the NUIG college server (danu7). I already had a script to do this but it was just a simple golang script with cli interface and was obviously inaccessible from anywhere other than the terminal. Also running on danu7 was my news article web scraping script. I had this running on a cronjob daily for a good few months now and I'd occasionally check it when I remembered every few days to make sure that the error log wasn't full of error messages and that the most recent articles were saving correctly. After quickly throwing together a quick and simple golang API I had the data that I wanted to monitor and the means to access it through HTTP requests in an app and was ready to dive right into flutter.
After finding a nice UI tutorial on youtube I had the design but functionality behind it. The work that I had done with React involved a lot of making requests to get data to then build components with so the basic idea behind using the ListView in flutter was no stranger to me.
As you can see retrieving the data from the API is very simple and I never had any trouble with it.
The json.decode() does most of the heavy lifting in converting the JSON response into a List which is
usable in flutter.
However when writing the logic behind the screen selector I ran into a situation where a good state management solution was needed. As shown above in the rough diagram of my widget tree I had the selected screen being kept in the stateful screen selector widget. This was fine if no other widget needed to access this but this isn't the case. The content of the current screen is based off which one of these three options is selected. Therefore I needed a way to efficiently share this variable to the the current page widget which then rendered the correct content.
In the end I went with provider. It gives a simple and intuitive solution to state management. At the root of my widget tree I set the widget as a ChangeNotifierProvider of type CategoryProvider which is it's own class that notifiers any registered listeners when the user selects a different page to load. This is minimal and lightweight as only the registered listeners act when they are notified of a change and avoids the hell that is trying to share states between items in the widget tree by passing the state variables up and down to reach where they're needed.
Before I had thought about flutter and how amazing it is I had gone head first into React with a huge amount of work to do for a group project and little time to do it. I learnt quite a lot about how to use React and slap together things found in online examples but I never really understood some of the core mechanics and I definitely had no idea about state management. Instead of continuing with React I wanted to give flutter a go. The main advantage of write once and deploy to android and ios was a huge incentive for me. Apart from my minimal React experience I had done no mobile app development and I thought it'd be interesting to dive into that side of software development since the type of design challenges are very different to what I had previously done.
This app acts as a dashboard for myself to monitor various things that I usually monitor through terminals on my desktop. The first thing I wanted to monitor was the list of people currently hosting web apps on the NUIG college server (danu7). I already had a script to do this but it was just a simple golang script with cli interface and was obviously inaccessible from anywhere other than the terminal. Also running on danu7 was my news article web scraping script. I had this running on a cronjob daily for a good few months now and I'd occasionally check it when I remembered every few days to make sure that the error log wasn't full of error messages and that the most recent articles were saving correctly. After quickly throwing together a quick and simple golang API I had the data that I wanted to monitor and the means to access it through HTTP requests in an app and was ready to dive right into flutter.
After finding a nice UI tutorial on youtube I had the design but functionality behind it. The work that I had done with React involved a lot of making requests to get data to then build components with so the basic idea behind using the ListView in flutter was no stranger to me.
However when writing the logic behind the screen selector I ran into a situation where a good state management solution was needed. As shown above in the rough diagram of my widget tree I had the selected screen being kept in the stateful screen selector widget. This was fine if no other widget needed to access this but this isn't the case. The content of the current screen is based off which one of these three options is selected. Therefore I needed a way to efficiently share this variable to the the current page widget which then rendered the correct content.
In the end I went with provider. It gives a simple and intuitive solution to state management. At the root of my widget tree I set the widget as a ChangeNotifierProvider of type CategoryProvider which is it's own class that notifiers any registered listeners when the user selects a different page to load. This is minimal and lightweight as only the registered listeners act when they are notified of a change and avoids the hell that is trying to share states between items in the widget tree by passing the state variables up and down to reach where they're needed.