• Flutter — 5 Reasons why you may love it
  • Paulina Szklarska
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: RockZhai
  • Proofreader: Starrier

Flutter — Five reasons you’ll Love It

On Google I/O ’17, Google introduced Flutter, an open source library for mobile application development.

As you may know, Flutter is a solution for developing cross-platform mobile apps with a nice UI. The design interface of Flutter is similar to that of a Web application, so you can see a lot of HTML/CSS in it.

According to their promises:

Flutter makes it easy and quick to develop beautiful mobile applications.

It sounds great, but at the beginning, I didn’t really believe in another cross-platform solution. We have a lot of similar cross-platform solutions — Xamarin, PhoneGap, Ionic, React Native, etc. We all know that so many alternative solutions have their pros and cons. I’m not sure that Flutter is any different, but I was blown away by Flutter.

Flutter has many interesting features ** from an Android developer’s perspective. In this article, I’m going to show you something that really touches me. So, here we go!

Why Flutter?

You might be curious and ask yourself this question:

“What’s new about Flutter? How does it work? How is a Flutter different from a React Native?”

I won’t get too technical here, because others do this much better than I do. If you are interested in how Flutter works, I recommend reading this article. You can also check out The full concept of Flutter in “The Magic of Flutter” presentation.

In a quick implementation, Flutter is a mobile SDK that allows you to create hybrid mobile applications (so you can write one piece of code and run it on Android and iOS at the same time). You’ll need to code in Dart, a programming language developed by Google and familiar if you’ve worked with Java before. Instead of XML files, you need to build your layout tree like this:

import 'package:flutter/material.dart';

class HelloFlutter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "HelloFlutter",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("HelloFlutter"), ), body: new Container( child: new RaisedButton(onPressed: _handleOnPressed), ), ), ); }}Copy the code

As you can see, a layout is built from nested Widgets, the core Widget is the MaterialApp (which is the whole application), and then we have that Scaffold (which is the layout structure of our main interface), Then there’s the AppBar (like the Android Toolbar) and some Containers as the body, and inside the body we can place our Layout components — Texts, Buttons, etc.

These are just entry points. If you want to read more about layouts, check out Flutter’s tutorial on Building layouts.

# 1 thermal overload

Ok, let’s get started now!

We’ll start with a basic application with three buttons, each of which changes the color of the text when clicked:

Thinking, we will use one of the coolest features of Flutter – thermal overload. It allows you to update your project in real time as you would a web page. Take a look at hot reloading in action:

What are we doing here? We change the content in the code (such as the text message on the button), then we hit “hot reload” (at the top of the IntelliJ IDE) and after a few seconds we can see the result. It’s pretty cool, isn’t it?

Hot reloading is not only fast but smart – if you’ve already displayed something (like the text color in this example) and hot reloaded the application, then you can change the UI while the application is running: they’ll stay the same!

#2 Material Design components

Another great thing about Flutter is that we have a very rich catalogue of built-in UI components. There are two sets of components — Material Design for Android and Cupertino for iOS. You can easily implement whatever you want, do you want to create a FloatingActionButton? Start:

And the great thing is that you can implement any component on any platform. If you’re using some Material Design or Cupertino component, they all look the same on every Android and iOS, so you don’t have to worry about something looking different on different devices.

#3 Everything is widgets

As you can see in the previous GIF, creating a user interface is very simple. This may be thanks to the core idea of Flutter, which is that everything is a widget. Your APP class is a widget (MaterialApp), your entire layout structure is a widget, and basically everything is a widget (AppBar, Drawer, SnackBar). Do you want your View to be centered? Wrap it with the Center component (Cmd/Ctrl + Enter).

Because of this, creating a UI interface is as simple as composing a layout with many different widgets.

This also relates to another core principle in Flutter – composition over inheritance. It means that if you want to create a new Widget, you can assemble it with very few widgets, rather than by extending the Widget class (just as you would inherit some View classes in Android).

#4 works with different themes on Android/iOS

In general, we want our Android apps to look different from our iOS apps. The difference is not only in color, but also in size and style of parts. We can achieve this through the theme of Flutter:

As you can see, we set different colors and heights for the Toolbar (Appbar). We do this by using theme.of (context).platform to get the current platform (Android/iOS).

import 'package:flutter/material.dart';

class HelloFlutter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "HelloFlutter", theme: new ThemeData( primaryColor: Theme.of(context).platform == TargetPlatform.iOS ? Colors.grey[100] : Colors.blue), home: new Scaffold( appBar: new AppBar( elevation: Theme.of(context).platform == TargetPlatform.iOS ? 0.0:4.0, title: new Text("HelloFlutter",
            ),
          ),
          body: new Center(child: new Text("Hello Flutter!")))); }}Copy the code

#5 Lots of software packages

Although Flutter is still only an alpha version, its community is very large and active. Thanks to the Flutter platform’s support for multiple software packages (libraries, just like the Gradle dependencies in Android). We have images opening, sending HTTP requests, sharing content, storing preferences, accessing sensors, implementing Firebase, and so on. Of course, each one supports both Android and iOS.

How do I start?

If you like Flutter and want to try it yourself, the best way to do this is to open Up Google Codelabs:

  • Here you can get the basics of creating layouts: Building Beautiful UIs with Flutter
  • If you want to try more about Flutter, you must try Firebase for Flutter.

After looking at the code base, you can create a simple and elegant chat application. You can also check out my implementation of the app on GitHub:

  • pszklarska/HelloFlutter: HelloFlutter – A simple chat app written in Flutter with core features from Firebase SDK github.com

You can also check out the Flutter Gallery app, where you can see a large part of the Flutter UI components:

  • Flutter Gallery – Android Apps on Google Play

That’s all, thank you for reading! If you enjoyed this article, don’t forget to leave an 👏!

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.