This document is a summary of the process of learning, the article details: flutterchina. Club/flutter – for… .

Views

What does UIView correspond to in a Flutter?

Widgets are similar to UIViews, with the following differences:

  • When the widgets and their state are changed, the Flutter builds a new widgets tree. Views are not recreated when they are changed.
  • The Flutter widgets are very lightweight. Widgets themselves are not controls and are not drawn directly, but rather descriptions of the UI.
  • To update views on iOS, just change them directly. In a Flutter, widgets are immutable and cannot be updated directly. You need to manipulate the state of the widget.
  • In iOS, layout can be defined by constraints or frames. In Flutter, layout can be declared by writing a widget tree (you can add padding to any widget). Here is the layout provided by Flutter.
  • In iOS, you can dynamically add or remove child views by calling addSubview() in the parent view or removeFromSuperview() in the child View. In Flutter, there is no direct equivalent to addSubview() because the widget is immutable. Instead, you can pass a function to parent that returns the widget and control the creation of the child widget with a Boolean value.
  • In iOS, you can animate a view by calling the animate(withDuration: Animations 🙂 method. Instead of creating an animation widget, use animation libraries to wrap widgets in Flutter. In Flutter, use the AnimationController. This is a type of Animation that can pause, find, stop, and reverse an Animation. It needs a Ticker to send a signal when vsync occurs and to create a linear interpolation between 0 and 1 at every frame run. You can create one or more animations and attach them to a controller.

drawing

On iOS, you use CoreGraphics to draw lines and shapes on the screen. Flutter has a different SET of apis based on the Canvas class, as well as the CustomPaint and CustomPainter classes to help you draw. The latter implements your drawing algorithm on the canvas.

How do I create custom widgets

In iOS, you subclass UIView, or use an existing view to overload and implement methods to achieve a particular function. In Flutter, you will be composing multiple small widgets to build a custom widget (rather than extending it).

navigation

Page to page jump

In iOS, you can jump between view Controllers using the UINavigationController that manages the View Controller stack.

Flutter has a similar implementation using Navigator and Routes. A route is an abstraction of a “screen” or “page” in an App, and a Navigator is a widget that manages multiple routes. You can roughly map a route to a UIViewController. Navigator works much like the UINavigationController in iOS, pushing () and pop() routes when you want to jump to or return to a new page.

Jump to another App

In iOS, to jump to another App, you need a specific URL Scheme. For system-level apps, this scheme depends on the App. To implement this functionality in Flutter, you can create a native platform integration layer or use an existing plugin, such as URl_launcher.

Threading and asynchrony

How do I write asynchronous code

Dart is a single-threaded execution model, but it supports Isolate (a way to make Dart code run on other threads), event loops, and asynchronous programming. Unless you create an Isolate yourself, your Dart code always runs on the UI thread and is driven by an Event loop. The event loop of a Flutter is similar to the main loop in iOS — the Looper is attached to the main thread.

Dart’s single-threaded model doesn’t mean that you write code that blocks operations and thus jams the UI. Instead, use the asynchronous tools provided by the Dart language, such as async/await, to implement asynchronous operations.

Put the work into the background thread

Since the Flutter is single-threaded and runs an event loop (just like Node.js), you do not have to worry about thread management or enabling background threads. If you are doing I/O operations such as accessing disks or network requests, safely use async/await and you are done. If, in other cases, you need to do busy computationally intensive tasks for the CPU, you need to use Isolate to avoid blocking event loops.

Computer extensions are separate running threads that do not share memory with the memory heap of the main thread. This means you can’t access variables in the main thread, or use setState() to update the UI. As their name suggests, Computers cannot share memory.

Making a Network request

Making web requests using HTTP is very simple, similar to AFNetworking or Alamofire.

Loading progress bar

In iOS, you use UIProgressView when you’re running time-consuming tasks in the background. In Flutter, use a ProgressIndicator widget. A Boolean flag controls whether progress is displayed. Tells Flutter to update its status at the start of the task and disappears at the end.

Engineering structures, localization, dependencies, and resources

How to introduce Image Assets into Flutter? What about multi-resolution?

IOS treats images and assets as different things, while Flutter only has assets. Assets in Flutter can be any type of file, not just images. For example, you can place json files in your my-Assets folder.

For images, Flutter, like iOS, follows a simple format based on pixel density. Image assets may be 1.0x 2.0x 3.0x or any other multiple.

Where do I put strings? How do you localize?

Unlike iOS, which has a file called Localizable. Strings, Flutter does not currently have a system for handling strings. For now, the best practice is to copy your text to the static area and access it here.

By default, Flutter supports only American English strings. If you want to support other languages, introduce the Flutter_localIzations package. You may also want to introduce intL packages to support other I10N mechanisms, such as date/time formatting.

What is Cocoapods equivalent to? How do I add dependencies?

In iOS, you add dependencies to your Podfile. Flutter uses the Dart build system and the Pub package manager to handle dependencies. These tools delegate the build of native Android and iOS wrappers to the appropriate build system.

If you have podfiles in your iOS folder in the Flutter project, use it only when you integrate for each platform. In general, use Pubspec. yaml to declare external dependencies in Flutter. One place to find excellent Flutter packages is the Pub.

ViewControllers

What does a ViewController correspond to in a Flutter?

In iOS, a ViewController represents a portion of the user interface, most commonly used for a screen, or a portion of it. They are combined to build complex user interfaces and help you break down your App’s UI. In Flutter, this task falls back to widgets. As mentioned in the interface navigation section, a screen is also represented by widgets because “Everything is a widget!” . Use Navigator to jump between routes or render different states of the same data.

How do I listen for life cycle events in iOS?

In iOS, you can override methods in ViewController to capture the lifecycle of its view, or register lifecycle callback functions in AppDelegate. Without these two concepts in the Flutter, but you can use the hook WidgetsBinding observers to monitor life cycle events, and to monitor didChangeAppLifecycleState () the change of the event.

Observable life cycle events are:

  • Inactive – The application is inactive and will not accept user input. This event only works on iOS, there is no equivalent event on Android.
  • Paused – The application is temporarily invisible to the user and runs in the background, although it does not accept user input.
  • Resumed – The application is visible and also responds to user input.
  • Kickbacks – apps are suspended temporarily, not on iOS.

More details: AppLifecycleState

layout

What does UITableView and UICollectionView correspond to in Flutter?

In iOS, you might use a UITableView or a UICollectionView to present a list. With Flutter, you can use ListView to achieve a similar implementation. In iOS, you use the proxy method to determine the number of rows, the cell size of each index path, and the cell size. Because of the immutable nature of the widgets in Flutter, you need to pass a list of widgets to the ListView. Flutter ensures that scrolling is fast and smooth.

How do you know which element of the list is clicked?

IOS, you pass a tableView: didSelectRowAtIndexPath: proxy method to implement. In Flutter, use the touch Handle of the widget passed in.

How do I update the ListView dynamically?

A simple way to update the ListView is to create a new list in setState() and copy the data from the old list to the new list. While this is simple, it is not recommended when the data set is large.

A recommended, efficient, and effective way to build a list is to use ListView.Builder. This method is useful when you want to build dynamic lists, or lists that have a lot of data.

What is a ScrollView equivalent to in a Flutter?

In iOS, you wrap a View with a ScrollView to allow the user to scroll through your content as needed. The easiest way to do this with Flutter is to use the ListView widget. It behaves like both an iOS ScrollView and a TableView because you can arrange its widgets vertically.

Gesture detection and touch event processing

How do I add a click listener to a Flutter widget?

In iOS, you add GestureRecognizer to a View to handle click events. There are two ways to add click listeners to Flutter:

  • If the widget itself supports event monitoring, pass it a function directly and implement the response method in that function.
  • If the widget itself does not support event monitoring, wrap a GestureDetector around it and pass a function to its onTap property.

How do you handle other gestures on widgets?

Using GestureDetector you can listen for a wider range of gestures, such as:

  • Tapping
    • OnTapDown – Tap the screen at a specific location.
    • OnTapUp – generates a tap potential at a specific location and stops touching the screen.
    • OnTap – Creates a light touch potential.
    • OnTapCancel – Triggers onTapDown but fails to trigger tap.
  • Double tapping
    • OnDoubleTap – The user quickly clicks the screen twice in the same place.
  • Long pressing
    • OnLongPress – The user touches the screen in the same place for a long time.
  • Vertical dragging
    • OnVerticalDragStart – Touches the screen and may move vertically.
    • OnVerticalDragUpdate – Touches the screen and continues to move vertically.
    • OnVerticalDragEnd – Previously touched the screen and moved vertically, and moved at some vertical speed before stopping touching the screen.
  • Horizontal dragging
    • OnHorizontalDragStart – The screen is touched and may move horizontally.
    • OnHorizontalDragUpdate – Touches the screen and continues to move horizontally.
    • OnHorizontalDragEnd – Touch points that previously touched the screen and moved horizontally are separated from the screen.

Theme and text

How to set theme for App?

The Flutter implements a beautiful set of MD components and is available out of the box. It takes over a whole bunch of styles and themes that you need.

To take full advantage of the MD component in your App, declare a top-level widget, The MaterialApp, as your App entrance. MaterialApp is a convenience component that contains many MD style components typically required by apps. It is implemented by adding MD functionality through a WidgetsApp.

How to set a custom font for a Text Widget?

In iOS, you introduce arbitrary TTF files into your project and set references in info.plist. In Flutter, place the font file in the folder and reference it in pubspec.yaml, then specify the font in your Text widget.

Form input

How do forms work in Flutter? How do I get user input?

In the practice of form processing, as anywhere else in Flutter, specific widgets are passed. If you have a TextField or a TextFormField, you can get user input through the TextEditingController.

What does the placeholder in a Text field correspond to?

In Flutter, you can easily display “tips” or placeholder Text by repassing the InputDecoration to the decorator parameter of a Text widget.

How do I display validation error messages?

Pass an InputDecoration to the decorator constructor parameter of the Text Widget just as you would to display a “tip.” However, you don’t want to start with an error message. Instead, when the user enters the authentication information, the status is updated and a new InputDecoration object is passed in.

Interact with hardware, third-party services, and platforms

How do you interact with the platform and its native code?

Flutter provides platform channels to communicate and interact with data from the ViewController that manages your Flutter view. The platform pipeline is essentially an asynchronous communication mechanism that Bridges the Dart code with the host ViewController and the iOS framework it runs on. You can use platform pipes to perform a native function, or to fetch data from the device’s sensors.

In addition to using platform pipes directly, you can also use a series of pre-made plugins. For example, you can use plug-ins directly to access camera film or the device’s camera without having to write your own integration layer code. You can find plug-ins at Pub, a repository of open source packages for Dart and Flutter. Some of these packages may support integration with iOS or Android, or both.

If you can’t find a plugin that meets your needs on Pub, you can write it yourself and publish it on Pub.

How do I access the GPS sensor?

Through the Location community plug-in.

How do I access the camera?

Through the image_picker plug-in.

How do I log into Facebook?

You can log into Facebook using the Flutter_facebook_login community plugin.

How do I create my own native integration layer?

If there are platform-specific features that Flutter and community plug-ins miss, you can build your own plug-ins according to the Developing Packages and Plugins page.

Database and local storage

How to access UserDefaults in Flutter?

In iOS, you can use property lists to store collections of key-value pairs, known as UserDefaults.

A similar function can be achieved with Flutter using the Shared Preferences plugin. It wraps the functionality of UserDefaluts and the Android equivalent of SharedPreferences.

What does CoreData correspond to in Flutter?

In iOS, you store structured data through CoreData. This is a high-level encapsulation of an SQL database that makes the query and correlation model much simpler.

In Flutter, the SQFlite plugin is used to do this.

notice

How do I push notifications?

In iOS, you need to register with the Apple Developer Platform to allow push notifications.

In Flutter, this is done using the Firebase_messaging plugin.

For more Articles, see Articles