跨平台移动开发平台Flutter环境搭建

本文详细介绍Flutter开发环境的搭建过程,包括配置环境变量、下载SDK、安装Android Studio插件及创建和运行首个Flutter项目。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1 前言

话说,工作了几年之后发现移动开发的变化实在太快了,现在越来越多的跨平台移动开发框架出来,对原生的冲击也越来越大,RN,H5等移动开发框架非常火热,虽然有不少的问题,其中最让人不满意的就是性能问题了。但是假如有一天性能问题解决了呢?那么原生的开发势必要受到很大的冲击。google最近推出了Flutter开发框架,个人比较看到这个框架,搭建个环境来搞一搞。

2 Flutter介绍

Flutter官方介绍如下:

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. 
Flutter works with existing code, is used by developers and organizations around the world, 
and is free and open source.

Flutter是一个开源的免费的跨平台(IOS Android)高性能的UI框架。它可以与现有的native代码一起工作。官方地址如下:
https://flutter.io/

知乎上有很多有关Flutter与RN等的比较,参考:
https://www.zhihu.com/question/50156415/answer/278374951

3 Flutter开发环境搭建

下面开始正式搭建一个Flutter的开发环境。
建议:由于众所周知的原因,请自备梯子。
1 中国开发者建议设置以下变量

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

在git打开的cmd窗口中先设置以下环境变量

2 下载Flutter SDK

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

由于已经发布了beta版本,下载后结果如下:
这里写图片描述
然后再设置以下环境变量

export PATH="$PWD/flutter/bin:$PATH"

3 进入SDK目录安装Flutter
git cmd下输入以下命令进行安装:

flutter doctor

安装过程比较漫长,一般都会因为网络问题卡住,笔者的安装也不是一帆风顺的,期间开过翻墙代理,还重新按照步骤来走过,还选择了不同的时间段,例如网上,上午,下午等。总之经过一个周末的尝试,终于安装成功。安装成功再输入命令 flutter doctor,截图如下:
这里写图片描述
只要有红色方框中的打钩,基本就没什么问题了。

4 Android Studio 或者IDEA安装Flutter插件
由于本人是屌丝Android狗一枚,没有钱买Mac,也不会IOS开发,所以接下来以Android为例来介绍
由于Android开发环境已经搭建好,直接在Android Studio中安装Flutter的插件
这里写图片描述
可以看到,这里我已经安装过了。安装后之后我们再次运行flutter doctor。这个时候如果连接上Android设备,就会提示如下:
这里写图片描述

5 Android Studio新建Flutter工程
关键步骤如下截图所示:
这里写图片描述
Android Studio安装好Flutter插件后会出现上图菜单
这里写图片描述
选择Application
这里写图片描述
这里需要选择正确的SDK路径
这里写图片描述
建议不要去勾选红色方框的,因为我勾选了工程老是同步不下来。

最后新建好的工程如下:
这里写图片描述
一般来说,最后一步往往也不容易成功,可能在过程中会去同步很多东西,这个时候就尝试使用以下梯子吧。多折腾一下吧。

6 运行Flutter项目
点击最上面的运行,连接好设备,最后的运行效果如下图所示:
这里写图片描述
这样一个简单的Flutter开发环境就搭建成功了。

源码参考:
github https://github.com/qiyei2015/flutter_app

参考:
https://flutter.io/setup-windows/
https://github.com/flutter/flutter/wiki/Using-Flutter-in-China

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值