Flutter基礎篇: Hello World

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 mian()=>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完成！