Hero animations in Flutter are dead simple

Posted on Leave a comment

When I was learning React Native, I was sort of super-impressed by its emphasis on animations. We all know how critical animations are in creating experiences that users actually like. RN has a profound Animated API and loads of examples on creating custom animations. There’s only one problem: adding beyond-simple animations is tricky and a lot of work.

I remember coming across this neat and detailed Medium article by Jiří Otáhal on creating Hero animations, becoming immediately excited, writing it down in my ‘urgent’ TODO list, and then never ever actually following it up. It was considerable amount of work, and I just couldn’t put myself together for the task.

Today when I was learning about animations in Flutter (AppBrewery course), I was friggingly relieved to know how easy it is to achieve the same here. See the screenshot below. Get what I mean?

Hero animations in Flutter.
These are transition animations on a shared object (widget) when navigating from one screen to another.

Of course, the RN animation tutorial that I linked earlier tries to achieve a more profound goal. But, clearly, in Flutter we have a better starting point.

Happy coding. Talk to you in the next one 🤘.

SelectableText widget and structured error messages in Flutter 1.9

Posted on Leave a comment

Flutter 1.9 is out. As one may guess from this post’s title, my favorite changes are:

  • SelectableText widget
  • Structured error messages (enabled via VS Code or Android Studio settings)

Structured error message support was proposed 8 months ago! I find Flutter’s current approach to displaying error/exception messages are pretty useful as they are. Adding more structure certainly doesn’t hurt. When I started programming more than a decade ago, I had always imagined a future where a developer would not need to leave their IDE to find help in fixing their errors. Now that it’s finally here, I wonder what took it so long 🤔. I think both React and Flutter have done a wonderful job here.

Here’s a short video about what’s new:

The joy of creating in Flutter

Posted on 1 Comment

I am now officially in love with Flutter. What started as a crush has turned into something palpable. For the past 2 weeks, I have been heavily invested in learning Flutter from App Brewery’s bootcamp-style course. If there’s one takeaway from the course, it is this: Flutter+Dart is a lethal combination. I have now come to truly appreciate the ‘promised’ language for frontend and the frontend itself.

I must confess, though. I did not hold the same feelings for Flutter in the beginning. At a couple of meetups, I have called Flutter all sorts of blasphemous things — difficult to learn, highly inconsistent, and a confused approach — all without closely working with it. I, however, assure you that Flutter is none of the above. On the contrary:

  • its composition-over-inheritance approach makes it easy for beginners,
  • its Widget-oriented design makes it consistent, and
  • Dart’s succinct and familiar (JavaScript-like) syntax makes things less confusing

The App Brewery course I mentioned before has been an eye-opener. The course itself is pretty long and exhaustive, but rewarding. Since it’s geared toward absolute beginner programmers, I was able to go through it at 1.5x playback speed and even skipped a few sections. I am currently at 64%, hoping to complete it by the next weekend.

During this time, I customized my VS Code quite a bit to my liking (this post’s featured image), so much so that creating Flutter apps in Code is a far more pleasant experience as compared to officially recommended Android Studio. This, of course, is made possible by the awesome Flutter team who does not want to tie developers to Google’s ecosystem.

If you are curious about the source code of the app seen in this post’s featured image, here’s the GitHub link. It’s an app called BMI Calculator that I created as part of the course. Go ahead and explore my commit history to see how easy Flutter makes creating beautiful-looking mobile apps.

Contributing to open source projects

Posted on Leave a comment

It’s high time for me to level up my developer mojo. Clearly, doing side projects isn’t the way to do so. They usually aren’t tough enough. Then what is? Why, of course, large enterprise projects. Based on this logic, I have decided to dedicate a couple of hours everyday to working on complex, large-scale open-source projects.

I recently picked up a new skill, Redux, and renewed my knowledge of React. So much so that I have drifted away from Angular in favor of React. React+Redux is a deadly combination. It sort of brings out the JS nerd out of you, and makes you better at best practices. No wonder why the best websites around are using React. (install the React DevTools browser extension and discover for yourself)

After looking around, I have shortlisted these two projects to focus on:

  • Calypso – a new frontend for WordPress.com
  • Mattermost webapp – frontend for an amazing free & open-source Slack replacement

Both are written in JavaScript (my love) and extensively make use of React and Redux. I have already started making slow but steady progress. My first pull request, although trivial, was recently approved and merged at wp-calypso.

Optimistic updates

Posted on Leave a comment

It’s a cool UX trick I learned recently makes applications exponentially responsive. Traditionally, when we make an async API call or something similar (to perform a time-taking operation) we show a spinner (or a loading message) to indicate to the user that something is going on in the background and that they should wait a bit before the final results. Although now widely accepted, this approach sometimes creates ‘blocking’ experiences especially when used extensively. You do not want to give an impression to your users that your application is completely dumb on its own and needs to fetch data from the all-knowing server all the time.

Optimistic updates is a strategy where you ‘optimistically’ assume that your time-taking operations will always succeed. So, instead of making users wait or showing a loader, you show the final results (when you can) right away!

Eg. On click of an item’s delete button just instantly remove the item from UI and perform the actual (server-side) delete operation in the background. The same goes for adding a new item, and so on. This will create a slick and snappy user experience that your users will love. If a background operation does fail, perhaps undo the change in UI and show a relevant error message to the user.

Of course, this strategy isn’t perfect. But it’s cool, for sure. I must have seen it at least half a dozen times before but officially learned it in this beautiful Redux course on Pluralsight by the awesome Cory House.

Check my commit to see how optimistic deletion can be implemented in a React-Redux application.