快速开始 Flutter环境搭建 (针对于Mac) flutter SDK放的位置，如果说只有一个人用就放在家目录，多人

更新：2023-05-25

为什么Flutter中大量final修饰的属性， const 修饰的构造方法（常量对象）

因为Flutter的渲染逻辑，是增量渲染。 Widget 结构是树状结构
想改变屏幕内容就直接改变widget对象
常量对象的创造效率更高

flutter SDK放的位置，如果说只有一个人用就放在家目录，多人用可以考虑放在根目录下。根目录下需要注意文件夹的权限。

环境搭建 (针对于Mac)

环境的配置：

来到你对应Shell的配置文件进行配置。如果你使用默认的bash那么配置 ~/.bash_profile 如果你使用zsh （Mac新系统默认是zsh）那么配置 ~/.zshrc

Flutter 镜像配置（镜像地址）

export PUB_HOSTED_URL=https//pub.flutter-io.cn 
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Flutter 配置（SDK位置）

export FLUTTER=~/flutter # SDK 的位置
export PATH=$FLUTTER/bin:$PATH

检测flutter环境是否配置好

flutter doctor

(base) ➜  ~ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.0, on macOS 13.4 22F66 darwin-arm64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.1.1)
[✓] VS Code (version 1.78.2)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!
(base) ➜  ~

如果有问题一个一个修理哈。

创建flutter工程以及flutter的优势

第一步：选择新建Flutter工程

第二步：选择工程模板

四个模式的区别：

```
    application ：纯flutter 项目
```
```
    Plugin： 多平台的原生代码
```
```
    Package： flutter 的第三方库
```

    Module： 混合项目打包成对应的二进制包 集成到原生项目

    Skeleton：骨架，路由、资源、多语言、状态管理，文件夹等好的实践方法

    FFI Plugin: 是专门为绑定本地源代码而设计出来的,虽然在 Plugin中也可以，在不需要对应平台的代码时候 可以使用这个（主要是C、C++ ）

命令模式创建

flutter create myProject

可选参数

–template= type指定不同的项目类型，
–template=app/module/package/plugin/skeleton

–platforms=ios/android/windows/linux/macos/web。指定项目支持哪些平台
-a:指定android开发使用的语言，默认是kotlin
-i：指定ios使用的语言，默认是swift

创建一个plugin

flutter create --org com.leb --template=plugin --platforms=android,ios -a kotlin -i swift hello

安卓Studio创建

优势

之前的跨平台RN 是基于原生UI包装来跨平台，flutter是把 skia 渲染引擎安装到手机上进行dart代码，不依赖原生UI。有一套自己的UI 体系， iOS 安卓高度统一。

热重载

全平台（除了小程序）(有一个第三方支持小程序MPFlutter)

hello_flutter

import 'package:flutter/material.dart';

类似于 iOS 里面的 UIKit

widget

万物皆widget

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        "hello",
        // 这个东西必须有（文字的渲染方式）
        textDirection: TextDirection.ltr,
      ),
    );
  );
}

分为有状态的和无状态的

自定义widget

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    
    return Text("data");
    // TODO: implement build
    // throw UnimplementedError();
  }
  
}

文字样式

Color 专门有一个对象列举了一些常用的颜色。它是Colors

MaterialAPP

import 'package:flutter/material.dart'; 貌似所有的东西都跟这个 material.dart相关

官方封装的一个常用框架：

 return const MaterialApp(
      home: Scaffold(
        
      ),
    );

初探ListView

使用 ListView.builder 加载数据列表

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});


  Widget _loadList(BuildContext context, int index) {
    return Column(
        children: [
          Image.network(
            datas[index].imageUrl,
            height: 128,
          ),
          Text(datas[index].name)
        ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView.builder(
          itemBuilder: _loadList,
          itemCount: datas.length,
      )
    );
  }
}