Flutter 包管理器和资源管理使用学习

目录
  • 什么叫包管理器
  • Flutter 包管理器
  • Pub仓库
  • 资源管理
    • 配置图片资源
    • 配置全局字体资源
  • 结束语

什么叫包管理器

包管理器就是用来管理程序运行依赖的一个配置应用。在程序运行中，我们会用到各种各样的第三方程序包，若我们手动管理这些程序，他将变得十分臃肿。这时候便诞生了包管理器，类似于手机中的AppStore。比如说我们手机中的某个程序更新了，我们就可以通过AppStore来更新。同样的我们可以通过包管理来更新我们程序中用到的依赖包。

Flutter 包管理器

Flutter包管理器是Yanr。它能够快速、安全、 并可靠地完成这些工作。通过Yarn你可以使用其他开发者针对不同问题的解决方案，使自己的开发过程更简单，你还可以上报或者贡献解决方案。一旦问题被修复， Yarn会更新保持同步，Flutter项目默认的配置文件是pubspec.yaml。

name: flutter_demo
description: A new Flutter project.
version: 1.0.0
dependencies:
  flutter:
    sdk: flutter
dev_dependencies:
  flutter_test:
    sdk: flutter
flutter:
 assets:
  - images/a_dot_burr.jpeg
  - images/a_dot_ham.jpeg
fonts:
  - family: Schyler
  fonts:
  - asset: fonts/Schyler-Regular.ttf
  - asset: fonts/Schyler-Italic.ttf
  style: italic

name：应用或包名称。

description: 应用或包的描述、简介。

version：应用或包的版本号。

dependencies：生产环境依赖的工具包。

dev_dependencies：开发环境依赖的工具包。

flutter：flutter相关的配置选项。

  • assets: 配置静态文件
  • font: 配置字体文件

Pub仓库

Pub 是Google官方的Dart Packages仓库，类似于node中的npm仓库，我们可以在上面查找我们需要的包和插件，也可以向pub发布我们的包和插件。关于安装依赖的相关步骤，这里不展开讲，自行学习。

资源管理

flutter资源主要包括静态数据（例如JSON文件）、图标和图片（JPEG，WebP，GIF，动画WebP / GIF，PNG，BMP和WBMP）等。每个asset都通过相对于pubspec.yaml文件所在位置的进行配置。如上所述的image图片、font字体等。

配置图片资源

  • 首先在pubspec.yaml flutter 配置环境下，配置静态文件目录或者文件名
assets:
  - images/tabbar  //  可以直接配置静态资源文件目录
  - images/image.png // 也可以配置图片名
  • 使用资源图片资源
Center(
  child: Image.asset(
    'images/image.png',
    width: 350,
    height: 335,
  ),
),

关于图片资源存放目录，官网说要必须配置2.x、3.x 文件目录（AssetImage 可以将asset的请求逻辑映射到最接近当前设备像素比例(dpi)的asset。），我在开发中没有配置，图片也正常加载了。所以你若没有此类需求，只是单纯去加载图片资源，建议创建一个图片资源文件夹就够了。 若我出现引导错误，及时纠正。

配置全局字体资源

  • 下载字体资源包，存放在程序主目录/fonts 文件夹（存放目录可以是任何位置，需要在pubspec.yaml 配置正确的目录地址）
  • 在pubspec.yaml flutter 配置环境下，配置静态文件目录或者文件名
fonts:
  - family: Avenir
    fonts:
      - asset: fonts/Avenir/Avenir.ttf  // 配置正确的字体存放路径
        weight: 900
  • 在main.dart 中定义全局字体配置
MaterialApp(
   theme: ThemeData(fontFamily: 'Avenir'),
   debugShowCheckedModeBanner: false,
  ),
);

配置完成后，你程序中的默认字体就是你所下载的字体文件了。是不是so easy！

关于静态资源配置，上述两种是我在项目中经常遇到的一些配置。关于其他静态资源配置，暂时没有遇到，若之后遇到了，解决了，我会及时补充，还请各位同学理解。

结束语

关于flutter包管理器和资源管理的学习到这里就结束了，更多关于Flutter 包管理器资源管理的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解Flutter 响应式状态管理框架GetX

    详解Flutter 响应式状态管理框架GetX

    目录 一.状态管理框架对比 Provider BLoC GetX 二.基本使用 2.1 安装与引用 2.2 使用GetX改造Counter App 2.3 GetX代码插件 三.其他功能 3.1 路由管理 3.2 依赖关系管理 3.3 工具 3.4 改变主题 3.5 GetConnect 3.6 GetPage中间件 Priority Redirect onPageCalled OnBindingsStart OnPageBuildStart 3.7 全局设置和手动配置 3.8 StateMix

  • Flutter状态管理Bloc使用示例详解

    Flutter状态管理Bloc使用示例详解

    目录 前言 两种使用模式 Cubit模式 最后 前言 目前Flutter三大主流状态管理框架分别是provider.flutter_bloc.getx,三大状态管理框架各有优劣,本篇文章将介绍其中的flutter_bloc框架的使用,他是bloc设计思想模式在flutter上的实现,bloc全程全称 business logic ,业务逻辑的意思,核心思想就是最大程度的将页面ui与数据逻辑的解耦,使我们的项目可读性.可维护性.健壮性增强. 两种使用模式 首先第一步引入插件: flutter_bl

  • Flutter 状态管理scoped model源码解读

    目录 一.什么是 scoped_model 二.用法 三.实现原理 四.结束 一.什么是 scoped_model 本文主要从 scoped_model 的简单使用说起,然后再深入源码进行剖析(InheritedWidget.Listenable.AnimatedBuilder),不会探讨 Flutter 状态管理的优劣,单纯为了学习作者的设计思想. scoped_model 是一个第三方 Dart 库,可以让您轻松的将数据模型从父 Widget 传递到子 Widget.此外,它还会在模型更新时

  • Flutter状态管理Provider的使用示例详解

    目录 前言 计数器 全局状态 总结 前言 Provider是三大主流状态管理框架官方推荐使用的框架,它是基于官方数据共享组件InheritedWidget实现的,通过数据改变调用生命周期中的didChangeDependencies()方法,来实现状态的通知改变. InheritedWidget的使用可以参考我之前的这篇Flutter中几种数据传递的应用总结. 计数器 还是以计数器为例,这次通过Provider实现,provider相较于bloc并没有那么强制性分层,所以这里我们自己分为数据层(

  • Flutter状态管理Provider示例解析

    Flutter状态管理Provider示例解析

    目录 什么是状态管理 常见的状态管理框架有哪些 Provider Redux GetX Provider 使用 添加依赖 导入应用 定义需要共享的数据 在应用程序入口初始化 使用共享数据 状态管理的好处 结束语 什么是状态管理 状态管理是一个十分广泛的概念,因为状态无处不在.从广义角度讲状态管理就是页面跟代码.跟服务器进行数据同步.例如:你在某购物应用内,添加了一件商品,你需要在购物车页面进行展示.这就是一种状态.相反的,你在商品页面点击了添加到购物车,却在购物车页面没有发现或者过段时间它才展示

  • flutter自定义InheritedProvider实现状态管理详解

    目录 InheritedWidget简单数据驱动模型 1. 数据存储 2. 变更通知 3. 使用方法 InheritedWidget简单数据驱动模型 基于InheritedWidget,实现简单的数据驱动模型,模型结构如下: 1. 数据存储 使用 InheritedWidget,新建 InheritedProvider import 'package:flutter/material.dart'; class InheritedProvider<T> extends InheritedWidg

  • flutter状态管理Provider的使用学习

    flutter状态管理Provider的使用学习

    目录 1. provider的使用 2. 控制Widget的刷新颗粒度 3. 小结 本文主要介绍flutter中状态管理组件provider,provider: ^6.0.3主要是用于我们系统InheritedWidge的封装,用于数据的传递和管理. 1. provider的使用 网上也有很多关于provider说明,也可以看下官方的provider的 README.这里我记录一下我自己学习.我们对于简单的数据共享可以设置参数,之后子页面进行数据方法回调,从而完成数据间的通信.但是比较麻烦,下面

  • 封装flutter状态管理工具示例详解

    目录 引言 RxBinder 代码实现 Demo 完美运行 引言 关于 Flutter 状态管理,公司项目使用的是Bloc方案.Bloc 其实本质上是 provider 的封装扩展库,整体通过 InheritedWidget .Notifier 外加 Stream中转实现状态变更通知. 关于 Bloc 实现原理,有兴趣的同学可以观看这篇文章 Bloc原理解析 RxBinder 撇开Bloc内部实现策略,小轰尝试基于数据驱动模型,自定义一套状态管理工具.构思如下: 主要成员如下: RxBinder

  • Flutter 包管理器和资源管理使用学习

    目录 什么叫包管理器 Flutter 包管理器 Pub仓库 资源管理 配置图片资源 配置全局字体资源 结束语 什么叫包管理器 包管理器就是用来管理程序运行依赖的一个配置应用.在程序运行中,我们会用到各种各样的第三方程序包,若我们手动管理这些程序,他将变得十分臃肿.这时候便诞生了包管理器,类似于手机中的AppStore.比如说我们手机中的某个程序更新了,我们就可以通过AppStore来更新.同样的我们可以通过包管理来更新我们程序中用到的依赖包. Flutter 包管理器 Flutter包管理器是Y

  • python小白学习包管理器pip安装

    pip对于使用python的朋友并不陌生,当你想安装python模块的时候一定会首先想到它.pip 是一个安装和管理 Python 包的工具 , 是 easy_install 的一个替换品. 今天来说一下,pip的安装方法. 方法一:脚本安装 $ wget https://bootstrap.pypa.io/get-pip.py $ [sudo] python get-pip.py 方法二:源码安装: $ curl -O https://pypi.python.org/packages/sour

  • Node.js安装教程和NPM包管理器使用详解

    Node.js安装教程和NPM包管理器使用详解

    2009年的JSCOnf大会上,一个叫Ryan Dahl的年轻程序员向人们展示了一个他正在做的项目,一个基于Google V8引擎的JavaScript运行平台,它提供了一套事件循环和低IO的应用程序编程接口(API).和其他的服务端平台不同, JavaScript天生就是事件驱动IO,而这个项目又大大降低了编写事件驱动应用程序的复杂度,因此它很快就以不可思议的速度的成长流行起来,并应用到实际项目中.(Jack:这段翻译的不太靠谱,原文:This project was not like oth

  • Node.js包管理器Yarn的入门介绍与安装

    Node.js包管理器Yarn的入门介绍与安装

    前言 这两天大家有没有都被Yarn悄悄刷了屏,最近Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm .为了跟上 Javascript 这股潮 流的脚步,大概的浅尝了一下这个自称是又快又可信赖又安全的包管理,所以写的内容不会很详细,更多的可能只是针对这个全新的包管理与 npm 的不同之处来对比.也可能有些地方写得不对,如果有的话,欢迎指正. 一.安装 首先当然是安装啦.跟 npm 这种被钦点而随 nodejs 一起被安装的包管理器不同, Yarn 需要自行手动安装

  • Node.js基础入门之模块与npm包管理器使用详解

    Node.js基础入门之模块与npm包管理器使用详解

    目录 require函数 模块分类 第三方模块 1. 安装第三方模块 2. 引入第三方模块 3. 示例测试 系统模块 require注意事项 exports导出对象 1. exports示例 2. exports注意事项 module模块对象 package.json包描述文件 1. 什么是package.json ? 2. 如何创建package.json文件? NPM基础 1. 常用npm命令 2. npm 示例 cnpm基础 1. 什么是cnpm ? 2. 使用cnpm 控制台输出 1.

  • 使用pnpm包管理器替代npm及yarn的命令示例

    使用pnpm包管理器替代npm及yarn的命令示例

    目录 前言 为什么会有 pnpm 不止于此 什么是扁平化的 node_modules pnpm 的 node_modules 如何使用 pnpm 安装 直接安装 通过 npm 安装 通过 HomeBrew 安装( 一种 MacOS 包管理器) 升级 使用 配置 命令 和其他包管理器比较 Monorepo 及 工作空间(Workspace) 什么是 Monorepo Workspace workspace: 协议 结语 前言 今天给大家介绍一种新的包管理器:pnpm,pnpm 由 zkochan

  • Mac包管理器Homebrew安装讲解

    Mac包管理器Homebrew安装讲解

    世上无难事,只要找到 Homebrew 的正确安装方式. Homebrew 是什么 Homebrew是 mac的包管理器,仅需执行相应的命令,就能下载安装需要的软件包,可以省掉自己去下载.解压.拖拽(安装)等繁琐的步骤. 比如安装服务器 nginx,打开终端执行以下命令即可安装: brew install nginx Homebrew 官方文档https://brew.sh/ Homebrew 怎么安装 方法一:brew官网的安装脚本 执行命令: /bin/bash -c "$(curl -fs

  • 在linux中使用包管理器安装node.js

    网上文章中,在linux下安装node.js都是使用源码编译,其实node的github上已经提供了各个系统下使用各自的包管理器(package manager)安装node.js的方法. 1. 在Ubuntu中,使用如下命令: 复制代码 代码如下: curl -sL https://deb.nodesource.com/setup | sudo bash - sudo apt-get install -y nodejs 如果需要使用npm安装本地组件,还需要执行如下命令: 复制代码 代码如下:

  • AERGO SHIP：用于开发智能合约的包管理器

    AERGO SHIP：用于开发智能合约的包管理器

    AERGO SHIP:用于开发智能合约的包管理器 用于构建.测试和部署分布式应用程序的客户端框架和开发环境 构建大型分布式应用程序是很困难的,因为对其进行测试,使其实现端到端工作,并进行部署是一个非常耗时的过程.通过AERGO,我们计划让一切变得与众不同. AERGO是一个为在实现基于区块链的系统和应用程序时面临众多独特挑战的企业提供解决方案的平台.为了提高开发.测试和部署智能合约的效率和易用性,我们创建了SHIP.SHIP是Lua智能合约包管理器.它将本地开发环境与Git和分布式分类账连接起来

  • Node.js包管理器npm的具体使用

    Node.js包管理器npm的具体使用

    目录 目的 npm init 与 package.json文件 模块安装与管理 安装模块 查看已安装模块 更新模块 删除模块 npx 模块编译 版本控制 换源 使用 nrm 工具换源 使用 cnpm 代替 npm 总结 目的 目前的Node.js安装包中都带有一个重要的工具 包管理器npm .npm主要有两方面功能:下载管理第三方模块:构建与运行项目.npm使用本身并不复杂,但是在大陆的网络环境下使用并不省心,徒增许多工作量.这篇文章将对相关内容做个说明. npm init 与 package.

随机推荐