環(huán)境搭建
參考官網(wǎng), 寫的很詳細(xì)
Android studio可以來這里下載, 官網(wǎng)的下載速度你懂的
flutter下載也被限制了, 給你提供一個網(wǎng)盤連接
剩下的就靠你了, 遇到問題可以留言
VS code 安裝Flutter和Dart插件
Dart插件
Flutter插件
校驗(yàn)環(huán)境
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正常搭建項(xiàng)目
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)
說明模擬器已經(jīng)連接成功
創(chuàng)建項(xiàng)目
- 啟動 VS Code
-
調(diào)用 View>Command Palette…
我們選擇Flutter: New Project創(chuàng)建項(xiàng)目
輸入項(xiàng)目名, 然后回車, 選擇項(xiàng)目保存路徑即可
創(chuàng)建項(xiàng)目成功
注: 也可以使用命令創(chuàng)建項(xiàng)目, flutter create flutter_demo
目錄結(jié)構(gòu)
android: Android部分的工程文件
build: 項(xiàng)目的構(gòu)建輸出目錄
ios: iOS部分的工程文件
lib: 項(xiàng)目中的Dart源文件
test: 測試相關(guān)文件
pubspec.yaml: 項(xiàng)目配置文件, 類似于RN的package.json
運(yùn)行項(xiàng)目
//方式1: 直接運(yùn)行到默認(rèn)的設(shè)備上
flutter run
//方式2: 運(yùn)行到指定設(shè)備
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".
-
模擬器自動打開應(yīng)用
Flutter初始化頁面效果 -
lib/main.dart 就是我們頁面對應(yīng)的代碼
image.png - 密密麻麻太多, 刪了, 我們寫個簡單點(diǎn)的
//這句的意思就是引入Flutter提供了一套豐富的Material widgets
import 'package:flutter/material.dart';
//main是入口函數(shù)
void main() => runApp(MyApp());
//該應(yīng)用程序繼承了StatelessWidget, 后面會具體講StatelessWidget和StatefulWidget的區(qū)別, 這里先混個臉熟就可以
class MyApp extends StatelessWidget {
//build()方法必須實(shí)現(xiàn), 我們通過在build方法中編寫代碼來顯示界面
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Hello Flutter',
home: new Scaffold(//Scaffold 是Material library中提供的一個widget, 它提供了默認(rèn)的導(dǎo)航欄因苹、標(biāo)題和包含主屏幕widget樹的body屬性
appBar: new AppBar(//appBar導(dǎo)航欄
title: new Text('Hello Flutter Title'),//導(dǎo)航欄標(biāo)題
),
body: new Center(//body表示主屏幕, body包含了一個Center組件, Center組件里面又包含了一個Text組件, Center組件的作用可以讓其子組件顯示在屏幕中心
child: new Text('Hello Flutter'),
),
),
);
}
}
在控制臺, 按R, App頁面將重新渲染
上面代碼的運(yùn)行效果
-
每次按R太麻煩?
調(diào)試模式運(yùn)行代碼
