Drink from the well…replenish the well: A Flutter Technology Stack Experience

A few weeks back I had shared my experience learning and working on Flutter+Firebase App development stack. Having worked on this stack for last 4+ months have made me appreciate the efforts of tech. communities who build such incredible open-source frameworks even more. I was having a very good time learning, and developing on this stack by building the components that we required for our App.

Flutter, a mobile App development SDK

However, we hit kind of a road-block when we faced the framework limitation for one of the designs that the design-team had in mind. We needed simultaneous left and right drawers on our Scaffold of the chat screen. Scaffold is a material design visual layout structure for hosting several other layout sub-structures like AppBar, FloatingActionButton, Drawer, BottomNavigationDrawer, SnackBar, and BottomSheets.

Material Design Scaffold

The existing Flutter framework provided means to show a single side-drawer at a time (either left or right) on a screen. However, the framework lacked a means to simultaneously show both, the left and right drawers on the Scaffold.

Scaffold with Single Drawer Support

This is where our journey to contributing to the Flutter framework began. Flutter being very flexible, our initial line of action was to build a customized Scaffold widget which had dual drawers. However, after an internal team discussion we thought it would make sense if the underlying Scaffold had this capability. Moreover, it would benefit the whole Flutter development community.

It was our “You drink from the well, you replenish the well” moment!
“You drink from the well, you replenish the well” — King Ezekiel 8)

Recently Flutter had added the support of LTR (Left-To-Right) and RTL (Right-To-Left) languages to the Scaffold widget, which was quite cool. Flutter being awesomely open-source, I set out and built the working modification to the Scaffold widget and raised a Pull-Request for simultaneous dual-drawers on Scaffold widget.

Modified Scaffold with simultaneous dual drawers

This Pull-Request gave me an opportunity to discuss Flutter’s interaction designs with senior engineer(s) at Google. After a healthy round of code-reviews and discussions, we agreed to drop a couple of animations in favor of sound interaction design, and the PR was merged onto Flutter master.

Addition of ‘endDrawer’ parameter to the Scaffold widget

Thus we were able to successfully contribute to this awesome App development framework. It personally gave me an opportunity to understand the internals of Flutter framework, and engine that runs it. Over the next few days I also got an opportunity to contribute to Flutter engine as well.

More learnings, experiences and adventures with awesome technology stacks on-route!

Peace \m/