Flutter开发环境搭建

若与

发布于 2019-05-15 14:55:57

1K0

发布于 2019-05-15 14:55:57

flutter介绍

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。flutter发布的最新版已经支持pc端了。

优点

跨平台自绘引擎
高性能
原生用户界面
性能强大，120fps 流畅
优秀的动画设计
可选静态的语言，语言特性优秀

dart语言

flutter是使用dart语言开发的，如果你有任何一种编程语言的基础，那你就可以很快上手， dart给我的感觉就是编译型和解释型语言的结合体，吸取了双方的优点。语言很灵活，学习门槛很低。 Dart是一种易于学习、易于扩展、并且可以部署到任何地方的应用编程语言。花半个小时大概就可以开始写flutter了，如果你不先了解dart, 也可以写flutter, 写写，就都会了，毕竟是面向IDE编程的。 dart学习

上面只是简单的介绍， flutter的热度这么高，我相信你一定知道，所以就不详细介绍了，下面主要介绍，如何搭建一个flutter的开发环境，写一个简单的demo。

下面的操作都是在 MAC下完成的

使用镜像

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

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

注意：此镜像为临时镜像，并不能保证一直可用，读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

获取Flutter SDK

去flutter官网下载其最新可用的安装包，转到下载页。

注意，Flutter的渠道版本会不停变动，请以Flutter官网为准。另外，在中国大陆地区，要想正常获取安装包列表或下载安装包，可能需要访问外国网站，读者也可以去Flutter github项目下去下载安装包，转到下载页。

解压安装包到你想安装的目录，如：

cd ~/flutter
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

添加flutter相关工具到path中：

export PATH=`pwd`/flutter/bin:$PATH

我的配置路径是放在.zshrc中如下，

export PATH="$HOME/.cargo/bin:$PATH"
export PATH="/Users/youdi/flutter/flutter/bin:$PATH"
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

运行 flutter doctor

运行以下命令查看是否需要安装其它依赖项来完成安装：

flutter doctor

以上可能会报错，根据报错信息提示，一步步解决就可以了。另外，将java和xcode都提前安装好，毕竟底层平台还是它们去解决的。如果不用真机测试, 安装虚拟机

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

安装正常如下：

$ flutter doctor                                                     
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, v1.5.8, on Mac OS X 10.14.3 18D109, locale zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2)
[✓] Android Studio (version 3.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2018.2.7)
[✓] Connected device (1 available)

• No issues found!

flutter命令

Manage your Flutter app development.

Common commands:

  flutter create <output directory>
    Create a new Flutter project in the specified directory.

  flutter run [options]
    Run your Flutter application on an attached device or in an emulator.

Usage: flutter <command> [arguments]

Global options:
-h, --help                  Print this usage information.
-v, --verbose               Noisy logging, including all shell commands executed.
                            If used with --help, shows hidden options.

-d, --device-id             Target device id or name (prefixes allowed).
    --version               Reports the version of this tool.
    --suppress-analytics    Suppress analytics reporting when this command runs.
    --bug-report            Captures a bug report file to submit to the Flutter team.
                            Contains local paths, device identifiers, and log snippets.

    --packages              Path to your ".packages" file.
                            (required, since the current directory does not contain a ".packages" file)

Available commands:
  analyze                  Analyze the project's Dart code.
  attach                   Attach to a running application.
  bash-completion          Output command line shell completion setup scripts.
  build                    Flutter build commands.
  channel                  List or switch flutter channels.
  clean                    Delete the build/ and .dart_tool/ directories.
  config                   Configure Flutter settings.
  create                   Create a new Flutter project.
  devices                  List all connected devices.
  doctor                   Show information about the installed tooling.
  drive                    Runs Flutter Driver tests for the current project.
  emulators                List, launch and create emulators.
  format                   Format one or more dart files.
  help                     Display help information for flutter.
  install                  Install a Flutter app on an attached device.
  logs                     Show log output for running Flutter apps.
  make-host-app-editable   Moves host apps from generated directories to non-generated directories so that they can be edited by developers.
  packages                 Commands for managing Flutter packages.
  precache                 Populates the Flutter tool's cache of binary artifacts.
  run                      Run your Flutter app on an attached device.
  screenshot               Take a screenshot from a connected device.
  stop                     Stop your Flutter app on an attached device.
  test                     Run Flutter unit tests for the current project.
  trace                    Start and stop tracing for a running Flutter app.
  upgrade                  Upgrade your copy of Flutter.
  version                  List or switch flutter versions.

Run "flutter help <command>" for more information about a command.
Run "flutter help -v" for verbose help output, including less commonly used options.

flutter help <command>就可以查看命名的功能和使用方法了，比较常用的 create, run, build, emulators, install... 升级使用 upgrade

编辑器配置

官方推荐的Vscode和android studio,我前面使用的是AS, 但是在mac上我运行会很卡，另外一个原因是，我平时开发会多种语言来回切换，所以，我都是IDEA上开发，安装不同语言的扩展。下面介绍IDEA的配置

安装dart和flutter的插件支持

重启以后就会生效

创建第一个flutter应用

创建flutter项目

修改代码

上面创建完项目，会生成一段演示代码。我们修改lib/main.dart成下面

import 'package:flutter/material.dart';

void main() => runApp(MovieApp());

class MovieApp extends StatelessWidget {
//  MyApp({Key key, @required this.items}) :super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Youdi",
      home: Scaffold(
        appBar: AppBar(
          title: Text("电影?海报"),
        ),
        body: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              childAspectRatio: 0.7),
          children: <Widget>[
            Image.network(
              "http://img5.mtime.cn/mg/2019/03/29/095612.14234221_170X256X4.jpg",
              fit: BoxFit.cover,
            ),
            Image.network(
                "http://img5.mtime.cn/mg/2019/04/29/094707.17276574_170X256X4.jpg",
                fit: BoxFit.cover),
            Image.network(
                "http://img5.mtime.cn/mg/2019/04/28/095934.61527523_170X256X4.jpg",
                fit: BoxFit.cover),
            Image.network(
                "http://img5.mtime.cn/mg/2019/04/25/110449.46476392_170X256X4.jpg",
                fit: BoxFit.cover),
            Image.network(
                "http://img5.mtime.cn/mg/2019/04/15/114602.17581769_170X256X4.jpg",
                fit: BoxFit.cover),
            Image.network(
                "http://img5.mtime.cn/mg/2019/04/03/180223.17695525_170X256X4.jpg",
                fit: BoxFit.cover),
            Image.network(
                "http://img5.mtime.cn/mg/2019/01/30/152307.77354514_1280X720X2.jpg",
                fit: BoxFit.cover),
            Image.network(
                "http://img5.mtime.cn/mg/2018/09/18/094114.20807426_1280X720X2.jpg",
                fit: BoxFit.cover),
            Image.network(
                "http://img5.mtime.cn/mg/2019/03/11/150531.14072799_1280X720X2.jpg",
                fit: BoxFit.cover),
            Image.network(
                "http://img5.mtime.cn/mg/2019/04/19/101040.92560167_126X190X4.jpg",
                fit: BoxFit.cover),
            Image.network(
                "http://img5.mtime.cn/mg/2019/05/07/104953.95141213_126X190X4.jpg",
                fit: BoxFit.cover),
            Image.network(
                "http://img5.mtime.cn/mg/2019/05/07/094241.52746772_126X190X4.jpg",
                fit: BoxFit.cover),
          ],
        ),
      ),
    );
  }
}