第一篇：基于Mac搭建Flutter环境

华创
359 阅读4分钟
什么是Flutter？
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的.

搭建步骤

前提：Xcode， android studio，JDK已安装完成

使用终端运行命令下载Flutter到你想存放的路径：

git clone -b stable https://github.com/flutter/flutter.git

运行命令：

vim ~/.bash_profile

点击i，设置PATH环境变量

export PATH="/Users/xxxxxxx/flutter/bin"

注: (此目录为上面下载的flutter路径)

点击esc，输入:wq ，点击回车。

输入命令：

flutter —version

如果没有安装Dart SDK会自动下载，如下：



再运行flutter --version



使用命令查看是否需要安装其它依赖项来完成安装：

flutter doctor




根据提示：

1.输入命令flutter doctor --android-licenses，一路点击Y即可。
2.输入命令 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
3.Flutter plugin not installed; this adds Flutter specific functionality问题

打开Android Studio，到Preferences->Plugin，输入flutter，安装。



创建工程命令：

$flutter create testflutter

设置iOS模拟器：

$open -a Simulator
运行应用:

$cd testflutter 
$ flutter run







看看具体创建的testflutter目录信息：



android:包含Android特定文件的Android子工程

build：Android和iOS的构建产物

ios：包含iOS特定文件的iOS子工程

lib：Flutter应用源文件目录

lib->main.dart:程序运行入口文件

pubspec.lock:记录当前项目实际依赖信息的文件

pubspec.yaml:管理第三方库及资源配置文件

testflutter.iml：工程配置文件

安卓模拟器运行：（先翻墙）

打开Android Studio，依次选择 Tools > AVD Manager > Create Virtual Device.



如果运行这块会遇到这个问题:

A system image must be selected to continue

可参考如下链接解决：https://blog.csdn.net/lizhenwei0219/article/details/92760876

如果解决上面的问题后，按照刚刚的流程走到这里，点击下一步



点击Next > Finsh

当你想点击三角形运行的时候，不可运行，原因是在上面配置了部分信息没有重启AS导致。


重启后就可以运行了。



hot reload

我们来看看Flutter的热重载，回到命令行当中，执行如下的命令，让两个模拟器都启动运行同一个项目，到testflutter目录，输入：

flutter run -d all




在main.dart文件中修改内容

home: MyHomePage(title: 'Flutter Demo Home Page'),
修改成
home: MyHomePage(title: ‘鬼叫你穷啊，顶硬上了'),
修改完成之后，我们在命令行输入r，就会出现如下修改。




因为我们是在命令行进行操作，所以需要进行r命令重载，如果是直接在Android Studio或者在XCode单独进行编辑，就可以即时更新信息


源码分析

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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,      ),
      home: MyHomePage(title: '鬼叫你穷啊，打发到手发抖'),
    );
  }
}

应用继承StatelessWidget，也就是应用本身就是一个Widget，Flutter里面所有的布局，视图等等都是建立在Widget上。bulid方法上面的注释我们可以看到，这是应用的个根。也就是必须需要此方法才能进行UI的搭建。


MaterialApp 类是对构建 material 设计风格应用的组件封装框架，这里有不同的风格的UI

https://flutterchina.club/widgets/material/

我们可以看到有很多可配置的属性，如title，theme，home等，更多的属性配置请查看API文档

https://api.flutter.dev/flutter/material/MaterialApp/MaterialApp.html

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

MyHomePage是应用的首页，继承StatefulWidget，表示有状态的Widget，控件的内容需要频繁更新的，用变量定义在此，以数据驱动视图进行更新，不是直接操作UI来改变内容。上面MyApp继承的StatelessWidget，表示无状态的Widget，后续我会详细讲解何时采用StatefulWidget，何时采用StatelessWidget。


class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

页面布局及交互逻辑部分

_MyHomePageState 中创建的 Widget Scaffold，是 Material 库中提供的页面布局结构，它包含 AppBar、Body，以及 FloatingActionButton，这里可以查看更多的属性

https://api.flutter.dev/flutter/material/Scaffold-class.html

尝试添加一个按钮，添加代码

import 'package:flutter/cupertino.dart';

这是按钮的API

https://api.flutter.dev/flutter/cupertino/CupertinoButton-class.html

加入代码后，模拟器会自动更新界面。



思维方式

有原生 Android 和 iOS 框架开发经验的同学，需要改变一下思维方式

安卓和iOS命令式的编程风格：手动创建 UI 组件，在需要更改 UI 时调用其方法修改属性。

Flutter 采用声明式编程风格：只需要描述当前的 UI 状态（即 State）即可，不同 UI 状态的视觉变更由Flutter 在底层完成。

基于Mac搭建Flutter环境完毕，但是如果想学好Flutter，必须学好Dart语言，后面我会将这些语言跟Android 的Java和 iOS的Swift进行对比，让你快速了解此语言，如大神请绕道。

Dart语言快速入门：http://dart.goodev.org/

补充：

关于环境变量的内容，建议按照如下提供的添加进去


1.下面两句是用于更新依赖包需要使用的，因为如果直接使用flutter pub get来添加依赖包会很慢，添加如下镜像：

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

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

2.包括flutter的位置，安卓sdk的位置，需要使用到ADB工具

export PATH="/usr/local/homebrew/bin:$PATH:/usr/bin:/usr/sbin:/bin:/sbin:/usr/X11R6/bin:/Users/xxxx/flutter/bin:/Users/xxxxx/Library/Android/sdk/platform-tools"


注：xxxxx为你电脑目录，如安装的位置不同，请根据自己的位置做调整。


avatar
文章
阅读
粉丝