What is a Flutter?

On February 27, 2018, Google released the first Beta version of Flutter at Mobile World Congress 2018. Flutter is Google’s new mobile UI framework to help developers develop high quality native apps on both iOS and Android.

In fact, I first heard about Flutter when I received a post from a Google developer account. After reading the article, I felt that Flutter had some really great advantages:

  • Hot Reload. As a new Android developer, it’s really nice to be able to Reload it. You can save and Reload it with a CTRL + S in Android Studio, and the emulator will see it immediately.
  • Everything is the idea of a Widget. For Flutter, everything in the mobile app is a Widget, enabling an appealing and flexible interface design with a combinable collection of Spaces, a rich animation library, and a layered extension architecture.
  • High quality user experience across platforms with a portable GPU-accelerated rendering engine and high performance native code runtime. While I have no idea what a portable GPU-accelerated rendering engine is, the end result is that applications built with Flutter will run almost as efficiently as native applications.
  • There is a Demo of Flutter on Coolant, Flutter Gallery.
  • Google Fuchsia OS Preview, which is a new operating system that Google is rumored to be developing, so personally, Flutter may exist not only to run on Android and IOS, but also to enrich the software ecosystem of the new Fuchsia system.

The heart of Flutter

Next I would like to write my own understanding of the second point of Flutter, which is the core of Flutter and its benefits, through these two days of exposure.

In Flutter, every application is a Widget. Unlike other application frameworks, the object model of Flutter is the same, that is, a control. A control can define:

  • Structural elements (such as buttons or menus)
  • Style elements (such as fonts or color schemes)
  • layout
  • Some business logic

Controls form a hierarchical structure based on composition, where each control is nested and inherits properties from its parent. There is no separate “application” object, only the root control. You can respond to events, such as user interactions, by telling the framework to replace a control in the hierarchy with another control, and then the framework will compare the new control with the old control and effectively update the user interface, that is, updating the changed control.

That is, in Flutter, an application is a combination of many widgets.

practice

Made a douban movie list function

You will learn

  • How to use list controls, Row controls, and Column controls
  • How to use network loading and how to handle asynchronous operations
  • Implement loading more
  • How to use the flutter layout is quite easy to understand. Row controls, Column controls, ListView controls can make this effect
  • Use buildDefaultTabController easy implement viewpager similar things
  • Implement custom control Ratingbar
  • tab
  • bottomNavigationBar
  • Jump between pages.
  • Json2model code is generated automatically

I’ve got some potholes here

  • Using a horizontal ListView inside the ListView item will not run, so that will be Row instead.
  • When column and row controls are used, the interface is displayed. The location is due to the presence of uncertain recT child controls. Therefore, the solution is to use expande, or Flexable wrap, or other ways to determine how to occupy the child controls, how much space.
  • There is an issue with the image control cacheImage

Here’s how it looks:



Added a section page

You can learn, bottomModalDialog



Installation package size

The installation package has 8 meters. Since native scripts are not this big, it is easy to see that the Flutter library is a large part of the actual DEX file.



Upload the source code has played a good APK, you can directly download the installation, IPA package did not play, played no jailbreak generally can not be installed, Apple this is not very friendly to developers.

Matters needing attention

  • If you want to download the source code for yourself:
  • Config. dart is the value in the key.properties file of android project which requires you to apply for appID and secretKey by yourself on showApi platform. Refer to the Build and Release for Android section of the Dart. IO documentation for details on how to package.

Original author: BravekingZhang

The address of the project: https://github.com/bravekingzhang/flutter_me



Welcome to follow my wechat public account “Code farming breakthrough”, share Python, Java, big data, machine learning, artificial intelligence and other technologies, pay attention to code farming technology improvement, career breakthrough, thinking transition, 200,000 + code farming growth charge first stop, accompany you have a dream to grow together