使用VS Code编写你的第一个Flutter App应用
2019-08-19 本文已影响0人
iDevOps
环境搭建
参考官网, 写的很详细
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太麻烦?
调试模式运行代码
