【Flutter】Flutter Gallery 官方示例简介 ( 项目简介 | 工程构建 )(一)

简介: 【Flutter】Flutter Gallery 官方示例简介 ( 项目简介 | 工程构建 )(一)

文章目录

一、Flutter Gallery 简介

二、Flutter Gallery 项目构建



发现一个很强的 Flutter 开源项目 , 由 Flutter 官方提供的 Flutter Gallery , 里面的很多功能可供参考 ;


这项目太强了 , 如果都学会了 , Flutter UI 组件基本就没问题了 ;


本篇博客起个头 , 简单介绍一下主要内容 , 之后针对每个技术点详细解析 ;






一、Flutter Gallery 简介


Flutter Gallery 简介 :


项目地址 : https://github.com/flutter/gallery , ( 访问有些问题 , GitHub 估计要凉 )

国内下载地址 : https://pan.baidu.com/s/1HykdPJw2bDWddTqGEvdqBQ , 提取码: 2wsk , Flutter Gallery 已经打包放在了里面 ;

image.png



Flutter Gallery 用于帮助开发者学习和使用 Flutter ;


Flutter Gallery 包含的内容 :


材料设计 ( Material Design ) 组件 : Android 风格组件 ;

Cupertino 组件 : iOS 风格组件 ; ( [ˌkupərˈtinoʊ] )

行为控制相关功能

使用 Flutter 实现的小功能


Flutter 支持的平台 : 目前 Flutter 支持的平台很多 , 1 个 Web 平台 , 2 个手机平台 , 3 个桌面平台 ;


Android

iOS

web

macOS

Linux

Windows





二、Flutter Gallery 项目构建


源码下载后 , 发现 Flutter Gallery 本身的配置不匹配 , 需要在 pubspec.yaml 中将 args 插件的版本号设置成 1.6.0 ;


args: ^1.6.0


参考 【错误记录】Flutter 报错 ( Because xx depends on flutter_driver any from sdk which depends on args 1.6.0 )



然后在说一下需要用到的 Flutter SDK 版本 , 最新的稳定版本的 Flutter SDK 2.0.2 中没有找到相关函数 , 说明需要使用更新的 Flutter 版本 , 这里直接使用最新的 Beta 测试版本的 SDK , 2.1.0-12.2.pre 版本 ;


参考 【错误记录】Flutter 构建报错 ( Error: Method not found: ‘CupertinoModalPopupRoute‘. | 下载最新 Flutter SDK 版本 )




在 Android Studio 欢迎界面选择 " Open an Existing Project " 选项 ,


image.png


选择要打开的项目 ,

image.png



修改 pubspec.yaml 中的 args 插件版本号 ,


args: ^1.6.0


修改 pubspec.yaml 配置后 , 点击右上角 " Pub get " 按钮 , 下载依赖包 ,


image.png

目录
相关文章
|
9天前
|
Dart 前端开发 IDE
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
73 4
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
|
17天前
|
存储 容器
Flutter 构建自适应布局
Flutter 构建自适应布局
Flutter 构建自适应布局
|
4月前
|
Dart
如何在 Flutter 项目中使用 Dart 语言?
如何在 Flutter 项目中使用 Dart 语言?
141 58
|
2月前
|
Dart Android开发 开发者
Flutter跨平台开发实战:构建高性能移动应用
【10月更文挑战第25天】随着移动设备种类的增加,开发者面临跨平台应用开发的挑战。Flutter作为Google推出的开源UI工具包,凭借其强大的跨平台能力和高效的开发效率,成为解决这一问题的新方案。本文将介绍Flutter的核心优势、实战技巧及性能优化方法,通过一个简单的待办事项列表应用示例,帮助读者快速上手Flutter,构建高性能的移动应用。
48 0
|
3月前
|
Dart IDE 开发工具
鸿蒙Flutter实战:09-现有Flutter项目支持鸿蒙
本文介绍了将现有Flutter项目适配鸿蒙系统的步骤。首先,根据[鸿蒙Flutter适配指南]搭建开发环境,并使用fvm管理多版本SDK。项目采用模块化设计,包括apps、common、components、modules和plugins等目录,分别对应不同功能模块。重点在于在apps目录下创建新的鸿蒙项目,逐步添加依赖并解决版本兼容性问题。最后,通过配置pubspec.yaml文件和特定插件的鸿蒙化适配,完成项目的编译与运行测试。
368 0
|
5月前
|
开发框架 缓存 Android开发
Flutter相关痛点解决问题之研发环境与工程管理中的配置难题如何解决
Flutter相关痛点解决问题之研发环境与工程管理中的配置难题如何解决
|
5月前
|
移动开发 Dart Android开发
构建未来:基于Flutter的跨平台移动应用开发
【7月更文挑战第52天】随着移动设备市场的多样化,跨平台移动应用的需求日益增长。传统的Android和iOS原生开发方式虽强大但成本较高,而新兴的跨平台框架如React Native、Xamarin等虽然提供了解决方案,但仍存在性能与体验上的妥协。本文将探讨使用Google推出的UI工具包Flutter进行高效、高性能的跨平台移动应用开发。我们将分析Flutter的核心架构,展示如何利用其丰富的组件库和高效的渲染引擎在Android和iOS之间实现无缝衔接,并讨论其在现代移动开发中的应用前景。
|
5月前
|
开发者 监控 开发工具
如何将JSF应用送上云端?揭秘在Google Cloud Platform上部署JSF应用的神秘步骤
【8月更文挑战第31天】本文详细介绍如何在Google Cloud Platform (GCP) 上部署JavaServer Faces (JSF) 应用。首先,确保已准备好JSF应用并通过Maven构建WAR包。接着,使用Google Cloud SDK登录并配置GCP环境。然后,创建`app.yaml`文件以配置Google App Engine,并使用`gcloud app deploy`命令完成部署。最后,通过`gcloud app browse`访问应用,并利用GCP的监控和日志服务进行管理和故障排查。整个过程简单高效,帮助开发者轻松部署和管理JSF应用。
65 0
|
5月前
|
开发者 容器 Java
Azure云之旅:JSF应用的神秘部署指南,揭开云原生的新篇章!
【8月更文挑战第31天】本文探讨了如何在Azure上部署JavaServer Faces (JSF) 应用,充分发挥其界面构建能力和云平台优势,实现高效安全的Web应用。Azure提供的多种服务如App Service、Kubernetes Service (AKS) 和DevOps简化了部署流程,并支持应用全生命周期管理。文章详细介绍了使用Azure Spring Cloud和App Service部署JSF应用的具体步骤,帮助开发者更好地利用Azure的强大功能。无论是在微服务架构下还是传统环境中,Azure都能为JSF应用提供全面支持,助力开发者拓展技术视野与实践机会。
22 0
|
5月前
|
开发框架 API 开发者
Flutter表单控件深度解析:从基本构建到高级自定义,全方位打造既美观又实用的移动端数据输入体验,让应用交互更上一层楼
【8月更文挑战第31天】在构建美观且功能强大的移动应用时,表单是不可或缺的部分。Flutter 作为热门的跨平台开发框架,提供了丰富的表单控件和 API,使开发者能轻松创建高质量表单。本文通过问题解答形式,深入解读 Flutter 表单控件,并通过具体示例代码展示如何构建优秀的移动应用表单。涵盖创建基本表单、处理表单提交、自定义控件样式、焦点管理和异步验证等内容,适合各水平开发者学习和参考。
122 0