flutter 专题九十四 Flutter开发之基础知识

作为时下最留下的大前端跨平台开发框架，很多的公司和同学都开始了Flutter学习和应用，关于Flutter的基础知识，可以参考下面的两篇文章。
Flutter环境搭建
 Flutter 基础知识点总结

接下来，我们将介绍一些Flutter应用开发中一些基本的知识。

Flutter基础知识

创建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 调试模式。

Hello Word

和很多的程序一样，Flutter程序也有一个启动页面，新建项目时系统默认的启动页面是main.dart，那么我们可以修改main.dart的代码。例如：

复制代码

import 'package:flutter/material.dart';
 
void main() => runApp(new MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

然后，运行上面的代码，可以看到如下的效果：

Flutter 项目结构

打开新建懂得Flutter工程，项目结构如下图所示：

flutter 专题 九十 四 Flutter开发之基础知识

Flutter基础知识

创建Flutter项目

运行项目

Flutter调试

断点调试

debugger调试

rendering 调试

日志调试

真机调试

Hello Word

Flutter 项目结构

flutter 专题九十四 Flutter开发之基础知识