专栏首页贾鹏辉的技术专栏@CrazyCodeBoy带你快速掌握Flutter图片开发核心技能

带你快速掌握Flutter图片开发核心技能

在这篇文章中,将带着大家一起学习在Flutter中图片开发以及应用场景中的必备技能以及一些经验技巧

  • 本文学习过程中遇到无法解决的问题可以在课程问答区进行提问,课程老师会对你进行辅导和帮助;
  • 欢迎加入课程官方群:795410523 和讲师以及其他师兄弟们一起学习交流;

目录

  • 什么是Image widget
  • 如何加载网络图片?
  • 如何加载静态图片?
  • 如何加载本地图片?
  • 如何设置Placeholder?
  • 如何配置图片缓存?
  • 如何加载Icon

什么是Image widget?

Flutter中一个用来展示图片的widget。

Image支持如下几种类型的构造函数:

在加载项目中的图片资源时,为了让Image能够根据像素密度自动适配不同分辨率的图片,请使用AssetImage指定图像,并确保在widget树中的“Image” widget上方存在MaterialAppWidgetsAppMediaQuery窗口widget。

Image支持的图片格式

Image 支持以下类型的图片:JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, 和 WBMP。

如何加载网络图片?

要加载网络图片,我们需要使用Image.network构造方法:

Image.network(
  'https://www.devio.org/img/avatar.png',
)

demo:

...
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter bottomNavigationBar',
      theme: new ThemeData.fallback(),
      home: Image.network(
        'https://www.devio.org/img/avatar.png',
      ),
    );
  }
}

点我查看全部完整代码

如何加载静态图片,以及处理不同分辨率的图片?

要加载项目中的静态图片,需要一些两步:

我们在《快速上手Flutter开发》《项目结构、资源、依赖和本地化》一节中详细讲解过如何归档图片资源以及处理不同分辨率的图片,在这里就不重复了。

pubspec.yaml声明图片路径:

assets:
 - images/my_icon.png

使用AssetImage访问图片图片:

Image(
  height: 26,
  width: 26,
  image: AssetImage(my_icon.png),
),

除了我们使用Image的构造方法手动指定AssetImage之外,还可通过Image.asset来加载静态图片:

Image.asset(my_icon.png,
	width: 26,
	height: 26,
)

两者是等效的。

/sdcard/Download/Stack.png

如何加载本地图片?

加载完整路径的本地图片

import 'dart:io';
Image.file(File('/sdcard/Download/Stack.png')),

加载相对路径的本地图片

第一步:

pubspec.yaml中添加path_provider插件;

第二步:导入头文件

import 'dart:io';
import 'package:path_provider/path_provider.dart';

//Image.file(File('/sdcard/Download/Stack.png')),
FutureBuilder(future: _getLocalFile("Download/Stack.png"),
  builder:  (BuildContext context, AsyncSnapshot<File> snapshot) {
    return snapshot.data != null ? Image.file(snapshot.data) : Container();
  })
)
//获取SDCard的路径:
 Future<File> _getLocalFile(String filename) async {
    String dir = (await getExternalStorageDirectory()).path;
    File f = new File('$dir/$filename');
    return f;
  }

点我查看全部完整代码

如何设置Placeholder?

为了设置Placeholder我们需要借助FadeInImage,它能够从内存,本地资源中加载placeholder。

从内存中加载Placeholder

第一步:

安装transparent_image插件。

第二步:

...
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Stack(
          children: <Widget>[
            Center(child: CircularProgressIndicator()),
            Center(
              child: FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: 'https://www.devio.org/img/avatar.png',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

点我查看全部完整代码

从本地资源中加载Placeholder

第一步

配置本地资源图片:

 flutter:
   assets:
+    - assets/loading.gif

第二步

加载本地资源图片作为Placeholder

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: 'https://www.devio.org/img/avatar.png',
);

点我查看全部完整代码

如何配置图片缓存?

在Flutter中我们可以借助cached_network_image插件,来从网络上加载图片,并且将其缓存到本地,以供下次使用。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Cached Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: CachedNetworkImage(
            placeholder: (context, url) => new CircularProgressIndicator(),
            imageUrl:
                'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

关于创建图片控件开发详解的更多实战技巧与最佳实践可学习《基于Flutter1.x开发携程网App》

如何加载Icon?

在Flutter中我们可以借助Icon来加载icon:

const Icon(this.icon//IconDate, {
   Key key,
   this.size,//大小
   this.color,//颜色
   this.semanticLabel,//标志位
   this.textDirection,//绘制方向,一般使用不到
 })

点我查看全部完整代码

从Icon的构造方法可以很清楚的看出Icon构造方法需要一个默认的类型为IconData类型的参数,我们可以构造一个自己的IconData,也可以使用Flutter提供的material_fonts

使用Icons

通过如下代码我们可以使用Flutter内置的material_fonts

...
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Icons"),
      ),
      body: new Center(
        child: new Icon(Icons.android,size: 100.0),
      ),
        );
  }
}

点我查看全部完整代码

使用自定义的Icon

使用自定义的我们需要构造一个:

const IconData(
  this.codePoint,//必填参数,fonticon对应的16进制Unicode {
  this.fontFamily,//字体库系列
  this.fontPackage,//字体在那个包中,不填仅在自己程序包中查找
  this.matchTextDirection: false,图标是否按照图标绘制方向显示
});

首先我我们需要向使用字体一样,在pubspec.yaml中配置我们的icon:

fonts:
	- family: devio
	  fonts:
	    - asset: fonts/devio.ttf

接下来就可以使用了:

child: new Icon(new IconData(0xf5566,fontFamily: "devio"),size: 100.0,color: Colors.blueAccent,)

参考资料

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 带你轻松掌握Flutter 动画开发核心技能

    在这篇文章中,将向大家分享Flutter动画开发的一些核心技能,以及一些技巧和经验。

    CrazyCodeBoy
  • Flutter成就你的产品梦——就缺一个idea了

    在互联网时代,人们将信息与服务搬到了网络上,后来进入了移动互联网时代,人们又将互联网搬进了你我的生活中。智能手机是移动互联网的载体,如今,我们一刻也离不开智能手...

    arcticfox
  • Flutter Dojo的设计之道

    认识Flutter是在18年,移动端开发日趋成熟的情况下,很多开发者都在寻求跨平台开发的终极法门,在经过了webview、RN的痛苦之后,Flutter的出现,...

    用户1907613
  • 十年磨一剑:面试官角度聊聊现下安卓大环境,“野生”程序员现阶段面试问题&学习误区

    接下来都是面试过程中普遍问到的基础知识(面试收集主要来自于bilibili,嵩恒,蚂蚁金服等互联网公司)。

    Android技术干货分享
  • 安卓井喷期已过,无数次面试坑下的回忆历历在目,深陷泥潭的开发者如何通过技能自保?

    身边做 Android 开发的同学并不多,写出来估计也没多少人看,权当是对自己这一个半月来十多轮面试的简单总结吧。互联网公司大部分公司都简单面了一下,感觉各个公...

    Android技术干货分享
  • flutter技术落地使用

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界,Flutter...

    Weaster
  • 跨平台技术演进及Flutter未来

    移动互联网发展十余年,伴随着 Android、iOS 等智能手机的不断普及,移动端已逐步取代 PC 端,成为兵家必争之地。正所谓“得移动端者得天下”,移动端已成...

    程序亦非猿
  • 7年iOS架构师教你如何快速提高并掌握 iOS开发核心技能

    首先你要花点时间针对objective-c语言的学习;毕竟这个是iOS开发的基础(你也可以尝试用Swift,但此项目只是针对OC),编程套路其实都是差不多,多写...

    原来是泽镜啊
  • Flutter-从入门到项目 06: 微信项目搭建

    前面几篇都是关于环境配置和基础语法学习. 在我个人认为学习一门新的语言(快速高效学习) 一定是通过实践,最好的就是带着项目实操,如果你能够仿写下一个项目那么基本...

    CC老师
  • 安卓:如何跟大厂面试官周旋下拔得头筹?大厂面试攻略配上这个职业规划方案是真的香!

    马上就又要到金三银四求职的黄金期了,很多资深面试官都说其实他们每天都要面试考核很多应聘者,但是通过的人却寥寥无几。他们有几个面试观点可能比较重要,对你的面试和职...

    Android技术干货分享
  • 还未成为优秀的安卓工程师,是差在时代还是败在机遇?看了这份进阶指南后,我茅塞顿开

    移动研发火热不停,越来越多人开始学习Android开发。但很多人感觉入门容易成长很难,对未来比较迷茫,不知道自己技能该怎么提升,到达下一阶段需要补充哪些内容。市...

    Android技术干货分享
  • 文末福利-如何构建核心竞争力? | 25位技术大咖的通关秘籍在此

    ? 核心竞争力的概念首次出现是在1990年,将其定义为“是在组织内部经过整合了的技术、知识和技能,尤其是关于怎样协调多种生产机能和整合不同技术和技能”。概括地...

    腾讯大讲堂
  • Android面试指南:在市场初级开发饱和环境下,如何登上BAT这座山成为巅峰者年薪50W+?

    在我刚加入现在这个团队时,那会儿才毕业大半年,我就在思考这个问题,只不过当时更专注于Android开发领域:Android开发的核心竞争力是什么?我有一个专门的...

    Android技术干货分享
  • React Native、Flutter等,这些跨端方案怎么选?

    为了一份代码能够运行在多个平台,从而节省开发和沟通成本,各公司都开始关注和使用跨端方案。目前,主流的跨端方案主要分为两种:

    拉维
  • 8分钟教你快速掌握Python爬虫核心技术,批量爬取网络图片

    本文主要实现一个简单的爬虫,目的是从一个百度贴吧页面下载图片。下载图片的步骤如下:

    python学习教程
  • 初学者如何快速上手Flutter开发?

    其中Widget、状态机制、调试技巧以及深入原理在课程后面会有相应的章节进行讲解,在这里以我们主要聚焦在走进和认识它、掌握它的语言以及合理利用工具这些环节上。

    CrazyCodeBoy
  • Flutter基础篇(8)-- Flutter for Web详细介绍

    Flutter for Web官方的Github库地址:https://github.com/flutter/flutter_web ,此存储库包含面向Web ...

    AWeiLoveAndroid
  • 2020 腾讯Techo Park - Flutter与大前端的革命

    大家好我是 《Flutter开发实战详解》 的作者郭树煜,很高兴今天有机会在这里和大家分享关于 Flutter 和大前端的话题,今天我主要就从 Flutter ...

    GSYTech
  • 程序猿Skr ----- Flutter之歌

    版权声明:本文为博主原创文章,本文首发在公众号 Flutter那些事,版权归作者 AWeiLoveAndroid 所有,未经博主允许不得转载。https://w...

    AWeiLoveAndroid

扫码关注云+社区

领取腾讯云代金券