iOS Flutter 开发基础（一）

2019年7月19日 249次阅读 来源: 卖萌的二师兄

Flutter简介

Flutter是Google的移动应用程序SDK，在2018世界移动大会上，Google发布了Flutter的第一个Beta版本。其目的在于极其高效地内在iOS和Android上构建高质量的原生应用。在其官方首页中提到Flutter的三大特性：
（1）Fast Development：可以使用热重载，丰富的可自定义的控件帮助开发者在几分钟内构建本地接口；
（2）Expressive and Flexible UI：专注于原生用户体验。分层架构允许完全自定义，从而实现令人难以置信的快速渲染和表现力和灵活的设计。
（3）Native Performance：Flutter包含所有重要的平台具有差异的控件，如滚动，导航，图标和字体，以在iOS和Android上提供完整的本机性能。
与RN相比，Flutter的范式与其相似，都是通过构建控件树交给操作系统进行渲染从而转化为平台的控件对象。区别在于RN所能转化的控件对象会受到平台局限性的影响，该影响会造成同样一份RN代码在不同平台会渲染出不同的界面效果，为了保证与设计的一致性，可能会写两套代码。而Flutlter因为是使用自身的渲染引擎去渲染，可以提供几乎完全的一致性，并且其性能也较为突出。

Dart

Dart语言是Flutter的编程语言，由谷歌开发的用于于web、服务器、移动应用和物联网等领域的开发，其基本信息都百度得到。它是Flutter争议较大的一部分原因，虽然上手较快，但用于写嵌套的Widget Tree会非常麻烦并且可读性差，对于开发者很不友好。至于为啥现在强推这个，估计是Dart姓G不姓O吧。

Flutter环境搭建——macOS

流程官网都在https://flutter.io/setup-macos/给你写好了，主要流程就是下载SDK，配置环境变量，安装IDE，设置模拟器。下面内容以macOS环境为例，大致介绍如何搭建Flutter环境。
1.下载SDK
在https://flutter.io/sdk-archive/#macos上下载SDK，然后打开你的终端，喜欢双击解压也行。

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v0.3.2-beta.zip

解压完成后就是配置环境变量了

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

2.运行Flutter doctor
完成了Flutter SDK的下载和环境变量配置后，我们需要运行Flutter doctor来查看我们还需要安装哪些依赖来完成Flutter的安装。
当完成所有依赖和工具安装时，会如下显示：

《iOS Flutter 开发基础（一）》 No issues!

下载Xcode 和 Android Studio 就不再描述。特别需要注意的分别是Xcode还需要安装libimobiledevice以及Android Studio安装Flutter的插件。
下面我们就可以打开Android Studio来进行开发啦～

Hello world

1）打开Android Studio 新建一个Flutter项目。

《iOS Flutter 开发基础（一）》 New Flutter Project

2）以iOS开发为例，手动启动一个模拟器或者在终端中执行。

$ open -a Simulator

启动后我们会发现Android Studio已经识别到你启动的模拟器了。

《iOS Flutter 开发基础（一）》 找到你了！

3）运行我们的Flutter项目，显示如下：

《iOS Flutter 开发基础（一）》 Simulator Screen Shot

点击“+”按钮，中间的数字就会变化并反映我们点击该按钮的次数。然后我们再看看main.dart这个类，我们把当中的文本内容’You have pushed the button is pushed this many times:’更改为’Hello world:’然后cmd-s保存。并不用经过重新运行，模拟器中的文本已经发生了改变。

《iOS Flutter 开发基础（一）》 Simulator Screen Shot

在见证了Fast Development后我们可以再进一步进行一些尝试了。
4）创建你自己的首页
我们先把刚才修改了的main.dart里面现有的代码删掉，替换成下面这些：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

保存后刚才的文本内容和按钮就都不在了，只剩下了“Hello World”。
5）使用一个外部包。
接下来我们要引入并使用一个外部包，用它来生成单词把老掉牙的“Hello World”替换掉。在Flutter中是使用pubspec文件来进行资源的管理，打开pubspec.yaml文件并将english_words加入到依赖列表中，然后点击Flutter commands 中的“Packages get”按钮，静静地等待外部包安装完成。

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.0
  english_words: ^3.1.0

《iOS Flutter 开发基础（一）》 Packages get

《iOS Flutter 开发基础（一）》 安装完成如上显示

然后我们在main.dart中import该外部包将以下部分的代码进行修改：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';


void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();//添加对随机单词的生成
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text('Hello World'),
          child: new Text(wordPair.asPascalCase),//显示生成的随机单词
        ),
      ),
    );
  }
}

保存后我们的“Hello World”就被替换掉啦。

《iOS Flutter 开发基础（一）》 Simulator Screen Shot

以上便是我们如何在macOS上搭建Flutter开发环境以及对该框架的初次体验。后面我们将会进一步了解flutter开发的基础内容，包括控件和页面跳转以及事件等内容。

    原文作者：卖萌的二师兄
    原文地址: https://www.jianshu.com/p/99e75543d374
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞