The dreaded step is always installing an SDK just for experimenting… but here we go.
Installation Link: https://flutter.dev/docs/get-started/install
I needed to fix some installation issues which Flutter helped me out with. For a front-end developer, this was really helpful.
Unfortunately it also took forever, thanks to XCode.
After forever, we’re now ready to go! (I’m choosing to work in VS Code)
Andriod Emulator and iOS Simulator
Before I could get to coding I had to set up the Android and iOS devices on my machine. Fortunately I had ones set up for previous projects, I just needed to launch them like so:
$ flutter emulators
$ flutter emulators --launch Pixel_2_XL_API_28
$ flutter emulators --launch iOS Simulator
$ flutter run -d all
This runs the starter app on both!
Now to start messing around! I’m using this tutorial provided from the Flutter team as a start.
With the tutorial, I created a list (useful) and started learning about Flutter’s state (not really though).
I continued on to part 2, which had me add interactive icons to list items to save them, navigate to a page to view saved list items, and begin theming the app.
Theming is one of the big reasons I wanted to try Flutter and it’s got a theming framework I wanted to try.
Times and Blue
First try at theming was promising, even just with changing the font and the primary colour. I feel like it’s generally stuck to the typical Material Design layout with the AppBar shadow and the darker background colour. Fortunately, I was quickly able to fix those, but I’m not certain I can make Flutter bend to all my UI wishes, would need more exploration.
The tutorial is to get a bar chart up but I need a line chart with specific properties, which proved to be much more difficult thanks to some of the code from the bar chart tutorial messing me up. I had to redo the bar chart demo a couple of times and add in this Line Chart demo carefully.
I don’t care for my chart being interactive, so I dropped that extra fluff from the tutorial. What I need is to make the graph moveable and zoomable along the yaxis, which I don’t think flutter\charts_ will be able to do.
But I tried anyway, starting with a bunch of different tutorials from here. I actually ran into a lot of errors while trying to set all these up and while some of them were clearly due to my unfamiliarity with Flutter, some of them were very: 🤨. That’s a drawback.
I ended up finding the Numeric Initial Viewport Axes Example which did the scrolling y-axis for me and just needed to combine it with the Selection Callback Interactions Example (which features a TimeSeriesChart, which I need). This actually proved to be quite difficult.
In the end I wasn’t able to get it to work seemingly due to a bug that hasn’t been fixed. This is how it would’ve worked though, by setting up a viewport and allowing PanAndZoomBehavior.:
domainAxis: new charts.DateTimeAxisSpec(
viewport: new charts.DateTimeExtents(
start: new DateTime(2017, 10, 3),
end: new DateTime(2017, 10, 10))),
behaviors: [new charts.PanAndZoomBehavior()],
selectionModels: [new charts.SelectionModelConfig(
Turns out Flutter isn’t capable of the graphing I need :(
In conclusion, Flutter seems like a pretty cool way to make apps but unfortunately it’s chart library isn’t functional and customizable enough.
Looks like I’m sticking to Ionic Angular with plot.ly :)