On the Google introduced us Flutter — a new open source library for creating mobile applications. Google I/O ’17 As you may know, Flutter is a solution for creating with beautiful UI. Flutter’s way of designing views is similar to the web applications, so you can find many analogies to HTML/CSS. cross-platform mobile applications Accordingly to their promises: Flutter makes it easy and fast to build beautiful mobile apps. Sounds great, but at first look, about another cross-platform solution. We have many of them — Xamarin, 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. I wasn’t very convinced But I got surprised. Flutter has that can be very interesting . In this article, I’d like to show you some of the things that really involved me. So let’s start! many features from the Android developer point of view Why Flutter? You may be curious and ask yourself a question: “What’s so innovative about Flutter? How does it work? How is Flutter 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: You can also check wrap-up of Flutter concepts in . What’s Revolutionary about Flutter? “The Magic of Flutter” presentation In the shortcut, Flutter is a that allows us to create (so you can write one code and run the app both on Android and iOS). You write code in , a language developed by Google, which looks very familiar if you used Java before. Instead of XML files, you build like this: mobile SDK cross-platform mobile applications Dart layout tree As you can see, a layout is built from components ( ) that are nested. The core Widget is (that’s the whole application), then we have (that’s the main layout structure), and then inside we have (like Android ) and some as body. Inside body, we’ll put our layout Widgets — Texts, Buttons, etc. Widgets MaterialApp Scaffold AppBar Toolbar Container 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 feature — . 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: Hot reload 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 . Cool, isn’t it? in seconds Hot reload is not only but also — if you have some data displayed already (as the color of the text in this example), you can during application runtime and if you hot reload app: they’ll remain ! fast smart change UI 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 widgets — (for Android) and (for iOS). You can choose and easily implement whatever you want. You’d like to create new FloatingActionButton? Here you go: Material Design Cupertino 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 . Your app class is a widget ( ), your whole layout structure is a widget ( ), and basically, everything is a widget ( , , ). Do you want your view to be centered? Wrap it ( ) with widget! everything is a widget MaterialApp Scaffold AppBar Drawer SnackBar Cmd/Ctrl + Enter Center Thanks to this creating UI is as simple as composing layout with many different small parts. It’s also connected with another core principle — in Flutter . 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 class), you instead new Widget with few small Widgets. composition is over inheritance View compose #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 parameter to get current platform (Android/iOS): Theme.of(context).platform #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 (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 . many packages 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 . You can check my implementation of this app on my GitHub: Chat message application _HelloFlutter - A simple chat app written in Flutter with core features from Firebase SDK_github.com pszklarska/HelloFlutter You can also check Flutter Gallery app, where you can see most of the Flutter UI components in action: _(Flutter is beta technology) A gallery of widgets and behaviors, plus demos and vignettes, all built with Flutter…_play.google.com Flutter Gallery - Apps on Google Play And if you’re interested more in Flutter, you can check my article about Flutter and Redux: _In this article I’d like to show you how to create Flutter application using Redux._hackernoon.com Flutter + Redux — How to make Shopping List App? That’s all, thanks! If you liked this post, don’t forget to leave a 👏!

Community Is

Google

Instantly

YouTube

Flutter + Redux — How to make Shopping List App?

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Flutter — 5 reasons why you may love it

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Flutter + Redux — How to make Shopping List App?

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

Flutter + Redux — How to make Shopping List App?

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps