谷歌移动UI框架Flutter入门

引言

作为Android开发人员,很有必要学习一下Flutter,那么Flutter是什么呢?它到底有什么作用呢?我们一一来揭晓。
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia应用的主要方式。Fuchsia是谷歌继Android和Chrome OS之后开发的第三个系统,未来,谷歌是计划将Flutter作为这款操作系统的构建方式的。

什么是Flutter?

Flutter实际上是一个包含多种内容的软件包,它是用来创建移动2D应用程序SDK的软件开发包,如果你计划在某些游戏中使用3D应用程序,那么Flutter将无法满足你的需求,但如果你的计划是在APP商店中的大多数的2D应用程序,那么Flutter就是你的选择。
Flutter软件包中最重要的就是编程框架,编程框架使用Dart作为编程语言。而实际上,我们不会直接调用Dart,所以我们不需要去深入学习Dart语言。Flutter附带了大量的小控件,能够帮助开发者省去很多功夫。

下载安装Flutter

现在我们就来看看如何下载安装Flutter,首先浏览器搜索Flutter,找到官网进入,点击Get started。

选择对应的操作系统,就会跳转至下载界面。
由于在国内访问Flutter有可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户变量中。

PUB_HOSTED_URL:https://pub.flutter-io.cn
FULTTER_STORAGE_BASE_URL:https://storage.flutter-io.cn

Flutter镜像设置完成以后,接下来就可以获取Flutter SDK了。去Flutter官网下载最新可用的安装包。下载完成后解压即可。
解压完后,打开flutter文件夹,找到flutter_console.bat,双击运行,进行命令行的安装。

当看到这样的一个控制台界面,说明Flutter启动成功。启动成功后,我们还需要配置Flutter的环境变量。需要将bin文件夹的位置配置到用户环境中。需要注意的是:这里配置的是用户变量,不是系统变量。将bin目录位置添加到用户变量的path中。
配置完后,我们就可以使用Flutter命令了,打开一个控制台,输入指令:

flutter doctor

这是一条用于检查当前电脑是否包含运行Flutter的全部环境。运行该条指令便会去自动下载所需资源。

需要注意的是,打勾的地方说明资源下载成功,而感叹号的位置说明资源下载异常,我们需要去解决这些异常的下载,才能使Flutter正常地运行。

解决资源异常问题

我这里因为有了Android的运行环境和Android Studio开发工具,所以都是感叹号,而没有这些东西的同学就会打一个红色的叉,看到红色的叉也不要惊慌失措,只需要将Android的环境下载好即可。
下载好Android环境后,我们接着输入指令:

flutter doctor --android-licenses

该条指令的作用是接受Android许可,执行该条指令后会多次询问是否许可,只需输入‘y‘回车即可。
再次输入flutter doctor来检查一下环境。

证明第二项的异常我们解决了。
接下来我们解决第三个异常,也就是Android Studio的异常。
我们打开Android Studio,点击File,然后点击Setting,最后点击Plugins,打开插件窗口,在该窗口中点击Browse repositories,选择从网络上下载插件。在搜索框中搜索Flutter并下载,在下载前Android Studio会询问是否同意下载Dart插件,我们允许即可。下载完成后重启Android Studio,我们再次到控制台中检查一下资源,输入flutter doctor指令,会发现,第三项也打勾了,问题成功解决。

第四项异常是因为IDEA没有安装Flutter的插件,这里我们只用Android Studio进行开发,所以可以不用管,没有这个开发工具的同学也不会产生这个问题。那么接下来,我们看最后一个异常,这个异常是因为现在没有设备连接,所以我们必须准备一个Android设备。

创建Flutter项目并启动

经过前面的一些操作,Flutter总算是成功安装上来了,那么,接下来,我们就尝试创建一个Flutter项目并运行到设备上。
在这之前,我们需要再设置一些信息,在Android Studio中点击File,然后点击Setting,找到Flutter设置界面。

将我们最开始下载的Flutter的解压文件路径设置上去,Dart我们可以不用设置,它会自动去寻找路径。设置完成后点击OK,然后新建一个Flutter Project,点击Flutter Application。

点击Next,然后点击Finish。等待片刻,Android Studio会自动帮我们构建开发环境。构建完成后我们右上角选择一下运行设备,然后点击运行。

然而点击运行之后,有些同学会发现Android Studio停留在了这个界面。

再也没有变化过,这不禁让人感到奇怪,这么长的构建时间,它到底在干什么?其实这不奇怪,展开gradle-wrapper文件夹。

发现了没,构建工具并不存在,所以,Android Studio其实就是在下载构建工具,通过观察文件夹变化,我找出了它需要下载的版本。

这个版本确实是我所有构建版本中没有的,然后因为网络的原因,下载速度极慢,于是便出现了刚才的那一幕,所以,该怎么解决呢?两种办法,要么就一直等,网速再慢,几十MB的东西下个一天还下不完吗?哈哈,开个玩笑。第二个办法,就是自己把它需要的构建版本下载好,然后放到这个文件夹下面去。当然,还是有其它办法的,就是去gradle-wrapper.properties文件中将构建工具版本改为自己已经有的,这样也是可以的,我就不演示了。
将下载完的构建工具放进去,我们停止构建,然后重新运行,果然这一次就快了许多,应用很快就运行到了Android设备上。

这是Flutter项目自动生成的,我们并没有编写一条代码。
需要注意的是,很多同学可能在这里还会遇到一些问题,比如在运行的时候报这个错。

Error:FAILURE: Build failed with an exception.

* What went wrong:
Could not resolve all files for configuration ':app:debugCompileClasspath'.
> Could not resolve com.google.android.gms:play-services-ads:latest.release.
  Required by:
      project :app
   > Could not resolve com.google.android.gms:play-services-ads:12.0.1.
      > Could not get resource 'https://jcenter.bintray.com/com/google/android/gms/play-services-ads/12.0.1/play-services-ads-12.0.1.pom'.
         > Could not GET 'https://jcenter.bintray.com/com/google/android/gms/play-services-ads/12.0.1/play-services-ads-12.0.1.pom'.
            > Read timed out

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 35s

这还是因为网络的原因,无法下载到这些资源文件,解决方案如下:
在project级别下的build.gradle文件中添加如下代码:

buildscript {

    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.1'
        classpath 'com.google.gms:google-services:4.0.1'  //谷歌服务库依赖

    }
}

allprojects {
    repositories {
        google()
        jcenter()
        mavenCentral ()
        maven {url 'https://dl.bintray.com/jetbrains/anko'} //这个是解决这个问题的关键
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

这样问题应该就解决了,我也不可能一一地列举出所有的问题,如果大家还是碰到了问题,可以自行百度解决。

总结

经历了千辛万苦,第一个Flutter项目终于成功运行起来了。Flutter打包出来的是纯原生应用,和浏览器应用完全不同,原生应用指的是安装在手机内部会带图标的应用,这种应用是可以发布到Android市场或者App Store里面的。

最后贴上gradle构建工具的下载网址:http://services.gradle.org/distributions/

原文地址:https://www.cnblogs.com/blizzawang/p/11411691.html

时间: 2024-11-10 01:47:26

谷歌移动UI框架Flutter入门的相关文章

谷歌移动UI框架Flutter教程之Widget

引言 在之间我已经介绍了关于Flutter的下载安装以及配置,还有开发工具Android Studio的配置,还不知道的同学可以看看我这篇博客--谷歌移动UI框架Flutter入门.这里为什么非要用Android Studio,我可以解释一下.Android Studio是Google的亲儿子,由谷歌一手开发,而Flutter也是谷歌推出的技术,所以在支持和兼容问题上,Android Studio是非常有优势的.老话说得好,肥水不流外人田,谷歌内部肯定是将Android Studio对Flutt

10 个打造 React.js App 的最佳 UI 框架

在本文中,我们将分享一些助你打造 React.js App 最佳的 UI 框架.它们具备你所需要的基本 React 组件,以及易用的 API,同时,在外观和体验上也非常棒.Have Fun ! 1. Material-UI 基于谷歌 Material Design 设计规范的 React 组件 此外,它还是 React 的第一个 UI 套件.Material-UI具备你所需要的所有组件(甚至更多),以及可配置性极高的预定义调色板和<MuiThemeProvider>,帮助你为应用程序定制相应的

目前流行前端几大UI框架 ----vue Vue的UI组件库

在前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架. 一.Mint UI 屏幕快照 2019-01-18 下午3.03.59.png Mint UI是 饿了么团队开发基于vue .js的移动端UI框架,它包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要. 官网:https://mint-ui.github.io/#!/zh-cn Github: https://github.com/Elem

Flutter入门基础

Flutter是Google开发的一套全新的跨平台.开源UI框架(本质上就是sdk). 支持iOS.Android系统,并且是Fuchsia系统的默认开发套件.桌面和web上的支持也都在实验中. Flutter特点:跨平台(Flutter是Fuchsia的开发框架,同时支持Android.IOS),媲美原生性能,热重载(目前不支持热更新,但已加入2019工作计划). 其官方编程语言为Dart,熟悉Dart语言. 入门网站:Flutter中文网 Flutter官网(英文) 1.工程基础简介 1.1

目前流行前端几大UI框架

原味地址:https://www.jianshu.com/p/96560dacc40d 在前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架. 一.Mint UI 屏幕快照 2019-01-18 下午3.03.59.png Mint UI是 饿了么团队开发基于vue .js的移动端UI框架,它包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要. 官网:https://mint-ui.github

MvvmLight框架使用入门(三)

本篇是MvvmLight框架使用入门的第三篇.从本篇开始,所有代码将通过Windows 10的Universal App来演示.我们将创建一个Universal App并应用MvvmLight框架. 首先通过VS2015创建一个名为UniversalApp的空工程(工程类型为Universal Windows),然后通过NuGet获取MvvmLight,这里需要注意的是,我们选择MvvmLightLib仅下载DLL文件,因为MvvmLight还未对Universal App做适配,并不会自动创建

迷你MVVM框架 avalonjs 入门教程(司徒正美)

迷你MVVM框架 avalonjs 入门教程 关于AvalonJs 开始的例子 扫描 视图模型 数据模型 绑定属性与动态模板 作用域绑定(ms-controller, ms-important) 模板绑定(ms-include) 数据填充(ms-text, ms-html) 类名切换(ms-class, ms-hover, ms-active) 事件绑定(ms-on,……) 显示绑定(ms-visible) 插入绑定(ms-if) 双工绑定(ms-duplex) 样式绑定(ms-css) 数据绑

【设计和开发一套简单自己主动化UI框架】

!有兴趣的朋友请直接移步Github,本帖子已经不做更新,框架的详细的实现已经做了优化和代码整理,本文仅仅介绍了详细的设计思路! 目标:编写一个简单通用UI框架用于管理页面和完毕导航跳转 终于的实现效果请拉到最下方查看 框架详细实现的功能和需求 载入.显示,隐藏,关闭页面,依据标示获得对应界面实例 提供界面显示隐藏动画接口 单独界面层级.Collider.背景管理 依据存储的导航信息完毕界面导航 界面通用对话框管理(多类型Message Box) 便于进行需求和功能扩展(比方,在跳出页面之前加入

【腾讯TMQ】5小时搞定谷歌原生自动化框架UiAutomator1.0

[腾讯TMQ]5小时搞定谷歌原生自动化框架UiAutomator1.0 前言 谷歌对UI测试(UI Tetsting)的概念是:确保用户在一系列操作过程中(例如键盘输入.点击菜单.弹出对话框.图像显示以及其他UI控件的改变),你的应用程序做出正确的UI响应. UI测试(功能测试.黑盒测试)的好处是不需要测试者了解应用程序的内部实现细节,只需要知道当执行了某些特定的动作后是否会得到其预期的输出.这种测试方法,在团队合作中可以更好地分离的开发和测试角色.然而常见的UI测试多是以手动方式去执行,然后去