环境搭建
参考官网, 写的很详细
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)
说明模拟器已经连接成功
创建项目
- 启动 VS Code
-
调用 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太麻烦?
调试模式运行代码