Flutter — Slack Redesign Challenge: What I learned from it.

Author profile picture

@salmaan-ahmedSalmaan Ahmed

Exploring the power of UI in flutter, I decided to create something cool. I saw the concept of slack application while browsing up-laps.

Link: https://www.uplabs.com/posts/slack-redesing-challenge

Here I reveal the power of flutter.

Slack Redesigned using Flutter SDK

My flutter redesign is not exactly same as the up-labs version but quite similar, I took it as motivation. I used the default flutter icons and colors to keep it simple.

I used flutter as a hobbyist for some time and made couple of packages.
After working on this redesign challenge I would love to share my experience in this article.

What is Flutter, Dart or Fuchsia

Heard about Google’s new operating system for mobile devices? Fuchsia OS. Google didn’t make any public announcements but silently rolled out an open source repository on GitHub named Fuchsia.

All the apps for Fuchsia OS will be written using the Flutter SDK. So, it’s better to prepare yourself for the next wave of technology hitting the markets where cross-platform development will be the next big thing.

This open-source mobile SDK (Flutter) can also be used to create Android and iOS apps from the same code base.

Flutter made the challenge really easy

Yes! there was not much to code and I completed the challenge in fairly less time than I expected. It took me around half of time it would have taken on native android or iOS. Guess what, this app already work on both platforms.

You are already in the karate suit when you are equipped with dart 🥊🥋

Hot Reload

I would write it as the best feature. You don’t have to wait for Gradle or the XCode build to reflect the UI changes when you are using flutter. You can see the changes right away. As my work was mostly related to UI, it was a huge help for me.

Hot reload

Cross Platform

Write once, build on two. Use one code base for both Android and iOS, or shall I say for three, including fuchsia. This can definitely save you both time and resources.
There already exist many tools and sdks, but was not amazing or as smooth as expected. Documentations were not complete and comprehensive, they missed many things, but things changed when flutter entered the competition.
Not to mention that there is a project humming bird, which will enable flutter to build web apps as well.

Google maps using flutter

Flutter Community

Flutter community provide extensive documentation and community support to help out with any issues you may encounter.
A founding principle of Flutter is that anything that the hardware can do, you should be able to do in Flutter also. While there is always the ability to dig into platform specific libraries, with the ever-growing collection of Flutter packages, most developers would find what they need on: https://pub.dartlang.org/flutter

pub.dartlang contains thousands of plugins

Less code

In native development, the work is separated into layout and code. The layout should be written in XML or Storyboards as Views that are then referenced in the code. Dart takes care of that by keeping layout and code in one place. Since everything in Flutter is a widget, the layout is also created in Dart.

These 50 lines contain all the code, including UI

Flutter means less code. And where there’s less code, there are fewer bugs. With Dart, 100% of the code is usually shared between iOS and Android apps.

Conclusion

Dart compiles into native code and there is no need to access OEM widgets as Flutter has its own. This means less mediated communication between the app and the platform.

Flutter made it really easy to build up this app in couple of hours. I have uploaded the code on github:

Please clap if you liked it and don’t forget to be Stargazer on Git Hub :)

The redesign challenge made easy :)

Comments

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!