flutter-基于Mac系统的环境搭建

工作中需要用到flutter，一切从零开始，那就先来配置开发环境。

1、打开官网，下载sdk

flutter中文官网

image.png

2、根据你存放sdk的位置，配置环境变量

我存放的路径：/Users/chenjy/softwareInstall/flutter

image.png
打开终端，输入：open -e .bash_profile
在文件中添加flutter的路径配置。
export PATH=~/softwareInstall/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
注意第一个PATH，~/代表的就是根目录，后面就是我存放flutter的目录。
修改后保存一下，然后在终端输入：source .bash_profile
目的是刷新一下刚刚配置的环境，不然不生效。

3、检查是否安装成功

可以利用 flutter -h 或者 flutter doctor这两个命令来查看。

我是直接用flutter doctor，结果如下图： image.png
可以看到flutter已经安装成功了，而且还会检测相关的开发工具，具体缺哪一个，自己需要的就去补安装就好。

4、熟悉的helloworld

在利用android studio新建flutter项目之前，需要先给AS添加2个插件，分别是Dart和Flutter。 image.png

装好后重启AS。然后就可以看到，可以新建flutter项目了。

new一个application image.png 一路next image.png
直到finish之后，项目就开始创建，创建是可能有点久，等一等。
image.png

这里就已经是成功了。跑起来之后就是一个点击计数的demo。然后我们把main.dart里面的代码改一改。

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',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      // home: MyHomePage(title: 'Flutter Demo Home Page'),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body:Center(child: Text('Hello World!'),),
      ),
    );
  }
}

这样改完之后，注意并不需要重新run项目，直接保存代码，效果就直接出来了，十分方便。
好了，最最最基础的flutter内容，就先这样，后面的就是dart语法、常用组件、页面布局、手势、视觉效果、等等等内容了。