flutter開發環境搭建參考上一篇Flutter基礎篇: Mac端搭建安裝環境
使用VSCode寫出第一行代碼Hello World
打開IDE工具VSCode
進入到終端模式
選擇文件路徑後運行source ~/.bash_profile
配置環境變量(每次都要運行一次)之後新建一個flutter項目flutter create demo001
demo001是指工程文件名。(可隨意命名)
運行完成後會顯示
All done!
[✓] Flutter: is fully installed. (Channel stable, 1.20.3, on Mac OS X 10.15.4 19E266, locale
zh-Hans-CN)
[✓] Android toolchain - develop for Android devices: is fully installed. (Android SDK version
30.0.2)
[✓] Xcode - develop for iOS and macOS: is fully installed. (Xcode 11.6)
[✓] Android Studio: is fully installed. (version 4.0)
[✓] VS Code: is fully installed. (version 1.49.0)
[!] Connected device: is not available.
Run "flutter doctor" for information about installing additional components.
In order to run your application, type:
$ cd demo001
$ flutter run
Your application code is in demo001/lib/main.dart.
有一個警告[!] Connected device: is not available.
是沒有掛載設備,打開已經創建的demo001的工程
點擊右下角No Device按鈕
彈出框裏顯示一個iOS的模擬器和一個上次創建的Nexus 5的安卓模擬器,這裏選擇了iOS Simulator設備
之後運行
source ~/.bash_profile
和flutter run
,稍等一會,模擬器就運行起來這個demo001工程了這裏flutter有幾個配置功能鍵
Flutter run key commands.
r Hot reload. 🔥🔥🔥 (熱加載,直接查看效果)
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
常用快捷鍵如圖
下面進入lib下的main文件下
可以把裏面的代碼全部刪掉,輸入如下代碼(具體寫法可以學習下Dart)
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context){
var scaffold = Scaffold(
appBar: AppBar(
title: Text('Hello World'),
),
body: Center(
child: Text('Hello World'),
)
);
return MaterialApp(
title:'Welcom to Flutter',
home:scaffold
);
}
}
寫完後需要command
+s
保存
之後在終端輸入r熱啓動
大功告成,第一行代碼set完成!