• Original address: Flutter for JavaScript Developers
  • Author: Nader Dabit
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: lsvih
  • Proofreader: Bambooom

A Guide to Flutter for JavaScript programmers

Flutter is a cross-platform mobile APPLICATION SDK that uses the same set of code to build high performance, high fidelity iOS and Android applications.

The document mentions:

Flutter includes a React style framework, a 2D rendering engine, some premade plug-ins, and developer tools.

The text is intended to give JavaScript developers a quick and concise guide to getting started. I will try to compare the JS and NPM ecosystems to the Flutter/Dart and Pub package libraries.

If you are interested in the latest Flutter tutorials, libraries, announcements and community updates, I suggest you subscribe to the bi-weekly Flutter Newsletter.

In my React Native EU talk React Native — Cross-platform and Beyond, I discussed and demonstrated the differences between React Native Web, React Primitives, and ReactXP in the React Ecosystem. And I had a chance to discuss the differences between Weex and Flutter.

After trying out the Flutter, I think it’s one of the most exciting front-end technologies I’ve looked at in recent years. In this article, I’ll discuss why it’s so exciting to me and how to get started with Flutter as quickly as possible.

If you know me, then I know what you’re thinking…

I am a React and React Native developer with over two and a half years of experience. Right now, I’m still a fan of React and React Native, and I know that a lot of big companies are using them, but I’m still happy to see other ideas that can do the same thing, regardless of whether I have to learn or change the technology stack.

Flutter

I can summarize: The Flutter is amazing and I believe it will become more popular in recent years.

After using the Flutter SDK for a few weeks, I’m using it to make my first App and I’m enjoying it.

Before I start explaining how to get started with Flutter, I’ll first review my thoughts on the pros and cons of its SDK.

advantages

  • Built-in UI libraries (Material and Cupertino) maintained by the core team.
  • The Dart team worked closely with the Flutter team to optimize the Dart VM for mobile devices specifically for Flutter.
  • With new, cool documentation.
  • Powerful CLI.
  • I was able to get started and run it easily and smoothly, without any obstacles or bugs.
  • The out-of-the-box hot loading feature makes the debugging experience quite good. In addition, there is a good set of documentation on debugging techniques.
  • There is a reliable and insightful NAV library built and maintained by the core team.
  • Dart is six years old and quite mature. Although Dart is a class-based object-oriented programming language, Dart also has functions as first citizens if you want to use functional programming and supports many functional programming constructs.
  • Dart is easier to get started than I thought, and I love it.
  • Dart is an out-of-the-box, strongly typed language (e.g. TypeScript, Flow) that doesn’t require any extra configuration.
  • If you have used React you will see that it has a similar state mechanism (e.g. Lifecycle method vssetState).

disadvantages

  • You’re going to learn Dart (trust me, it’s easy).
  • It’s still being tested.
  • Target platforms are iOS and Android only.
  • The plug-in ecosystem is still young, with pub.dartlang.org/flutter having just over 70 packages in September 2017.
  • Layout and writing styles require learning a whole new paradigm and API.
  • You need to learn different project configurations (pubspec.yaml vs. package.json).

Introduction and other perspectives

  • The Flutter documentation recommends VS Code editor with IntelliJ IDE. Although the IntelliJ IDE has built-in support for hot loading and online loading that VS Code doesn’t have, I chose to use the VS Code editor with the Dart Code Extension plug-in installed and had a great experience.
  • Flutter has a module system, or Package management system, the Pub Dart Package Manager, which differs from the NPM in many ways. It’s good or bad depending on your view of NPM.
  • I had no prior knowledge of Dart, but I quickly got started. It reminds me of TypeScript and has some similarities to JavaScript.
  • There are several excellent code LABS and tutorials in the documentation that I suggest you check out: 1. Build UIS 2. Add Firebase 3. Build layout 4. Increase the interaction

Enough of that, now let’s start creating a new project!

Install the CLI on the macOS

If you are using Windows, check out this documentation.

For a complete macOS installation guide, see this document.

First, we need to clone the repo that contains the Flutter CLI binary and then add it to the system directory. For example, I clone repo to a directory dedicated to binary files and add this new directory to the $HOME/.bashrc and $HOME/.zshrc files.

  1. Cloning repo:
git clone -b alpha https://github.com/flutter/flutter.git
Copy the code
  1. Add path:
export PATH=$HOME/bin/flutter/bin:$PATH(or fill in the installation path of your choice)Copy the code
  1. Run the Flutter Doctor from the command line to detect that the flutter path is correctly identified and install all the required dependencies:
flutter doctor
Copy the code

Install other dependencies

Xcode must be installed if you are deploying an iOS app; If you are deploying an Android app, you must install Android Studio.

To learn about installing these two different platforms, refer to the documentation: Documentation.

Create your first Flutter app

Now that we have the Flutter CLI installed, we are ready to create our first app. Run the flutter create command:

flutter create myapp
Copy the code

This command will help you create a new app, go to a new directory, open an iOS emulator or an Android emulator, and run the following command:

flutter run
Copy the code

This command will run the app in the emulator you have opened. If you have both iOS and Android emulators on, you can use the following command to pass the application to the specified emulator:

flutter run -d android / flutter run -d iPhone
Copy the code

It can also be run simultaneously:

flutter run -d all
Copy the code

At this point you should see a message in the console about restarting the app:

The project structure

The code you are running is in the lib/main.dart file.

You’ll find an Andoird folder and an iOS folder where the native project is stored.

The project is configured in pubspec.yaml, which is similar to package.json in the JavaScript ecosystem.

Now turn to lib/main.dart.

In the header of the file, you can see an import:

The import 'package: flutter/material. The dart ";

Where does this dependency file come from? If you look at the pubspec.yaml file, you can see that there is a single flutter dependency in the dependency list, here the referenced package: Flutter /. If you want to add or import additional dependencies, you need to add the new dependencies to pubspec.yaml and then use import to use them.

In the header of main.dart, we can also see that there is a function called main. In Dart, main is the special, necessary, top-level function where the app starts executing. Because the Flutter was built by Dart, main is also the main entrance to the project.

void main() {
  runApp(new MyApp());
}
Copy the code

This function calls new MyApp(), the class. Similar to the React App, there is a made up by multiple components of the main components, and then call ReactDOM. Render or AppRegistry. RegisterComponent for rendering.

Widget

One of the core principles in the Overview of Flutter technology is that “everything is a Widget”.

Widgets are the basic building blocks of every Flutter app. Each Widget is an immutable definition of the user interface. Unlike other frameworks that separate view, controller, layout, and other attributes, Flutter has a unified, consistent object model: widgets.

Comparing to Web terminology or JavaScript, you can think of widgets as something similar to Components. Widgets typically consist of inner classes that may or may not contain some local state or method.

If you look at main.dart, you’ll see class references like StatelessWidget, StatefulWidget, Center, and Text. These are widgets. If you want to learn about all the widgets available, consult the documentation.

Layout and writing styles

While Dart and most of the Flutter frameworks are easy to use, the layout and styling gave me a bit of a headache at first.

It’s important to note that unlike writing Web styles, and unlike React Native Views that do all the layouts and some styles, the layout of the Flutter is determined by the type of Widget you choose and its own layout and style properties. That is, it usually depends on the Widget you’re using.

For example, a Column can receive multiple child widgets, but it does not accept any style properties (except layout properties such as CrossAxisAlignment and direction); Containers can receive a variety of layout and style attributes.

The Flutter also has some layout specific components, such as Padding, which can only receive a child Widget but does nothing more than add Padding (margin) to the child Widget.

See this complete list of widgets that help you implement layouts using Containers, Rows, columns, centers, GridViews, and other components that have their own layout specifications.

SetState and lifecycle functions

Similar to React, The Flutter has stateless and stateless components or widgets. Stateful components can create, update, and destroy state, similar to the lifecycle functions used in React.

Within Flutter, there is also a function called setState to update the state. You can see this function in the _incrementCounter method of the project we just created.

See StatefulWidget, State, and StatelessWidget for more information.

conclusion

As a developer who specializes in making cross-platform apps, I’ll keep an eye on React Native’s competitors. It’s also an option for customers who may require Fluter for some reason. I think Flutter gives my customers some of the things they want, such as a built-in type system, first-class UI library, NAV library maintained by the core team, etc.

I will add the Flutter to my technology stack and use it when I encounter problems and situations that the React Native cannot solve. As soon as I feel I can use it in a production environment, I will show my first Flutter app to customers as a choice of technology.

My name is Nader Dabit. I’m an AWS Mobile developer, developer of Apps like AppSync, Amplify, and founder of React Native Training.

If you like React and React Native, subscribe to our podcast – React Native Radio at devchat. TV.

In addition, Manning Publications has published my book React Native in Action.

If you liked this post, please give it a thumbs-up

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.