I have known about Flutter for some time and have run several demos, and the results are really good. I rewrote my own simple Android App, Flutter, so that it could be used on both Android and iOS devices.

First, I will introduce the function of this simple App. After obtaining data from the URL, I will parse the HTML and then display a List. After clicking each item, I will jump to the browser and open the corresponding URL. Function is very simple, here is mainly to record the development process of new recognition or new to learn some of the content.

network

Network requests refer directly to the Fetch Data from the Internet section in the Cookbook. What is interesting is that when you add the HTTP dependency, you find that the version number is not the same as the semantic version management. The format is as follows:

Version: 1.0.0 + 1Copy the code

+ indicates the build number of the application, which corresponds to the versionCode of Android and CFBundleVersion of iOS

Detailed annotations are given in pubspec.yaml

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundatio nKeys.html
Copy the code

Asynchronous requests, using the Future and FutureBuilder. The Future sends the request, and the FutureBuilder retrieves the returned data and uses it.

Parsing Html

Get requests get data directly in HTML format, which requires an HTML parser that can easily parse the returned HTML content into a Document object according to the HTML instructions.

Dart: Convert Libaray Utf8Codec does not support utF8 encoding. Dart :convert Libaray Utf8Codec does not support UTF8 encoding.

Utf8Codec utf8 = Utf8Codec(allowMalformed: true);
String utf8Body = utf8.decode(response.bodyBytes, allowMalformed: true);
Copy the code

regular

The where method of re and List is used to filter out the data that meets the condition

RegExp exp = RegExp(r"_\d.\d.\d");
var verList =
    aTagList.where((t) => exp.hasMatch(t.innerHtml)).toList();
Copy the code

WebView

How to open a Native WebView in Flutter? Use the webview_FLUTTER plugin to encapsulate the flutter into a Widget that can be used directly.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class FlutterWebView extends StatelessWidget {
  const FlutterWebView({Key key, this.url, this.title}) : super(key: key);

  final String url;
  final String title;

  @override
  Widget build(BuildContext context) {
    returnScaffold( appBar: AppBar( title: Text(title), ), body: WebView( initialUrl: url, javascriptMode: JavascriptMode.unrestricted, ), ); }}Copy the code

Open a browser

Originally, the parsed URL appeared fine in the WebView, but since the link in the page needed to download the content, I switched to using the browser to open the URL directly. The plugin url_launcher is quite convenient for Flutter to open a browser to display a page. Url_launcher not only opens web pages, but also lets you create emails, make phone calls, send text messages, and more.

_launchURL() async {
  const url = 'https://flutter.dev';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url'; }}Copy the code

The build results

After the development is completed and the phone is running ok, if you want to know where the apK or IPA is finally generated, go to the build directory to find it directly. Find Android APK file in build/app/outputs/ APk/directory, and Runner. App in build/ios/ directory corresponding to the real machine and emulator. Unlike Android, ios cannot get IPA file directly, so xcode is needed. If you are releasing an iOS App, see Build and Release an iOS App.

Android starts with a black screen

When the Flutter App is opened in Debug mode on an Android phone, there will be a short black screen between the startup page and the home page display. This may be due to the initialization process of the Flutter engine. No solution was found for this black screen problem, but fortunately, in Release mode, this problem does not exist.