×
028-86922220

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

Flutter的搭建与运行方式-创新互联

本篇内容主要讲解“Flutter的搭建与运行方式”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Flutter的搭建与运行方式”吧!

创新互联是一家以网站建设公司、网页设计、品牌设计、软件运维、营销推广、小程序App开发等移动开发为一体互联网公司。已累计为成都人造雾等众行业中小客户提供优质的互联网建站和软件开发服务。

01

Flutter开发环境搭建（Windows版）

一、系统环境要求：要安装并运行Flutter，开发环境必须满足以下条件。

 

我们可以去Flutter官网下载最新可用的安装包。

下载地址：

https://flutter.io/sdk-archive/#windows

注意：Flutter的渠道变动频繁，请以官网为准。同时，我们也推荐去Flutter github项目下下载安装包。

下载地址：

https://github.com/flutter/flutter/releases

下载完成后，请先将安装包zip解压到想安装Flutter SDK的路径（注意：不要将Flutter安装到需要高权限的路径，如 C:Files)。之后，在Flutter安装目录的flutter文件下找到flutter_console.bat，双击运行并启动flutter命令行。

 

二、更新环境变量：若想在Windows系统自带命令行运行flutter命令，开发者需要添加以下环境变量到用户PATH：“控制面板->用户账户->更改我的环境变量”，同时，在“用户变量”下检查是否有名为“Path”的条目：如果该条目存在，追加flutter \ bin的全路径，使用；作为分隔符。如果该条目不存在，创建一个新用户变量Path，然后将flutter \ bin的全路径作为它的值。Flutter的执行需要联网，还需要设置：

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

 

三、运行flutter doctor命令：开发者需在Flutter命令行运行flutter doctor命令来查看是否需要安装其它依赖，如果需要，则进行安装。在终端中输入flutter doctor，如果出现和下图类似的结果，甚至得到的x比图示更多，主要原因是没有安装Android studio。下面我们将列出Android Studio的安装步骤。

Flutter的搭建与运行方式

四、Android Studio的安装：

Flutter的搭建与运行方式Flutter的搭建与运行方式

五、安装Android证书

安装好Android Studio后，再次打开终端（命令行），输入flutter doctor，这时x的数量会明显减少，但可能还是会遇到1-2个，如果只有1个就说明没有安装证书，开发者只需在终端里执行以下命令即可：

flutter doctor --android-licenses

当提示Y/N选择时，请直接选择Y即可完成安装。

02

Flutter开发环境搭建（Mac版）

一、系统环境要求：要安装并运行Flutter，开发环境必须满足以下条件。

 

二、下载Flutter SDK包：

推荐在官网下载，网址：https://flutter.io/setup-macos/ 。

下载完成后，解压安装包到想安装的目录，如:cd ~/development

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

 

三、配置环境变量

压缩包下载好以后，选择位置进行解压，压缩包解压的位置在下面配置环境变量的时候仍要使用。

首先打开终端工具，使用vim进行配置环境变量，命令如下：

vim ~/.bash_profile

然后，在打开的文件里增加一行代码，配置flutter命令，使其在任何地方都可以使用。添加的代码为：

export PATH=/app/flutter/bin:$PATH

这行命令需要根据压缩包解压的位置来进行编写，内容是你的路径。配置完成后，还需用source命令重新加载，具体命令如下:

source ~/.bash_profile

完成以后， flutter的安装工作已基本完成，但要进行开发，还需要使用命令来检测其是否成功安装。

Flutter的搭建与运行方式

四、检查开发环境：如上图所示，已经成功安装了Flutter，但是还不具备开发环境，可以用flutter doctor命令来检查还需安装的插件和软件。

 

五、安装Xcode：要为iOS开发Flutter应用程序，需要Xcode9.0或更高版本。

sudo xcode-select --switch/Applications/Xcode.app/Contents/Developer

在大多数的情况下，当你想要使用最新版本的Xcode时，这是正确的路径。如果需要使用不同版本的Xcode，请指定相应的路径。

六、安装Android Studio：和Windows一样，在Android设备上构建并运行Flutter程序都需要先安装Android Studio。

 

03

升级Flutter

Flutter SDK有多个分支，如beta、dev、master、stable，其中stable为稳定分支，dev和master为开发分支。flutter安装完成后，可以运行flutter channel，查看所有分支。

若想升级flutter SDK，需要执行命令：flutter upgrade 。

该命令会同时更新Flutter SDK和flutter项目依赖包。若只更新项目依赖包（不包括Flutter SDK），可以使用以下命令：

flutter packages get 获取项目所有的依赖包。
flutter packages upgrades 获取项目所有依赖包的最新版本。

04

开发工具的配置与使用

一、Android studio配置与使用

首先需要安装两个插件，分别是Flutter和Dart插件：

1.安装步骤

 

2.创建Flutter应用

 

3.运行应用程序

Flutter的搭建与运行方式

4.体验热重载：Flutter可以通过热重载实现快速的开发周期，热重载无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态。对代码进行简单的更改，然后使用IDE或命令行工具进行重新加载，可以在设备或模拟器上看到更改。

二、VS Code的配置与使用

1.安装flutter插件：

 

2.创建Flutter应用

 

3.体验热重载

用VSCode编写Flutter的缺点之一是需要手动加载更新应用，这在一定程度上影响了工作效率。当我们运行flutter run以后，会出现一段红色的文字提示，如下所示：

 

4.写一个HelloWorld程序

当我们搭建好开放环境搭后，按照惯例我们需要写一个HelloWorld程序。 将下面这段代码写在根目录.dart文件中，作为Flutter主文件。

import 'package:flutter/material.dart';
//主函数（入口函数），下面我会简单说说Dart的函数
void main() =>runApp(MyApp());
// 声明MyApp类
class MyApp extends StatelessWidget{
//重写build方法
@override
Widget build(BuildContext context){
//返回一个Material风格的组件
return MaterialApp(
  title:'Welcome to Flutteraa',
  home:Scaffold(
    //创建一个Bar，并添加文本
    appBar:AppBar(
      title:Text('Welcome to Flutter'),
    ),
    //在主体的中间区域，添加一个hello world 的文本
    body:Center(
      child:Text('Hello World'),
    ),
    ),
    );
    }
}

结果如下图所示：

Flutter的搭建与运行方式

05

连接设备运行Flutter应用

Window下只支持为Android设备构建并运行Flutter应用，而macOS同时支持iOS和Android设备。下面将分别介绍如何连接Android和iOS设备来运行flutter应用。

一、连接Android模拟器

在Android模拟器上运行并测试Flutter应用，请按照以下步骤操作：

 

二、连接Android真机设备

要准备在Android设备上运行并测试Flutter应用，需要Android 4.1或更高版本的Android设备。

 

三、连接iOS模拟器

要准备在iOS模拟器上运行并测试Flutter应用，请按以下步骤操作：

 

四、连接iOS真机设备

如果要将Flutter应用安装到iOS真机设备，除了需要一些额外的工具和一个Apple账户，还需要在Xcode中进行一些设置。

1.安装homebrew(如果已经安装了brew，跳过此步骤)；

2.打开终端并运行如下这些命令：
    brew update
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller ios-deploy cocoapods
    pod setup
如果这些命令中的任何一个失败并出现错误，需要运行brew doctor并按照说明解决问题

3.遵循Xcode签名流程来配置项目：

在你Flutter项目目录中通过open ios/Runner.xcworkspace打开默认的Xcode workspace。

到此，相信大家对“Flutter的搭建与运行方式”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


本文名称：Flutter的搭建与运行方式-创新互联
网页URL：http://www.tsicrk.com/article/dgedoj.html

其他资讯

让你的专属顾问为你服务

1.6803s