android切环境插件,Android Studio下Flutter环境搭建图文教程

一、Flutter介绍

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

二、环境搭建

Flutter 的环境搭建⼗分省⼼,特别对应Android开发者⽽⾔,只是在AndroidStuido上安装

插件,并下载flutterSdk到本地,配置在环境变量即可,其实

1.下载AndroidStudio中的插件 Dart和Flutter

大家都是聪明人看图说话,不做多余解释!

183a7cda203bbaa700f4bcf2317fbfb3.png

2.获取Flutter SDK

043ddc33f27af32c3292775a4b9f497d.png

3.环境配置

网上流传的大多数是Git命令配置,很装逼很拉风,但是做人得低调,所以这里我们写了两个配置方案:

方案A: git命令配置 (网上大多数教程是这样配置):

(1)打开gitbash,输入如下命令:

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

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置

export PATH=pwd/flutter/bin:$PATH

方案B:手动配置:

在用户变量上添加如下变量

70a4fb58b6aeb3036f64ca74153236b9.png

> 需要配置的内容:

> ANDROID_HOME,在把你android SDK的路径填上

//国内用户需要设置

PUB_HOSTED_URL:

https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL:

https://storage.flutter-io.cn

PATH:

Flutter sdk路径的bin (不明白看下图)

4d41d44d658c916f0cd616ff8a8b5872.png

测试是否配置成功

按win+R 直接运行 PowerShell , 然后输入如下命令:

flutter doctor

成功效果:

a2ae3a9ea29c4e76ff7f751dc88c1922.png

错误效果:

如果出现以下错误 , 则是没有配置好Android的环境

解决办法: 添加环境变量ANDROID_HOME,把你android SDK的路径填上,重启电脑即可

7864f909ef121f2f4e82d444e71fa5f1.png

重启后继续执行 flutter doctor 如果还不成功就再执行 flutter doctor --android-licenses ,接下来 所有的输入 y 就可以了

3f763b2864f839451de40ede2a6256f5.png

成功后效果

68bf46cf15c48c423474a122201c4d44.png

三、创建项目

创建项目很简单基本上和Android项目一样

File->New->New Flutter Project

选Flutter Application ->Next

起App名字 ->Next 起包名 ->Finish

修改main.dart内容

运行就会有Hello World了

详细步骤(直接贴图不解释了)

2de3ecd90d807c2c9211c386209b4a71.png

55308183e0b013d2921e44b397b295e7.png

618ffc361e1e11b4e7986411e13cec28.png

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return new MaterialApp(

title: 'WelcometoFlutter',

home: new Scaffold(

appBar: new AppBar(

title: new Text('WelcometoFlutter'),

),

body: new Center(

child: new Text('Hello World'),

),

),

);

}

}

4a96400a593be779b4426f38281746fe.png

四、体验热重载

Flutter的热重载可帮助您快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以在亚秒内重载,并且不会丢失状态。

步骤:

1.将字符串 HelloWorld 更改为 HelloWorldFlutter

2. 不要按“Stop按钮; 让您的应用继续运行。

3.要 看您的更改 只需Ctrl+S 就可以了

你就会立即看到更新后的字符串

网上操作效果(懒得做动图,大家凑合看吧!)

969dfb9379c5be23c50b2cb9af59c9d1.gif

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值