Flutter是什么呢?它是Google使用Dart语言开发的移动应用开发框架，使用Dart代码构建高性能、高保真的iOS和Android应用程序，虽然Flutter不是标准的，但是谷歌希望它看上去是原生的。
或许有人会问为什么已经有了“React Native”，Google还要推出Flutter呢？那是因为使用RN进行开发，在实际平台上还需要适配和桥接差异性，而Flutter则是依靠Flutter Engine虚拟机在iOS和Android上运行，开发人员可以通过Flutter框架和API在内部进行交互。Flutter Engine使用C/C++编写，具有低延迟输入和高帧速率的特点。除此之外，Flutter提供了自己的小部件集合，可以直接在OS平台提供的画布上描绘控件。
在从性能上来看，如果你曾经使用RN开发过项目，会发现在UI渲染上会有较为明显的卡顿，但是Flutter没有此问题。有网友在亲测了Flutter后表示：在页面渲染方面，Flutter比RN各具优势，图片量越大，Flutter的流畅度优势越大。
好了说了这么多，也该说说今天要讲的内容了

Flutter环境搭建

由于本人使用的mac，所以环境搭建是基于macOS系统进行的。

获取Flutter SDK

要获得Flutter，需要使用git克隆Flutter，然后将该flutter工具添加到您的用户路径。运行 flutter doctor 显示您可能需要安装的剩余依赖项。

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

由于一些flutter命令需要联网获取数据，如果您是在国内访问，由于众所周知的原因，直接访问很可能不会成功。所以我们还需要进行映像设置。具体设置如下

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

接下来需要做下环境变量设置，我这边的话是在命令终端跟路径下打开“.zshrc”这个文件(你们可能不是这个文件)，然后进行配置。具体命令如下：

image.png

以下是我的环境变量配置内容，原本是想截图，但想想还是直接打出来，让大家可以直接复制，免得一个一个敲

export PATH=$PATH:/***/flutter/bin#这边是指向flutter的bin路径 export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 

配置完成后，我们就关掉命令终端在重新打开命令终端，这么做是为了让修改的环境变量生效。科学的做法是命令终端输入"source .zshrc"
接下来让我们运行以下命令查看是否需要安装其它依赖项来完成安装：

flutter doctor 

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示）

下图是我这边运行此命令的结果(由于结果打印比较长，我这边只截了一部分)

image.png

从图中可以看到提示我，当前使用的不是最新版本，提示我使用“flutter upgrade” 进行升级。那么我就来进行升级一波，在控制台输入如下命令

flutter upgrade 

平台设置

由于我Android开发，所以就讲Android平台的设置。
1.下载并安装 Android Studio

2.启动Android Studio，然后执行“Android Studio安装向导”。这将安装最新的Android SDK，Android SDK平台工具和Android SDK构建工具，这是Flutter为Android开发时所必需的。
3.安装Flutter和Dart插件。
①打开插件首选项 (AndroidStudio>Preferences…>Plugins)
②在右边的搜索输入框输入 Flutter，然后点击 install.
③重启Android Studio后插件生效.

2.Flutter项目结构简要分析

在项目结构分析前，让我们先来创建一个demo。创建步骤(File>New>New Flutter Project…)，在弹出的界面选择Flutter Application，然后疯狂点击Next，直到项目创建完成。

image.png

上图是我们创建完成后的项目结构，可以看到android和ios这两个文件夹，这两个文件是对应客户端的源码，不在今天要分析的范围内，了解下就行。
接下来看lib下的"main.dart"和"pubspec.yaml"这两个文件，这两个文件就是今天要分析的。

pubspec.yaml

直接来看这个文件的内容，各个关键点在内容上已经备注。

name: flutter_app_demo #项目名称，最终能决定在客户端上显示的项目名称还是需要到各自的源码那边进行设置 description: A new Flutter application. #项目描述，没什么卵用dependencies: #项目库依赖，正式环境的配置 flutter: sdk: fluttercupertino_icons: ^0.1.2dev_dependencies: #项目库依赖，测试环境的配置 flutter_test: sdk: flutterflutter:uses-material-design: true #表示开启material-design样式 

从内容中可以看到库依赖有分正式环境和测试环境，我这边建议直接在正式环境里面进行库的添加，免得遗漏了库。每添加完一个库，我们都可以单击右上角的 Packages get，这会将依赖包安装到您的项目。您可以在控制台中看到以下内容：

flutter packages get Running "flutter packages get" in startup_namer... Process finished with exit code 0 

到这里是不是有人要问这些外部包要在哪里找？不要慌，以后我们可以从https://pub.dartlang.org/flutter这个地址去搜索我们想要的包。这里就不进行演示了。

main.dart

同样的，先看看这个文件内容，从内容不难看出这是一个界面布局，同时也是项目的入口类。所以就没什么好说的，想要进一步了解，就只能继续去深入学习Flutter了。

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new 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 press Run > Flutter Hot Reload in IntelliJ). Notice that the // counter didn't reset back to zero; the application is not restarted. primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } }class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key);// This widget is the home page of your application. It is stateful, meaning // that it has a State object (defined below) that contains fields that affect // how it looks.// This class is the configuration for the state. It holds the values (in this // case the title) provided by the parent (in this case the App widget) and // used by the build method of the State. Fields in a Widget subclass are // always marked "final".final String title;@override _MyHomePageState createState() => new _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> { int _counter = 0;void _incrementCounter() { setState(() { // This call to setState tells the Flutter framework that something has // changed in this State, which causes it to rerun the build method below // so that the display can reflect the updated values. If we changed // _counter without calling setState(), then the build method would not be // called again, and so nothing would appear to happen. _counter++; }); }@override Widget build(BuildContext context) { // This method is rerun every time setState is called, for instance as done // by the _incrementCounter method above. // // The Flutter framework has been optimized to make rerunning build methods // fast, so that you can just rebuild anything that needs updating rather // than having to individually change instances of widgets. return new Scaffold( appBar: new AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: new Text(widget.title), ), body: new Center( // Center is a layout widget. It takes a single child and positions it // in the middle of the parent. child: new Column( // Column is also layout widget. It takes a list of children and // arranges them vertically. By default, it sizes itself to fit its // children horizontally, and tries to be as tall as its parent. // // Invoke "debug paint" (press "p" in the console where you ran // "flutter run", or select "Toggle Debug Paint" from the Flutter tool // window in IntelliJ) to see the wireframe for each widget. // // Column has various properties to control how it sizes itself and // how it positions its children. Here we use mainAxisAlignment to // center the children vertically; the main axis here is the vertical // axis because Columns are vertical (the cross axis would be // horizontal). mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), new Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); } }

到此入门篇就完结了。

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/18145.html