一门跨全平台移动应用开发（这里主要是以Mac电脑来安装和开发）

安装过程：

1.下载Flutter
2.新建目录：/Users/fangcao/Documents/flutter_code
3.将flutter安装程序放在flutter_code

1 2	cd ~/flutter_code unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

将flutter_macos_v0.5.1-beta.zip解压到flutter_code里面
4.在～/.bash_profile目录里面加入：export PATH=pwd/flutter/bin:$PATH
5.如果你的终端用了zshrc,就得：vim ~/.zshrc 最后添加 source ~/.bash_profile

这样全局的环境变量PATH安装成功

注意：google出的东西都需要翻墙下载，不过，这次google给我们提供了一个临时镜像，此镜像为临时镜像，并不能保证一直可用，读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

1 2	export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置

接着运行
1
flutter doctor

检查安装哪些依赖,该命令检查您的环境并在终端窗口中显示报告
缺少的功能或者模块，它会给你提示，按照指示安装即可（一般ios和android软件安装配置完成即可，下面会讲解ios和android软件的安装和配置）。

该flutter工具使用Google Analytics匿名报告功能使用情况统计信息和基本崩溃报告。这些数据用于帮助改进Flutter工具。Analytics不是一运行或在运行涉及flutter config的任何命令时就发送，因此您可以在发送任何数据之前退出分析。要禁用报告，请执行flutter config –no-analytics并显示当前设置，然后执行flutter config。请参阅Google的隐私政策。

在vscode里面的终端：发现

没有flutter,就运行一下source ~/.bash_profile
最后检查下echo $PATH 看看是否已经添加到环境变量中

安装flutter插件
安装后，flutter doctor检查一下。

发现要进行如下安装：

brew update
brew install --HEAD usbmuxd
 brew link usbmuxd
 brew install --HEAD libimobiledevice
 brew install ideviceinstaller ios-deploy cocoapods
 pod setup

前端：vscode安装flutter，还要安装Dart sdk
安卓：
IOS:Xcode

详细步骤：Flutter macOS 开发环境搭建笔记

开始HelloWorld

这里以最新的Dart2为主

1.安装dart:https://dart.dev/tutorials/web/get-started

1 2	brew tap dart-lang/dart brew install dart --devel

如果你需要开发 web 应用，则还需要安装 Dartium 和 Content Shell：

1 2	$ brew tap dart-lang/dart $ brew install dart --with-content-shell --with-dartium

2.看看flutterSDK是不是最新的，如果不是，就升级FlutterSDK

1	flutter upgrade

3.开启手机应用

IOS：

1	open -a Simulator

Flutter 配置在 Android Studio
Android Studio添加Flutter开发

如果发现报错了：
1.flutter错误解决–Error running Gradle 错误

2.flutter\packages\flutter_tools\gradle
打开文件进行修改，修改代码如下（其实也是换成阿里的路径就可以了）。
这一步有两种情况
1，flutter.gradle文件中repositories中是google() 和 jcenter()，
repositories{
google()
gcenter()
}
把google() 和 jcenter()这两行去掉。改为阿里的链接。
maven { url ‘https://maven.aliyun.com/repository/google' }
maven { url ‘https://maven.aliyun.com/repository/jcenter' }
maven { url ‘http://maven.aliyun.com/nexus/content/groups/public' }

4.创建flutter程序

flutter create my_app
cd my_app
flutter run
flutter -h

5.VScode中常用的快捷键
R键：点击后热加载，直接查看预览效果
P键：在虚拟机中显示网格，工作中经常使用
O键：切换Android和IOS的预览模式
Q键：推出调试预览模式

APP开启

Xcode 9 —进阶的 iOS Simulator
查询设备

选择运行在哪个模拟器上

运行在安卓上

运行在IOS上

运行在所有设备上

1
2
3

flutter emulator //在运行前检查模拟器是否存在
如果有模拟器，输入：flutter emulators --launch <模拟器ID>,运行模拟器
如果创建新的模拟器，输入：flutter emulators --create [--name <模拟器ID>]

开始组件讲解
https://www.imooc.com/video/18530

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World'),
        ),
        body: Center(
          child: Text(
            'Hello World,触发事件，在触发n秒后才执行，如果在触发时间的n秒内再次触发事件，那就以新的时间为准，n秒后才执行。总之，需要你在触发事件的n秒内不再触发新事件，我才执行。',
            textAlign: TextAlign.left,
            // maxLines: 2,
            // overflow: TextOverflow.fade,
            style: TextStyle(
                fontSize: 25.0,
                color: Color.fromARGB(120, 255, 0, 0),
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.solid),
          ),
        ),
      ),
    );
  }
}

Flutter web

https://dart.dev/web

如何评价 Flutter for Web？

针对 Web 的 Flutter 框架的技术预览版：https://flutter.dev/web
Github 仓库：https://https://github.com/flutter/flutter_web ter_web
示例程序：https://https://flutter.github.io/samples/ or https://github.com/flutter/flutter_web

Flutter for Web架构图

https://dart.dev/tutorials/web/get-started

1.安装 Dart

1 2	$ pub global activate webdev $ pub global activate stagehand

2.安装 webdev 和 stagehand:

Stagehand- A Dart project generator

1 2	$ pub global activate webdev $ pub global activate stagehand

3.创建一个wep app

mkdir quickstart
cd quickstart
stagehand web-simple
pub get 获取包

4.运行app

1 2	webdev serve webdev serve --auto restart 加入了热重新加载

如果觉得webdev serve –auto restart 太麻烦，可以尝试 flutter pub global run webdev serve –auto restart

5.打包发布

1	webdev build

flutter项目和flutter web项目的不同

文件配置说明

pubspec.yaml包管理

资源管理
 在Flutter中添加资源和图片


#name很重要，如果修改了name所有的dart的文件的import前引用的本地的文件啊的包名都需要修改
name: flutterdemo #包名
description: A new Flutter application.
 
dependencies:
  flutter:
    sdk: flutter
 
 #添加依赖packages ^表示适配和当前大版本一致的版本，~表示适配和当前小版本一致的版本
  cupertino_icons: ^0.1.2
  english_words: ^3.1.0
 # image_picker: ^0.4.8
 
dev_dependencies:
  flutter_test:
    sdk: flutter
 
  #启用国际化1
  flutter_localizations:
    sdk: flutter
 
#定义常量
 
#数组
server:
    - aaaaaa
    - bbbbbb
	- dddddd
#常量
age: 22         # int
boolitem: true  #定义一个boolean值
name: 'hello'   #定义一个string
 
 
flutter:
 
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true #启用国际化2
  # To add assets to your application, add an assets section, like this:
  #添加资源，不单单是图片，images是个和pubspec.yaml配置文件同级的目录，如果不同级，需要添加..
  assets:
        - images/park.jpg
        - images/lake.jpg
        - images/touxiang.jpg
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
   #字体设置
   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

name:包名

引入图片资源

#不同尺寸图片资源写法：
…/my_icon.png
…/2.0x/my_icon.png
…/3.0x/my_icon.png

读取文本

import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
//读取文件是的路径，就是assets下配置的 
return await rootBundle.loadString('assets/config.json');
}

使用图片

1 2	//图片路径的配置 new AssetImage('graphics/background.png'),

加载依赖包中图片

1 2	//配置name的作用，需要读取其他外部package下的资源时 new AssetImage('icons/heart.png', package: 'my_icons')

支持字体的设置，可以使用自定义字体

1	style: new TextStyle( fontFamily: 'Schyler', fontSize: 24.0, ),

基本控件

flutter提供了一套完备的基本控件，最常用的有如下几个：

Text ：Text提供了一个用来显示文本的一次性控件（即无状态）。
Row, Column：这两个控件用来显示水平或垂直方向上的多个组件，并且是可伸缩的。
Stack：可以将多个组件以一定的顺序排列，可以使用Positioned控件来指定组件在Stack中的顺序。
Container: 是一个可视化的矩形控件，它可以使用BoxDecoration来进行外观装饰，装饰内容可以是背景，边框和阴影等。Container也有外边距，内边距等属性，也可以约束自身的大小，另外值得一提的是Container还可以利用矩阵在三维控件内做转换。

下面结合一些基本的控件来自定义我们的组件并构建应用：