# flutter.step-dev

**Repository Path**: zinface/flutter.step-dev

## Basic Information

- **Project Name**: flutter.step-dev
- **Description**: 在 Linux 上搭建 Flutter 开发环境

注意：新版本以 master 为主，另外镜像站环境变量可能会出现问题
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-20
- **Last Updated**: 2026-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

 # Flutter 开发 steps

> 思考: Flutter 是什么，为什么你会想用?


1. 环境的部署
    
    阅读: [入门: 在Linux上搭建Flutter开发环境](./flutter-step-dev.md)

    ```bash
    # 挑个好位置: 例如我的主目录
    cd ~/
    
    # 我在这里有个 deploy 目录用于存放所有下载的开发环境，基本上都是来源于 tar.gz 的压缩包
    # 那我可以创建一个相对目录 deploy/flutter-sdk
    mkdir -p ~/deploy/flutter-sdk
    
    # 进入到该目录后我将可以通过阅读好的文档进行挑选喜欢的源与配置
    cd ~/deploy/flutter-sdk

    # 首先是获取 flutter sdk 仓库，我选择了 上海交通大学镜像站 
    # -b dev 是选择仓库的 dev 分支(已经转为 master 分支)
    # . 是以当前目录为存放源代码的地方
    # --depth 1 是克隆历史提交的深度，不过我觉得历史不重要，只需要当下最新的状态就行了
    # git clone -b dev https://git.sjtu.edu.cn/sjtug/flutter-sdk.git . --depth 1
    # git clone -b master https://git.sjtu.edu.cn/sjtug/flutter-sdk.git . --depth 1

    # 2024/10/10： 插入一份说明
        # 早期使用 git clone 来 flutter-sdk 的方式有一些问题
            # 1. 初次执行 flutter 命令时，会尝试下载二进制内容，如果有网络问题则下载失败
        # 在镜像站下手动下载最新 flutter-sdk 全量包，内置完整二进制
            # https://mirror.nju.edu.cn/flutter/flutter_infra/releases/stable/linux/
            # 本文编写时当前最新版本：
                # 发布时间：2024-09-13 01:36:11
                # 文件名称：flutter_linux_3.24.3-stable.tar.xz

    # 2026/01/07：插入一份说明
        # 对于启用了系统代理后导致的 curl 命令异常，这里提供一个临时取消代理的环境变量设置
        export http_proxy=
        export https_proxy=
    
    # 使用 curl 与 jq 命令进行一站式下载全量 flutter-sdk
    prefix=https://mirror.nju.edu.cn/flutter/flutter_infra/releases
    jsonurl=$prefix/releases_linux.json
    suffix=`curl $jsonurl | jq ".releases[] | select(.hash == \"$(curl $jsonurl | jq .current_release.stable -r)\") | .archive" -r`
    curl $prefix/$suffix | tar xJf - --transform s/flutter/./

    # 使用国内镜像速度很快就克隆完了
    # 一些文档居然还在用 https://github.com/flutter/flutter.git


    # 现在我们进行临时的环境测试，如果你没有改变以上目录内容的话就可以直接复制进行
    cd `mktemp -d` # 进入一个随机临时目录

    # 配置环境变量: 直接使用上海交通大学镜像吧
    # Linux 和 macOS 系统设定 Flutter 镜像
    export PUB_HOSTED_URL=https://mirror.sjtu.edu.cn/dart-pub
    export FLUTTER_STORAGE_BASE_URL=https://mirror.sjtu.edu.cn

    # 这是临时的 PATH 环境，告诉终端我们将会用到该路径下的命令行
    export PATH=$PATH:~/deploy/flutter-sdk/bin

    # 以下就是顺便创建项目，顺便进入项目，顺便运行一下项目
    flutter doctor
    # 这个是 flutter 的医生，将会检查并显示 flutter 运行环境与相关工具情况
    # 有可能提示会需要您安装一些软件以便成功运行项目
    flutter create hello_flutter
    cd hello_flutter
    flutter run


    # 如果以上成功了，你将知道要做什么事，就是将环境变量加到配置文件里面去，以便随时使用。
    
    # 补充: 在 deepin 23 Nightly 纯净的新系统上，得安装 cmake/ninja/clang/libgtk-3-dev 等一系列软件才能构建出 hello_flutter

    # 补充: 在 linux 中可以使用 flutter bash-completion 生成 flutter 命令的补全内容
    # 如果你需要则运行以下命令，注意此处仅仅只需要运行一次
    flutter bash-completion > ~/deploy/flutter-sdk/flutter_bash_completion
    echo "source ~/deploy/flutter-sdk/flutter_bash_completion" >> ~/.bashrc
    ```

2. 开发环境准备好了，接下来，你应该学习如何使用 `dart` 语言
    
    - 仓库中有存储一个基本 `dart` 语法示例说明: 
        - 一个 [base.dart](https://gitee.com/zinface/youwant.dart/blob/master/base-dart/base.dart) ，建议从 `main` 函数开始了解语言基本结构
        - 不过仍然建议您学习一遍 `dart` 语言，再学习 `flutter` 框架
    - 由于 `dart` 是语言，`flutter` 是框架，那么
        - `dart` 语言将会提供非常多的对象与数据结构的操作方式与语法糖设计
        - 而 `flutter` 中则会提供非常多用于创建 `UI` 的 `Widget` 对象

        既然两者结合，那么必定会有一系列的框架设计，源代码的结构与设计模式。从操作 `dart` 到操作 `flutter` 的控件到使用一系列的组件来构建一个 `UI`，使其将数据的展现与交互内容的排列定义为一种的原生组件设计模型。这种 `快速开发一个具有统一UI风格应用`的设计模式，正是 `flutter` 的所在。

    - 此外，具有非常多第三方扩展库可供使用，可用来更高效处理数据。
        - 当然每一种扩展库都将是 `dart` 语言编写，且都具有标准的框架级设计。
        - 您除了需要学会需要用到的库外，还需体现出它们生来具有的框架级设计，学会将它们紧密的嵌入项目之中。


3. 为了更好的了解 `flutter` 设计，可以查看以下提供的链接了解更多与 `flutter` 有关的知识
   - [Flutter Widget Live Book](https://flutter-widget.live/basics/introduction) 一个可以在网页上查看各种`UI组件`与相关预览效果
    - 此项目的 github 仓库: [flutter-widget-livebook](https://github.com/leanflutter/flutter-widget-livebook)
    - 例如: 最常见的 `Scaffold` UI容器结构
        ![](screenshots/flutter-scaffold.png)  

4. 在每个正在开发的 `flutter` 项目中，或多或少需要配置一些有关镜像源的部分

    - 用于 `gradle` 的 [阿里云Maven镜像][aliyun-maven] 与 [清华大学开源软件镜像站][tsinghua-flutter] 的 `download.flutter.io`(源于 [上海交通大学镜像站][sjtu-flutter-infra]):

        ```groovy
        // 以下内容放入 build.gradle
        repositories {
            maven {
                url 'https://maven.aliyun.com/repository/google'
            }
            maven {
                url 'https://maven.aliyun.com/repository/public'
            }
            maven {
                url 'https://mirrors.tuna.tsinghua.edu.cn/flutter/download.flutter.io'
            }
        }
        ```


[aliyun-maven]: https://developer.aliyun.com/mvn/guide
[sjtu-flutter-infra]: https://mirror.sjtu.edu.cn/docs/flutter_infra
[tsinghua-flutter]: https://mirrors.tuna.tsinghua.edu.cn/flutter/download.flutter.io/


5. 在这里开始你的第一个项目，使用已有的 Flutter 项目骨架创建第一个项目:

    ```bash
    git clone https://gitee.com/zinface/flutter.skeleton.git
    cd flutter.skeleton
    flutter run
    # flutter run -d linux
    # flutter run -d chrome
    # flutter run -d ...
    ```

6. 在 `pub.dev` 中搜索你可能需要的库

    - 官方地址: https://pub.dev/
    - 国内镜像: https://pub.flutter-io.cn/

7. 关于 `dart` 与 `lib` 库

    如果您在尝试使用一些从未使用过的 `lib` 库，建议使用 `dart` 创建临时工程进行测试:
    
    (例如 `sqflite`名称为你所使用的库)
        
    1. 进入您将准备存放测试工程的位置
    2. 执行 `dart create sqflite_test` 来创建一个工程
    3. 进入工程目录 `cd sqflite_test`
    4. 执行 `dart pub add sqflite` 来获取最新的 `sqflite` 版本
    5. 执行 `dart run` 尝试运行
        ```bash
        # 以上部分可概括为
        dart create sqflite_test
        cd sqflite_test
        # dart pub add sqfile
        dart run  # 确保可以运行此项目
        ```

    简单的描述 `dart` 工程结构:

    - 程序入口点在 `bin/`
    - 库代码在 `lib/`中
    - 以及示例单元测试在 `test/` 。
    - `pubspec.yaml` 为项目描述信息

    其它有关此部分过程在以下经验中有谈及到:

    - 从零创建一个 Dart 服务端项目: https://juejin.cn/post/6844903845575786503