Flutter基础篇2: 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文件下

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热启动

Hello World

大功告成，第一行代码set完成！