Flutter 2.2 在macOS上的使用 - 开发iOS和安卓app

用后感：Dart很强大！支持编写Server端、移动app端、web端的编程语言，语法简单，只要你掌握了任何一门面向对象的高级编程语言，再来学习Dart，绝对在1小时内全部学会！

1.下载flutter

直接下载，需要解压缩

https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_2.2.1-stable.zip

通过git

git clone https://github.com/flutter/flutter.git -b stable

配置环境变量，设置一次，关闭Terminal（终端）后，下次还需要设置，所以这是一次性设置。
中间的路径修改成你的flutter解压后/克隆后的目录地址

export PATH="$PATH:/Users/admin/Documents/flutter/bin"

2.整体检测flutter安装及配置是否正确

flutter doctor

macOS上需要安装Xcode、Android Studio两个集成开发工具，如果使用flutter开发web应用，还需要安装Chrome浏览器，如果你没有安装这些，请根据自己需要来。

3.一个简单的Flutter程序示例

flutter create testapp1

testapp1就是我们的测试项目名称，一定要小写，否则会报错。

当项目创建完毕后，你会看到testapp1目录下的文件结构如下所示:

Flutter 2.2 在macOS上的使用 - 开发iOS和安卓app - 从0到1教程_iOS

iOS表示iOS端的项目
android表示安卓端的项目
web表示web端pc和H5的项目
pubspec.yaml 表示flutter的资源和依赖库的管理

所以一个flutter项目是一次开发，三端运行！
然后，cd testapp1目录下，运行此项目

flutter run

选择你想运行的手机，或者模拟器上，

如果你想运行iOS项目，则先打开ios/Runner.xcworkspace项目，设置运行到真机/模拟器上的签名
如果你想运行安卓项目，则先打开android项目，设置相关参数

app运行到真机/模拟器的步骤的教程百度上很多，自行搜索

4.最基本最基础的Flutter代码编写

在flutter中，所有的东西都是widget(组件)，所以，我们先把lib/main.dart文件里的代码删除，然后粘贴以下代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

重新运行项目，看看效果。代码链接

Flutter 2.2 在macOS上的使用 - 开发iOS和安卓app - 从0到1教程_android_02

结构非常简单！

一个main函数，程序入口
一个Flutter app本身就是就一个widget
大部分的widget都有一个build()函数，在build()函数内返回布局和组件
MaterialApp是google提供的Material一套UI库的组件
界面上显示的内容都是通过Scaffold组件来布局的

看这篇文章，你就对Dart有了初步的认识了
https://flutter.dev/docs/get-started/codelab 整个布局的树形结构图
Flutter 2.2 在macOS上的使用 - 开发iOS和安卓app - 从0到1教程_flutter_03
布局的方式：

Flutter默认的Container的布局，Container里套着Row和Column，Row和Column里可以继续套着Container

5.Flutter原理

Flutter 2.2 在macOS上的使用 - 开发iOS和安卓app - 从0到1教程_跨端开发_04

这张图的地址：传送门

Flutter是Google开源的一套UI框架，跨平台，也就是可以发行在iOS、Android、macOS、Linux这些平台上运行，当然了，华为鸿蒙手机OS肯定也可以的。

如图所示，整个Flutter的上层UI、动画、绘制、手势、基础库都是完全使用Flutter实现的，代码完全开源，也就是你说你点击该framework里的Widget，都可以直接看到源代码的实现。底层引擎使用C/C++实现的，这个没有什么好说的。

重点：

关乎你每天都用到的
使用MaterialApp的布局是类Android原生样式
使用CupertinoApp的布局是类iOS的原声样式

比如，博主初学Flutter，开发了类似某个app的图文首页，如下图：iOS & Android & Web H5

Flutter 2.2 在macOS上的使用 - 开发iOS和安卓app - 从0到1教程_flutter_05

以上代码
Demo项目下载：https://github.com/VictorZhang2014/first_simple_flutter_project/tree/master

参考

1.官方教程macOS 2.DART编程语言中文教程 3.Flutter的widget布局基础教程 4.美团Flutter原理与实践