Flutter笔记(一)

Android/iOS移动端开发

原生开发

Android原生应用通常指使用Java或Kotlin语言直接调用Android SDK开发的应用程序；而iOS原生应用通常指使用Objective-C或Swift语言直接调用iOS SDK开发的应用程序。

主要优势：

• 可访问平台全部功能（GPS、摄像头）;

• 速度快、性能高、可以实现复杂动画及绘制，整体用户体验好；

主要缺点：

• 平台特定，开发成本高；不同平台必须维护不同代码，人力成本随之变大；
• 内容固定，动态化弱，大多数情况下，有新功能更新时只能发版；

跨平台开发

技术类型	UI渲染方式	性能	开发效率	动态化	框架代表
H5+原生	WebView渲染	一般	高	支持	Cordova、Ionic
JavaScript+原生渲染	原生控件渲染	好	中	支持	RN、Weex
自绘UI+原生	调用系统API渲染	好	Flutter高, QT低	默认不支持	QT、Flutter

Flutter安装与配置

• 下载flutter https://flutter.dev/docs/get-started/install

• MacOS下安装和设置环境变量

  vi $HOME/.bash_profile
  

  export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
  export PATH=/Users/用户名/flutter/bin:$PATH
  

  source $HOME/.bash_profile
  

• flutter --version

  Flutter 1.9.1+hotfix.2 • channel stable • https://github.com/flutter/flutter.git
  Framework • revision 2d2a1ffec9 (6 days ago) • 2019-09-06 18:39:49 -0700
  Engine • revision b863200c37
  Tools • Dart 2.5.0
  

• flutter doctor

  Doctor summary (to see all details, run flutter doctor -v):
  [✓] Flutter (Channel stable, v1.9.1+hotfix.2, on Mac OS X 10.14 18A391, locale zh-Hans-CN)
   
  [✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
  [✗] Xcode - develop for iOS and macOS
      ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
        Download at: https://developer.apple.com/xcode/download/
        Or install Xcode via the App Store.
        Once installed, run:
          sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
      ✗ CocoaPods not installed.
          CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage
          on the Dart side.
          Without CocoaPods, plugins will not work on iOS or macOS.
          For more info, see https://flutter.dev/platform-plugins
        To install:
          sudo gem install cocoapods
          pod setup
  [!] Android Studio (version 3.5)
      ✗ Flutter plugin not installed; this adds Flutter specific functionality.
      ✗ Dart plugin not installed; this adds Dart specific functionality.
  [✓] VS Code (version 1.38.0)
  [!] Connected device
      ! No devices available
  ! Doctor found issues in 3 categories.
  

Flutter特性

Flutter是Fuchsia的开发框架，是一套移动UI框架，可以快速在iOS、Android以及Fuchsia上构建高质量的原生用户界面。其官方编程语言为Dart。

• 快速开发：Flutter的热重载可以快速地进行测试、构建UI、添加功能并更快地修复错误。
• 富有表现力，漂亮的用户界面：自带的Material Design和Cupertino（iOS风格）widget、丰富的motion API、平滑而自然的滑动效果。
• 响应式框架：使用Flutter的现代、响应式框架，和一系列基础widget，轻松构建您的用户界面。
• 访问本地功能和SDK：Flutter可以复用现有的Java、Swift或ObjC代码，访问iOS和Android上的原生系统功能和系统SDK。
• 统一的应用开发体验：Flutter拥有丰富的工具和库，可以帮助开发者轻松地同时在iOS和Android系统中实现想法和创意。
• 原生性能：Flutter包含了许多核心的widget，如滚动、导航、图标和字体等，这些都可以在iOS和Android上达到原生应用一样的性能。

Dart语言

• Dart是AOT（Ahead Of Time）编译的，编译成快速、可预测的本地代码，使Flutter几乎都可以使用Dart编写；
• Dart也可以JIT（Just In Time）编译，开发周期快；
• Dart可以更轻松地创建以60fps运行的流畅动画和转场；
• Dart使Flutter不需要单独的声明式布局语言；
• Dart容易学习，具有静态和动态语言用户都熟悉的特性。

Flutter框架结构

Flutter Framework是一个纯 Dart实现的 SDK，它实现了一套基础库，自底向上，我们来简单介绍一下：

• 底下两层（Foundation和Animation、Painting、Gestures）在Google的一些视频中被合并为一个dart UI层，对应的是Flutter中的dart:ui包，它是Flutter引擎暴露的底层UI库，提供动画、手势及绘制能力。
• Rendering层，这一层是一个抽象的布局层，它依赖于dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上，这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心的部分，它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制(调用底层dart:ui)。
• Widgets层是Flutter提供的的一套基础组件库，在基础组件库之上，Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。而我们Flutter开发的大多数场景，只是和这两层打交道。

创建第一个APP

lib/main.dart

import 'package:flutter/material.dart';
 
void main() => runApp(new MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

• import导入Material， Flutter提供了一套丰富的Material widgets。
• MaterialApp 是Material库中提供的Flutter APP框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等。
• Scaffold是Material库中提供的页面脚手架，它包含导航栏和Body以及FloatingActionButton