Flutter — 5 reasons why you may love it

Posted 5点20的Morning

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter — 5 reasons why you may love it相关的知识,希望对你有一定的参考价值。

On the Google I/O ’17 Google introduced us Fluttera new open source library for creating mobile applications.

As you may know, Flutter is a solution for creating cross-platform mobile applications with beautiful UI. Flutter’s way of designing views is similar to the web applications, so you can find many analogies to html/CSS.

Accordingly to their promises:


Flutter makes it easy and fast to build beautiful mobile apps.


Sounds great, but at first look, I wasn’t very convinced about another cross-platform solution. We have many of themXamarin, PhoneGap, Ionic, React Native and so more. We all know that there are many options and all of them have some pros and cons. I wasn’t sure if Flutter will be something different from them. But I got surprised.

Flutter has many features that can be very interesting from the Android developer point of view. In this article, I’d like to show you some of the things that really involved me. So let’s start!



Why Flutter?


You may be curious and ask yourself a question:

“What’s so innovative about Flutter? How does it work? How is Fluter different from React Native?”

I’ll not cover technical topics here, as it was done much better by the other people. If you’re interested in how Flutter works in details, I encourage you to read this article: What’s Revolutionary about Flutter? You can also check wrap-up of Flutter concepts in “The Magic of Flutter” presentation.

In the shortcut, Flutter is a mobile SDK that allows us to create hybrid mobile applications (so you can write one code and run the app both on android and ios). You write code in Dart, a language developed by Google, which looks very familiar if you used Java before. Instead of XML files, you build layout tree like this:



As you can see, a layout is built from components (Widgets) that are nested. The core Widget is MaterialApp (that’s the whole application), then we have Scaffold (that’s the main layout structure), and then inside we have AppBar(like Android Toolbar) and some Container as body. Inside body, we’ll put our layout WidgetsTexts, Buttons, etc.

That’s just the cut-off. If you’d like to read more about layouts, check Flutter’s tutorial on building layouts.


#1 Hot reload

Okay, now let’s begin!

We’ll start with the basic application. We have three buttons, every one of them changes text color:



Now, we’ll use one of the coolest featureHot reload. It allows you to instantly rebuild your project as if it was just a web page. Take a look at the Hot reload in the action:



What do we do here? We change something in the code (e.g. the text on the button), then we click “Hot Reload” (at the top of the IntelliJ IDE) and we’ll see the result in seconds. Cool, isn’t it?

Hot reload is not only fast but also smartif you have some data displayed already (as the color of the text in this example), you can change UI during application runtime and if you hot reload app: they’ll remain the same!


#2 Full set of (Material Design) widgets


Another great thing about Flutter is that we have a very rich catalog of a built-in UI components. There are two sets of widgetsMaterial Design (for Android) and Cupertino (for iOS). You can choose and easily implement whatever you want. You’d like to create new FloatingActionButton? Here you go:



And the best thing is that you can implement every widget on every platform. If you implement some Material Design or Cupertino widget, it’ll look the same on every Android and iOS device. You don’t need to worry that something will look different across many devices.


#3 Everything is a Widget


As you saw in the previous gif, creating UI is very easy. It’s possible thanks to the core principle of Flutter, where everything is a widget. Your app class is a widget (MaterialApp), your whole layout structure is a widget (Scaffold), and basically, everything is a widget (AppBar, Drawer, SnackBar). Do you want your view to be centered? Wrap it (Cmd/Ctrl + Enter) with Center widget!



Thanks to this creating UI is as simple as composing layout with many different small parts.

It’s also connected with another core principlein Flutter composition is over inheritance. It means that if you’d like to create some new widget, instead of extending Widget class (as you’ll do in Android by extending some View class), you instead compose new Widget with few small Widgets.


#4 Different themes for Android/iOS


Usually, we want our Android application to look different than an iOS app. Differences are not only in colors but also in dimensions and styles of widgets. We can achieve this in Flutter with themes:

As you can see, we set different color and elevation for Toolbar (AppBar). We do it using Theme.of(context).platform parameter to get current platform (Android/iOS):



#5 Many, many, many packages


Although Flutter is still in alpha version, the community is really big and involved. Thanks to this Flutter has the support of many packages (libraries, just like Gradle dependencies in Android). We have packages for opening images, making HTTP requests, sharing content, storing preferences, accessing sensors, implementing Firebase, and many more. Of course, everyone supports both Android and iOS.


How to start?


If you liked Flutter and want to try it on your own, the best idea is to start Google Codelabs:

in this one, you’ll get the basics of creating layouts: Building Beautiful UIs with Flutter

and if you’d like to try more of Flutter, you must try Firebase for Flutter

After those codelabs, you’ll make a simple and beautiful Chat message application.


That’s all, thanks! If you liked this post, don’t forget to leave a

以上是关于Flutter — 5 reasons why you may love it的主要内容,如果未能解决你的问题,请参考以下文章

The AFFiNE live demo is here (with 15 reasons from the team why you should try)

The AFFiNE live demo is here (with 15 reasons from the team why you should try)

The AFFiNE live demo is here (with 15 reasons from the team why you should try)

8 Reasons why SharePoint is Bad for Your Business 8个理由告诉你,为什么SharePoint对你的业务有害

iOS开发之运行报错 dyld: Library not loaded: *** Reason: image not found

[译] The Why of Y - 理解Y Combinator