Flutter新手入门（一）

本篇先从集成环境以及编写第一个HelloWorld程序说起，在学习的同时记录一下，也是对所学内容的巩固了。

最完整的官方配置可以看这里:https://flutter.cn/docs/get-started/install

以下写我的集成过程：
1.获取Flutter SDK https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos

官网下载截图

下载之后解压出一个flutter文件，我是mac版，就直接放在了/Library文件夹下。

2.环境配置
终端输入vim ~/.bash_profile
打开后按i进入编辑模式，输入镜像

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

接下来输入你解压下来存放flutter文件的地址export PATH=`pwd`/flutter/bin:$PATH

我的是：

export PATH=/Library/flutter/bin:$PATH

最后长这样：

终端

终端运行source ~/.bash_profile使配置生效

接下来在终端输入flutter doctor自动检查和配置flutter环境
可能会提示你未安装Xcode或者Android Studio下载相应的软件就可以
3.配置编辑器
推荐用VSCode，官方下载地址
安装Flutter插件

VSCode

4.设置开发环境
AppStore下载安装Xcode
Android Studio官方下载

接下来开始创建第一个Hello World

打卡VSCode 点击command+Shift+p

VSCode创建

选择Flutter: New Application Project，也可以手动在输入栏输入Flutter: New Application Project

选择自己想要创建的位置

VSCode创建

输入文件名

文件名

首次创建会比较慢

VSCode

等待好久之后...创建成功 目录结构是这样的

目录结构

flutter的默认语言是swift和kotlin
可以输入command+, 来设置默认语言

默认语言设置

我们先在main.dart中编写 打开后会看到很多默认写好的代码 可以先按F5运行一下看看
接下来将默认代码全部删掉 换成下面的

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

command+s保存就会实时更新界面了

Hello World

里面内容的讲解将在下一节更新