is a cross-platform mobile app SDK for building high-performance, high-fidelity, apps for iOS and Android, from a single codebase. Flutter Also from the : docs Flutter includes a modern framework, a 2D rendering engine, ready-made widgets, and development tools. react-style This post will hopefully be a quick and easy intro for most JavaScript developers as I will attempt to draw a parallel between JS and the npm ecosystem, and working with Flutter / Dart and the package repository. Pub If you’re interested in staying up to date on Flutter tutorials, libraries, announcements, and updates from the community, I suggest signing up for the bi-weekly that I just announced. Flutter Newsletter In my talk at I discussed and demoed a few different technologies within the React Ecosystem including , , and , but I also had the opportunity to discuss and . React Native — Cross Platform & Beyond React Native EU React Native Web React Primitives ReactXP Weex Flutter Of all the front-end technologies I have looked at in the past few years, I am most excited about Flutter after experimenting with it. In this post, I will discuss why and also give an intro of how you can get started with it as quickly as possible. If you know me, then I know what you are thinking… I’m a React and React Native developer of over 2.5 years. I’m still extremely bullish on React / React Native and know of pretty massive adoption that is going on right now among many large companies, but I always enjoy seeing other ideas and looking at alternative ways to go about achieving similar goals / objectives, whether it be to learn from them or to shift my current platform. Flutter My is this: Flutter is amazing and I see it being a viable option in the very near future. tldr After using the SDK over the past couple of weeks, I’m in the process of building my first app using it, and am really liking the process so far. Before I go into how to get started with Flutter, I will first go over what my opinions are on the pros and cons of the SDK. Pros: Built in UI libraries (Material, Cupertino) maintained by the core team. Dart & Flutter team work closely together to optimize the Dart VM for mobile specifically for the Flutter needs. Documentation is pristine / awesome / amazing 😍. Nice cli. Smooth and easy for me to get up and running without running into many roadblocks / bugs. Debugging experience is good with hot reloading enabled out of the box plus d. an array of debugging techniques well documente Pretty solid and opinionated navigation library built and maintained by the core team The Dart language is 6 years old and mature. While Dart is a class-based object oriented programming language, if you’re into functional programming, Dart does has first-class functions and supports many functional programming constructs. Dart was easier for me to pick up on than I had anticipated, and I came to really enjoy it. Dart is a typed language out of the box without any additional configuration (re: TypeScript / Flow). Has a similar paradigm of working with state that you may be used to if you have used React (i.e. lifecycle methods and ). setState Cons You’ll need to learn Dart (which is easy, trust me) Still in alpha. Only targets iOS and Android. The plugin ecosystem is young, with only 70+ packages for Flutter in as of September 2017 https://pub.dartlang.org/flutter Layout / styling is a completely new paradigm / API to learn. Different project configuration setup to learn ( vs ). pubspec.yaml package.json Getting Started / Other Observations I’m using VS Code as my editor with the which has let to a really nice development experience. The flutter documentation highly recommends though the which has some built in support for things like hot / live reloading that VSCode doesn’t have to the best of my knowledge. Dart Code extension IntelliJ IDE There is a module system / package management system that is much different than that of npm, the . This could be a good or bad thing depending on your view of npm. Pub Dart Package Manager I started with no knowledge of Dart and picked it up fairly quickly. It reminds me a lot of TypeScript and also bears some resemblance to JavaScript. There are a few really great CodeLabs and tutorials in the documentation that helped me tremendously, and I recommend checking them out: 1. 2. 3. 4. Building UIS Adding Firebase Building Layouts Adding Interactivity Enough talk, let’s get started creating a new project! Installing the CLI (macOS) To get started on Windows, check out these docs. To see full macOS setup instructions, check out these docs. First, we need to clone the repository that contains the binary for the flutter CLI and add it to our path. I cloned this repo into a folder where I keep my binaries and then added a new path to my / file. $HOME/.bashrc $HOME/.zshrc Clone repo: git clone -b alpha https://github.com/flutter/flutter.git 2. Add path: export PATH=$HOME/bin/flutter/bin:$PATH (or whatever the path is to your installation) 3. Run flutter doctor from your command line to make sure flutter path is being recognized and to see if there are any dependencies you need to install to complete the setup: flutter doctor Installing other dependencies If you would like to deploy for iOS, you must have Xcode installed, and for Android you must have Android Studio installed. To learn more about installing each platform, see the documentation here . Creating your first Flutter app Now that we have the flutter CLI installed, we can create our first app. To do so, we need to run the flutter create command: flutter create myapp This will create a new app for you. Now, change into the new directory and open either an iOS simulator or android emulator, and then run the following command: flutter run This will launch the app in a simulator that you have open. If you have both iOS and Android simulators open, you can pass in the simulator in which you want the app to run in: flutter run -d android / flutter run -d iPhone Or to run in both run flutter run -d all You should get some information about reloading the app printed to your console: Project Structure The code that you are running lives in the file. lib/main.dart You’ll also notice that we have an android folder and an iOS folder where our native projects live. The configuration for the project lives in the file, which is similar to a file in the JavaScript ecosystem. pubspec.yaml package.json Let’s now take a look at . lib/main.dart At the top of the file we see an import: import ‘package:flutter/material.dart’; Where does this come from? Well, in the file, you’ll notice under dependencies we have a single flutter dependency, that we are referencing here as . If we want to add and import other dependencies, we need to update our with the new dependencies, making them then available as imports. pubspec.yaml package:flutter/ pubspec.yaml In this file, we also see that there is a function at the top called main. In Dart, is the special, , top-level function where app execution starts. Because flutter is built using Dart, this is also our main entry point to the project. main required main() {runApp(new ());} void MyApp This function calls which itself calls a class and so on and so forth, similar to a React app where we have a main component that is composed of other components, then rendered in or . new MyApp() ReactDOM.render AppRegistry.registerComponent Widgets One of the core principles in the of Flutter is that “Everything is a Widget”. technical overview Widgets are the basic building blocks of every Flutter app. Each widget is an immutable declaration of part of the user interface. Unlike other frameworks that separate views, controllers, layouts, and other properties, Flutter has a consistent, unified object model: the widget. In terms of web terminology / JavaScript, you can think of a Widget similar to how you may think about a component. The widgets are usually composed inside of classes that may or may not also have some local state and methods within them. If you look at main.dart, you will see references to classes like _StatelessWidget, StatefulWidget, Center, and Text._These are all considered widgets. For a full list of available Widgets, see . the documentation Layout and Styling While Dart and most of the Flutter framework has been pretty easy grok, working with Layouts and styling was at first a little harder to wrap my head around. The main thing to keep in mind is that unlike web styling, and even React Native styling where Views perform all layout and also perform some styling, Layout is determined by a combination of and , which are usually different depending on the type of Widget you are working with. the type of Widget you choose its layout & styling properties For example, the takes an array of children and not any styling properties (only layout properties such as and among others), while takes a combination of layout and styling properties. Column CrossAxisAlignment direction Container There are even layout components such as that take a child and do nothing notable other than adding padding to a child component. Padding There is an entire that can help you achieve the type of layout you would like, with components like Container, Row, Column, Center, GridView and many others, all with their own layout specifications. catalog of Widgets SetState / Lifecycle methods Similar to React, there is the idea of Stateful and Stateless widgets or components. Stateful widgets can create state, update state, and destroy, being somewhat similar to the lifecycle methods you may be used to if you’ve worked with React. There is even a method called setState which updates the state. You can see this in action in the method in the project we just generated. _incrementCounter See , , and . StatefulWidget State StatelessWidget Consensus As someone who specializes in cross-platform application development, I’ve been keeping my eye out for a competent competitor to React Native that would be a viable option for clients that maybe wanted something different for whatever reason. I think that Flutter answers some of the concerns of some of my clients regarding things like a built in type system, a first class UI library, and also a promising navigation library that is maintained by the core team. I will be adding Flutter to my toolbelt so when I run into a problem or situation that React Native does not answer I will have something else to fall back on. I will also be presenting it to my clients once I have shipped my first app as another option for them to choose up front, as long as I feel it is production ready. My Name is Nader Dabit . I am a Developer Advocate at AWS Mobile working with projects like AppSync and Amplify , and the founder of React Native Training . If you like React and React Native, checkout out our podcast — on . React Native Radio Devchat.tv Also, check out my book, now available from Manning Publications React Native in Action If you enjoyed this article, please recommend and share it! Thanks for your time

Flow

Amazon

Apache

Google

Microsoft

Twitter

YouTube

AWS AppSync — Up and Running with GraphQL in the Cloud

Meta CLI Creation Using Create New CLI

Too Long; Didn't Read

Flutter for JavaScript Developers

Flutter for JavaScript Developers

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Adding Analytics to Your Next Mobile JavaScript Application

7 reasons why you should try AngularDart

Angular Dart Architecture

Are Futures in Dart threads?

End to End Testing in One Short Second with Dart

Flutter First Steps

Adding Analytics to Your Next Mobile JavaScript Application

7 reasons why you should try AngularDart

Angular Dart Architecture

Are Futures in Dart threads?

End to End Testing in One Short Second with Dart

Flutter First Steps

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps