使用VS Code编写你的第一个Flutter App应用

环境搭建

参考官网, 写的很详细
Android studio可以来这里下载, 官网的下载速度你懂的
flutter下载也被限制了, 给你提供一个网盘连接
剩下的就靠你了, 遇到问题可以留言

VS code 安装Flutter和Dart插件

Dart插件
Flutter插件

校验环境

PS E:\Workspace\web\flutter> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel dev, v1.7.8, on Microsoft Windows [Version 6.1.7601], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
[√] Chrome - develop for the web
[!] Visual Studio - develop for Windows (Visual Studio Community 2019 16.1.3)
    //这个地方可以忽略, 不影响我们使用VS Code正常搭建项目
    X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++" workload, and include these components:
        MSBuild
        MSVC v142 - VS 2019 C++ x64/x86 build tools (v14.21)
        Windows 10 SDK (10.0.17763.0)
[√] Android Studio (version 3.4)
[√] IntelliJ IDEA Ultimate Edition (version 2019.1)
[√] Connected device (3 available)

说明模拟器已经连接成功

创建项目

1. 启动 VS Code

2. 调用 View>Command Palette…

   
   我们选择Flutter: New Project创建项目
   输入项目名, 然后回车, 选择项目保存路径即可
   创建项目成功
   

   注: 也可以使用命令创建项目, flutter create flutter_demo

目录结构

android: Android部分的工程文件
build: 项目的构建输出目录
ios: iOS部分的工程文件
lib: 项目中的Dart源文件
test: 测试相关文件
pubspec.yaml: 项目配置文件, 类似于RN的package.json

运行项目

//方式1: 直接运行到默认的设备上
flutter run
//方式2: 运行到指定设备
flutter run -d 'iPhone X'

• 控制台输出

// 从第一行输出我们可以知道按R可以热加载
🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:60529/esoskETAqy0=/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

• 模拟器自动打开应用

  
  Flutter初始化页面效果

• lib/main.dart 就是我们页面对应的代码

  
  image.png
• 密密麻麻太多, 删了, 我们写个简单点的

//这句的意思就是引入Flutter提供了一套丰富的Material widgets
import 'package:flutter/material.dart';

//main是入口函数
void main() => runApp(MyApp());

//该应用程序继承了StatelessWidget, 后面会具体讲StatelessWidget和StatefulWidget的区别, 这里先混个脸熟就可以
class MyApp extends StatelessWidget {

  //build()方法必须实现, 我们通过在build方法中编写代码来显示界面
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Hello Flutter',
      home: new Scaffold(//Scaffold 是Material library中提供的一个widget, 它提供了默认的导航栏、标题和包含主屏幕widget树的body属性        
        appBar: new AppBar(//appBar导航栏
          title: new Text('Hello Flutter Title'),//导航栏标题
        ),
        body: new Center(//body表示主屏幕, body包含了一个Center组件, Center组件里面又包含了一个Text组件, Center组件的作用可以让其子组件显示在屏幕中心
          child: new Text('Hello Flutter'),
        ),
      ),
    );
  }
}

在控制台, 按R, App页面将重新渲染

上面代码的运行效果

• 每次按R太麻烦?

  
  调试模式运行代码