flutter入门教程

Flutter介绍

Flutter是谷歌发布的一套移动UI框架 ，可以快速在iOS和Android上构建高质量的原生用户界面。 能够做到一套代码两个终端运行。并且Flutter是完全免费、开源的。

Flutter组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变，组件会重构它的描述(description)，Flutter会对比之前的描述， 以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。

flutter 使用的开发语言-Dart

flutter 使用dart作为其开发语言。dart是谷歌开发的计算机编程语言，后来被Ecma (ECMA-408)认定为标准 。它被用于web、服务器、移动应用 和物联网等领域的开发。dart是面向对象的、类定义的、单继承的语言。它的语法类似C语言，可以转译为JavaScript，支持接口(interfaces)、混入(mixins)、抽象类(abstract classes)、具体化泛型(reified generics)、可选类型(optional typing)和sound type system。如果你没有过开发经验，不建议直接上手flutter。

flutter安装

首先根据你的系统，windows,macos，或者linux系统选择不同的flutter sdk下载安装，这里推荐flutter 中文网https://flutterchina.club，我以windows为例

1、使用镜像，将以下两个环境变量加入到用户环境变量中

PUB_HOSTED_URL https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn

2、安装flutter sdk ，https://flutter.dev/docs/development/tools/sdk/releases#windows，建议选择稳定版本

3、下载完成后，将其解压到你想要的路径内。然后尝试运行flutter命令

要在终端全局运行 flutter 命令， 你需要添加以下环境变量到系统PATH：

转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”

在“用户变量”下检查是否有名为“Path”的条目:

如果该条目存在, 追加 flutterin的全路径，使用 ; 作为分隔符.

如果条目不存在, 创建一个新用户变量 Path ，然后将 flutterin的全路径作为它的值.

在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目，如果没有，也添加它们。

重启Windows以应用此更改。

创建Flutter项目

在Flutter开发中，创建一个Flutter 项目通常有以下两种方式： - 使用flutter create命令，确保Flutter SDK配置了环境变量。 - 使用安装了Flutter和Dart插件的IDE，如Android Studio和IntelliJ IDEA。

命令行方式创建Flutter的命令如下：

flutter create <projectname>

如果使用IDE创建Flutter项目，可以依次选择【File】->【New】->【New Flutter Project...】。

运行项目

在Flutter开发中，运行Flutter项目主要有两种方式，一种是命令方式，一种是IDE的方式。 命令方式运行Flutter如下所示：

flutter run -d 'iPhone X'
flutter run -d emulator-5554

其中，-d后面跟的是具体的设备名称，可以是Android或iOS模拟器的名字，也可以一台已经连接到电脑上的Android或iOS的设备。 相比命令方式，我们更推荐使用IDE图形化工具的方式，首先选择要运行的设备，然后选择main.dart入口文件，然后点击【运行】按钮即可运行Flutter项目：

除了上面的命令外，Flutter开发中常见的命令还有：

flutter emulator             //查看本地模拟器
flutter emulators --create --name xyz        //创建一个模拟器
flutter emulators --launch <emulator id>       //启动模拟器
flutter build apk;           //打包Android应用
flutter build apk –release;
flutter install;              //安装应用
flutter build ios;            //打包IOS应用
flutter build ios –release;
flutter clean;               //清理重新编译项目
flutter upgrade;            //升级Flutter SDK和依赖包
flutter channel;            //查看Flutter官方分支列表和当前项目使用的Flutter分支
flutter channel <分支名>;   //切换分支

除此之外，我们还可以点击 热重载按钮 (带有闪电⚡️图标的按钮)来开启热重载方法。

Flutter调试

Flutter提供了各种各样的工具和功能来帮助开发者调试Flutter应用程序，如果你使用的是VsCode作为开发工具，那么可以参考下面的调试技巧：

断点调试

在 Flutter 进行断点调试非常简单，只需要在 Vscode 上打上一个断点，按 F5 就会停在断点处。通过左边的调试栏，观察断点处的变量以及栈堆情况。

debugger调试

debugger代码调试只能运行在开发阶段，debugger调试是Flutter提供的debugger API ，和JavaScript的console类似。例如：

import 'dart:developer';

void someFunction(double offset) {
    debugger(when: offset > 30.0, message: 'offset 大于 30 时，中断');
    // ...
}

那么，当 offset 这个变量的值大于 30.0 时中断运行，并输出 message 的内容。

rendering 调试

rendering 调试即开启布局线调试，当打开 rendering 时会在界面上看到一些布局线，以便于修复布局效果。要开启rendering调试，需要在代码中添加debugPaintSizeEnabled。例如：

import 'package:flutter/rendering.dart';

void main() {
    debugPaintSizeEnabled = !true;
    runApp(new MyApp());
}

然后，重新运行项目即可看得效果。

日志调试

日志调试是软件开发中的一种很常见的调试方式，可以方便开发者查看程序运行的日志信息，现在流行的IDE几乎都集成了日志模块。 Android Studio和Vscode 里的控制台/调试控制台都可以看到。

当然，为了方便，我们也可以自己定义一个Debug类用于代码调试，例如：

class Debug {
    static log(String tag, String text) {
        print('[$tag] $text');
    }
    static info(String tag, String text) {
        print('[$tag] $text');
    }
    static success(String tag, String text) {
        print('[$tag] $text');
    }
    static error(String tag, String text) {
        print('[$tag] $text');
    }
}

真机调试

在Android 真机上运行Flutter程序，需要先开启开发者选项，开启的步骤如下： - 打开【开发者选项】和【 USB 调试】。 - 使用 USB 将手机连接电脑，若手机出现提示，授权电脑访问手机。 - 在命令执行 flutter devices 确认连接电脑的设备。 - 然后使用 flutter run 命令运行 app。 - 在手机上开启 USB 调试模式。

移动开发框架推荐：

AVM（Application-View-Model）框架是千语创想推出的一个跨端高性能 JavaScript框架，更趋近于原生的编程体验，它提供简洁的模型来分离应用的用户界面、业务逻辑和数据模型，适合高度定制化的项目，一次编码，可以同时开发安卓、iOS和小程序等多端应用。

AVM是千语创想基于标准H5子集设计的DSL中间语言编程框架，其可具备如下能力：

Virtual DOM：通过虚拟DOM，渲染到不同终端，充分尊重系统特性，为不同终端执行差异处理，实现高效渲染；

组件化：高可重用性、可组合性、可维护性的架构设计，隐藏了复杂的DOM结构和行为，让开发者专注于应用的功能和外观；

数据绑定：轻松将数据源绑定到应用用户界面，降低逻辑复杂性和开发难度；

状态管理和路由：有效分离用户界面和数据处理，实现项目的工程化管理；

类Vue语法和兼容React JSX，兼具Vue的轻巧和React的灵活性。

立即免费在线制作一个APP，新手注册即送开发大礼包