Android Studio下Flutter环境搭建图文教程

一、Flutter介绍

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

二、环境搭建

Flutter 的环境搭建⼗分省⼼,特别对应Android开发者⽽⾔,只是在AndroidStuido上安装
插件,并下载flutterSdk到本地,配置在环境变量即可,其实 中⽂⽹的搭建Futter开发环境
已经很贴⼼详细,从平台指引开始安装基本都不会遇到问题。

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

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

2.获取Flutter SDK

获取Flutter SDK (点击下载)

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:手动配置:

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

> 需要配置的内容:
> 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 (不明白看下图) 

测试是否配置成功

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

成功效果:

错误效果:
如果出现以下错误 , 则是没有配置好Android的环境
解决办法: 添加环境变量ANDROID_HOME,把你android SDK的路径填上,重启电脑即可

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

成功后效果

三、创建项目

创建项目很简单基本上和Android项目一样
File->New->New Flutter Project
选Flutter Application ->Next
起App名字 ->Next 起包名 ->Finish
修改main.dart内容
运行就会有Hello World了

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


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'),
  ),
  ),
 );
 }
}

四、体验热重载

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

步骤:

1.将字符串 HelloWorld 更改为 HelloWorldFlutter
2. 不要按“Stop按钮; 让您的应用继续运行。
3.要 看您的更改 只需Ctrl+S 就可以了

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

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

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

(0)

相关推荐

  • Android Studio下Flutter环境搭建图文教程

    一.Flutter介绍 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费.开源的. 二.环境搭建 Flutter 的环境搭建⼗分省⼼,特别对应Android开发者⽽⾔,只是在AndroidStuido上安装 插件,并下载flutterSdk到本地,配置在环境变量即可,其实 中⽂⽹的搭建Futter开发环境 已经很贴⼼详细,从

  • Android最新版本开发环境搭建图文教程

    本文只是写了如何配置JDK,以及adt-bundle的配置.对于以前的adt-bundle的版本,会自带CPU/ABI系统镜像,经过本文所描述的两个步骤后可以直接创建AVD,但是从官网下载的最新的adt-bundle并没有带镜像,下篇文章讲述如何下载多个Android版本平台以及下载镜像. 一.JDK的下载,安装与环境变量配置 1)JDK的下载 a, 输入网址https://www.oracle.com/进入oracle官网,如下,点击Downloads栏下的Java SE,进入Java SE的

  • Android Studio 下 Flutter 开发环境搭建,Flutter,Dart 插件安装,Flutter SDK 安装,环境变量配置,开发环境检查

    I . Flutter 学习资料 Flutter 学习资料 : ① 官方文档 : https://flutter.dev/docs ② Flutter Android 开发者文档 : https://flutter.dev/docs/get-started/flutter-for/android-devs ② Flutter 插件库 : https://pub.dev/ II . Flutter 开发环境搭建 Flutter 开发环境搭建 : ① Android Studio : https:/

  • windows下的WAMP环境搭建图文教程(推荐)

    本篇文章主要是讲一下我自己安装wamp环境的一些步骤和见解,前方多图预警,慎入!!!!! PHP运行环境 : Linux下的三种安装方式:源码包安装.rpm包安装.集成环境安装(lnmp) windows安装的两种方式:单个下载安装.集成环境安装(AppServ,phpstudy,wamp) 在Windows系统上安装PHP开发环境: 所需软件分别独立安装: 安装前准备 安装Apache 安装MySQL 安装PHP 安装phpMyA 软件名称 下载地址 Apache下载 http://httpd

  • 初学者易上手的SSH-struts2 01环境搭建(图文教程)

    首先,SSH不是一个框架,而是多个框架(struts+spring+hibernate)的集成,是目前较流行的一种Web应用程序开源集成框架,用于构建灵活.易于扩展的多层Web应用程序. 集成SSH框架的系统从职责上分为四层:表示层.业务逻辑层.数据持久层和域模块层(实体层). Struts作为系统的整体基础架构,负责MVC的分离,在Struts框架的模型部分,控制业务跳转,利用Hibernate框架对持久层提供支持.Spring一方面作为一个轻量级的IoC容器,负责查找.定位.创建和管理对象及

  • linux环境安装node.js开发环境搭建图文教程

    Node.js现在有多火,有多重要,就不多说了,这里介绍一下他的开发环境安装,通常情况下,我们都是在window环境进行开发,或者是在mac环境下进行开发,但是我们的项目实际运行的环境一般都是在linux上的,所以我们让我们的开发环境和生产环境能够尽量统一,且能够方便我们开发,一般我们将必要环境安装在服务器上,然后在window上通过xshell,SecureCRTPortable等一些工具连接上去,在window上使用方便IDE软件开发,然后通过ftp将文件同步上去,所以这里就讲一些如何在服务

  • Android studio 3.5.2安装图文教程详解

    Android Studio软件下载地址如下: 下载: http://www.android-studio.org/index.php/download Android 工具: https://www.androiddevtools.cn/ 1.下载界面 2.安装 每一步按照我选择的框安装就okay了!!!!! 3.安装完成 4.配置 5.选择界面样式 6.分配空间大小 当然你电脑内存大的话,分配大一点的空间内存 7.配置完成 我这有个小问题,不过没事,你可能不会出现这种问题,如果出现也没事,继

  • win10下FTP服务器搭建图文教程

    本文为大家分享了win10下FTP服务器搭建图文教程,供大家参考,具体内容如下 基础步骤: (1)按[Win + R]快捷键打开运行对话框,输入“optionalfeatures”后,按回车键,如下图所示: (2)在打开的[Windows功能]窗口中,确认下图框选的“Internet Information Services”即Internet信息服务的3个子功能都已经打勾“√”,如果没有勾选,就勾选上,然后点击[确定]按钮安装这些功能,图示如下: (3)在系统安装配置完成后,按[Win + S

  • Windows 7下Python Web环境搭建图文教程

    最近想尝试一下在IBM Bluemix上使用Python语言创建Web应用程序,所以需要在本地搭建Python Web的开发测试环境. 关于Python的版本 进入Python的网站,鼠标移到导航条上的下载,我们会发现提供两下主版本的下载链接! 这两个之间存在什么差别呢? 个人理解,2.7.x的版本为更加稳定的版本,而3.x的版本则是比较前卫的版本,包含了很多新功能新特性之类的: 但如果想要用Python开发一个新项目,那么该如何选择Python版本呢?大部分Python库都同时支持Python

  • Window 64位下python3.6.2环境搭建图文教程

    python3.6.2环境安装配置图文教程,具体如下 一.需要下载的软件 >python3.6.2.exe (也可以选择更新的版本) ---- -网址 >Anaconda3-4.4.0-Windows-x86_64(也可以选择更新的版本)----- 网址 如果下载速度不理想还可以选择在这个网站下载(速度非常快): 点击你想要的版本就可以下载了! 二.关于环境变量的设置 不需要单独在window里面去设置,在安装python的时候勾选下面红色框中那项就可以了: 安装完成后可以打开window自带

随机推荐