flutter官方示例: flutter_gallery

616 阅读1分钟

flutter_gallery是什么?

官方写的一些示例,可以运行在windows,mac,android,IOS,WEB端. 如下截图是运行在windows端的样子

image.png

image.png

image.png

image.png

什么时候看flutter_gallery

在了解了基本的dart语法,flutter布局,flutter事件,flutter动效,flutter国际化之后,就可以从模仿flutter_gallery示例开始,逐渐熟悉常用组件的用法。

不但有运行效果,并且还可以直接从界面查看到源代码,以及导航到具体的API网址,非常方便。

从哪里下载

GitHub - flutter/gallery: Flutter Gallery is a resource to help developers evaluate and use Flutter

gitee镜像

不会魔法的小伙伴,如何在自己电脑上编译运行

编辑android/gradle/wrapper/gradle-wrapper.properties文件

image.png

命令行进入android目录,打开build.gradle文件, 将原本的远程仓库都替换成镜像地址

// google()
// mavenCentral()

// gradle仓库镜像
mavenLocal()
// 这个仓库,看情况,先别禁用,如果不能正常运行,再禁用
// maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/central' }
maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/public' }
maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }
maven { url 'https://www.jitpack.io' }
mavenCentral()
google()
jcenter()

android目录执行:.\gradlew clean命令,由于网络环境问题,gradle编译项目可能会出错,通过该命令就可以看到gradle编译具体哪里有问题,然后再具体问题具体分析

进一步查看出错的详细信息.\gradlew clean --info

编译成windows应用会有如下错误,但可以忽略。对实际使用基本没影响

image.png

编译成android的apk,不会出现任何错误。

macios没试过

正式编译运行

进入项目根目录执行flutter run