Flutter at Google I/O 19
This story is another recap of my talk at GDG Bhubaneswar I/O Extended 19 and was published right on stage! 😎 Snaps from the event below 👇
So last year, in Google I/O 18, Flutter gained a lot of hype because it was such a great framework to build high performance, fast, beautiful applications for Android and iOS from one codebase written in Dart. And obviously there were huge expectations from Flutter this year.
So in this one year after Google IO 18, we went from a beta release to a release preview to 1.0 in December last year, and we are at 1.5 right now.
What does it mean for us? It means that Flutter is growing rapidly and is more powerful than last year. So let’s see what all happened at IO this year.
UI-as-code
So fun fact, whenever I conduct Flutter workshops for Android developers, I always have some sad faces around who do not want to write declarative UI, and have questions like —
But now everyone’s doing it, like Jetpack Compose and…
Moving on, we have new updates in Dart for better usage of declarative UI.
Imagine we are creating an app that lists all the amazing talks and sessions of all popular conferences like GDG DevFest, DroidCon or PyCon, and the list would look something like this —
Now if we had to add all these lists inside our Column, we would have to create a new List<Widget> called finalSessions like this —
…and finally call the finalSessions in our Column like this.
So what is wrong with this approach?
Well, it seems like an anti-pattern in our declarative UI approach. And just by looking at my Column, I can’t know if my finalSessions consists of DroidCon sessions or not.
Comes Dart 2.3
So the new features in the newest update of our Dart let’s us do this —
Now if you had to skip any session talks, just remove the line of code calling that list, and the developer reading your code (and you too) would still easily know what consists in the final list of sessions.
Now what if the user decides to filter out the Android sessions and they don’t care to see any Python sessions. Probably we will have a boolean variable here isAndroidPreference that tracks if the user prefer’s Android talks or not. Something like the below —
So here, GDG sessions are by default added to the list. But if isAndroidPreference is false, add both the Pycon and Droidcon sessions, and when isAndroidPreference true, add only the Droidcon sessions.
wow, way to confuse a developer.
Imagine, we add a isPythonPreference too?
Dart to the rescue!
Such a clean code now!
Not only an if-else statement, you can also use a single line for loop inside your widget.
Wow, that was a lot of great improvements to Dart.
New additions to the Material package
Now usually we would require a bunch of third-party libraries/packages or lot of complex implementation with animation to achieve this but for Flutter, you will usually have it all inbuilt in the Material package. So these are the new kids in the block —
ReorderableListView, Range Slider, etc
Watch the video to know more.
Accessibility
Flutter has been doing some impactful work in its implementation so that people with disabilities can also enjoy a great experience on their apps.
Example 1
People with visual impairment often uses a screen reader to interpret what is written on the screen. But in cases like this, the screen reader will read the text as “30 k-m slash h-r” and that would make no sense to the user.
But you can take advantage of the semanticsLabel of the Text widget and add the correct description to your text that the screen reader can pick up.
You can do the same for icons, where icons may not have a descriptive name.
If you are using a custom widget that does not have a semanticsLabel , you can simply wrap your custom widget with Semantics widget and give it a descriptive label.
Example 2
Here the screen reader would read the screen as Volume Up, Channel Up, Volume Down, Channel Down and it reads the widgets in completely wrong and confusing order.
To fix this, you can wrap your icons with Semantics widget and define a order like this —
New state management package!!
Actually, it’s not a new package, and not even written by Google. In fact, Google was writing a package called provide and then they saw the provider package written by Remi Rousselet and Google thought it’s much better, and they scrapped off their own work to support the great work done by the community.
I’m not going to go into details how provider works, because that deserves a whole new article. For now, you can read this amazing article on Provider.
So the conclusion is that Flutter is not only great at building beautiful interfaces, but you can also code faster with declarative UI, build complex UI components in few lines of code, care for accessibility, and also manage state in an efficient way, and all this possible for both Android or iOS, just out of the box.
However, Flutter always goes one step higher. Now Flutter’s one codebase can not only create apps for Android and iOS but also build — desktop applications for ChromeOS, MacOS, Windows, Linux, and for the web.
What else happened?
I got an invite to Google IO 2019!!!
It was honestly a dream come true to be able to go to Google I/O 2019 and meet the people I have always admired and followed. On the Flutter side of things, I met a bunch of people from the Flutter community that I have been following since one year now and also the amazing people from the Flutter team. We also had a Flutter Party, a small get together (it’s no more small) of the team and the community over food and drinks, played fun Flutter quizzes, and had some amazing Fluttery conversations and pictures. At the end of the event, Nilay also gave us a tour of the Google campus and the Flutter office and we got a BUNCH of goodies! Check out all the pictures below!
