By

Contents
  1. 1. Flutter 简介
    1. 1.1. 1.什么是Flutter
    2. 1.2. 2.历代跨平台更替
      1. 1.2.1. Native
      2. 1.2.2. WebView
      3. 1.2.3. React Native
    3. 1.3. Flutter
      1. 1.3.1. 项目层级介绍

Flutter 简介

1.什么是Flutter

  • 跨平台
  • 热重载（调试快）
  • widget（组合）
  • 性能还行
    ……

2.历代跨平台更替

Native

Apple iOS SDK 于2008年发布，2009年发布 Google Android SDK。这两个 SDK 分别基于不同的语言：Objective-C 和 Java。

WebView

第一个跨平台框架基于 JavaScript 和 WebViews。 例如 Titanium 和一系列相关的框架：PhoneGap，Apache Cordova，Ionic 等等。 在苹果发布 iOS SDK 之前，他们鼓励第三方开发者为 iPhone 构建 webapps，所以用 web 技术构建跨平台的应用程序是一个显而易见的步骤。

  • 坑多
  • 性能较差
  • 动态化方便

React Native

像ReactJS（和其他）这样的响应式Web框架已经变得流行，主要是因为它们通过使用从响应式编程中借用的编程模式来简化Web视图的创建。 2015年，创建了 React Native 将响应式视图的诸多好处带给移动应用程序。

  • 性能相对h5较好
  • 动态化方便
  • 社区的力量(坑->->少)

Flutter

像 React Native 一样，Flutter 也提供响应式风格的视图。 Flutter 使用编译的编程语言即Dart 的方法来避免 JavaScript 桥引起的性能问题,。 Dart 被“提前编译”（AOT）编译成多个平台的本地代码。 这使得 Flutte r可以与平台进行通信，而无需通过执行了上下文切换的JavaScript Bridge。 编译为本机代码也可以提高应用程序的启动时间。

  • Flutter将 Widgets 和渲染器从平台移动到应用程序中，从而使其可以自定义和扩展
  • 反应式视图的优点，没有 JavaScript Bridge
  • 快速，流畅，可预测; 代码将 AOT 编译为本机（ARM）代码
  • 带有漂亮，可定制的 widgets

项目层级介绍

  • android、ios (Flutter相对应的Native）
  • lib(main 程序的主入口，我们平时做Flutter开发的主入口)
  • pubspec.yaml

做开发的我们肯定不是什么都自己写代码，这边可能会有点疑惑，如果我们要用到第三方的代码该怎么做，android 当中是通过gradle里去添加

Flutter这边通过pubspec.yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
name: flutter_tydemo
description: A new Flutter application.

// 下面定义了应用程序的版本和构建号。版本号是三个用点分隔的数字，比如1.2.43 
//,后面是一个由+分隔的可选构建号。
//版本号和构建器号都可能在flutter中被覆盖
// build通过分别指定—build-name和—build-number进行构建。
version: 1.0.0+1

environment:
  sdk: ">=2.0.0-dev.68.0 <3.0.0"

dependencies:  //依赖
  flutter:
    sdk: flutter

  // 以下就是通过pub.com 来依赖第三方的插件 （类似github npm）
  cupertino_icons: ^0.1.2
  flutter_redux: ^0.5.2
  fluttertoast: 2.0.9
  json_annotation: ^2.0.0
  flutter_statusbar: ^0.0.1
  shared_preferences: ^0.4.2
  flutter_spinkit: ^2.0.1
  dio: ^1.0.6
  connectivity: ^0.3.1
  event_bus:  ^1.0.1
  sqflite: ^0.13.0
  path_provider: ^0.4.1

// Flutter sdk版本
dev_dependencies:      
  build_runner: ^1.1.1  //解决版本依赖冲突
  json_serializable: ^2.0.0
  flutter_test:
    sdk: flutter

  # 要向应用程序添加资源文件，请添加资源文件部分，如下所示:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.io/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.io/assets-and-images/#from-packages

  // 添加相应的ttf的icons
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  
//增加相对应的图片
  assets:
  - res/images/welcome.png
  - res/images/tuyaMark.png

到这里大家应该有个模糊的概念了吧

下一篇 Flutter Widget