文章目录

一、加载网络图片

参考 【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | work 构造函数 | Image.asset 构造函数 ) 三、work 构造函数

代码示例 :

// 图片组件 , 从网络中加载一张图片work(// 图片地址"https://img-/032313493741.width: 200,),

效果展示 :

博客中用到的网络图片 :( 图床作用 , 防止图片挂了 )

二、加载静态图片

加载静态图片步骤 :先声明图片 , 再使用图片 ;

① 声明图片资源 :在 pubspec.yaml 中声明图片资源路径 ;

② 访问图片 :在 dart 文件中使用 AssetImage 类访问图片 ;

配置静态图片 :注册层次 , assets 按在 flutter 的二级层次中配置 ;

flutter:uses-material-design: trueassets:- images/sidalin.png- images/sidalin2.png

代码示例 :下面两种方式都可以加载静态图片

Image(width: 200,image: AssetImage("images/sidalin.png"),),Image.asset('images/sidalin2.png',width: 200,),

执行效果 :

三、加载本地图片

安装 path_provider 插件 :

搜索插件 :在 https://pub.dev/packages 中搜索 path_provider 插件 ;插件地址 :https://pub.dev/packages/path_provider配置插件 :在 pubspec.yaml 中配置插件 ;

dependencies:path_provider: ^2.0.1

获取插件 :点击 pubspec.yaml 中右上角的 Pub get 按钮 , 获取插件 ;导入头文件 :

import 'package:path_provider/path_provider.dart';

将图片拷贝到/storage/emulated/0/Android/data/kim.hsl.flutter_image_widget/files路径中 , 这也是调用 path_provider 插件的getExternalStorageDirectory()方法获得的 SD 卡路径 ;

拷贝图片命令 :

adb push sidalin3.png /storage/emulated/0/Android/data/kim.hsl.flutter_image_widget/files

代码示例 :在 initState 方法中调用异步方法获取 SD 卡路径 , 在 build 方法中判定如果 SD 卡路径不为空 , 才显示 Image 组件 ;

/// SD 卡路径String sdPath;@overridevoid initState() {// 获取 SD 卡路径getSdPath();}void getSdPath() async {String path = (await getExternalStorageDirectory()).path;setState(() {sdPath = path;});}/// 从 SD 卡加载图片if(sdPath != null)Image.file(File('$sdPath/sidalin3.png'),width: 200,),

执行效果 :

四、完整代码示例

代码示例 :

import 'package:flutter/material.dart';import 'dart:io';import 'package:path_provider/path_provider.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);}}class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}/// SD 卡路径String sdPath;@overridevoid initState() {// 获取 SD 卡路径getSdPath();}void getSdPath() async {String path = (await getExternalStorageDirectory()).path;setState(() {sdPath = path;});}@overrideWidget build(BuildContext context) {print("sdPath : $sdPath");return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('приветствовать товарища Сталина:',),Text('$_counter',style: Theme.of(context).textTheme.display1,),// 图片组件 , 从网络中加载一张图片work(// 图片地址"https://img-/032313493741.png",width: 200,),Image(width: 200,image: AssetImage("images/sidalin.png"),),Image.asset('images/sidalin2.png',width: 200,),/// 从 SD 卡加载图片if(sdPath != null)Image.file(File('$sdPath/sidalin3.png'),width: 200,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}}

pubspec.yaml 配置文件 :

name: flutter_image_widgetdescription: A new Flutter application.version: 1.0.0+1environment:sdk: ">=2.1.0 <3.0.0"dependencies:flutter:sdk: fluttercupertino_icons: ^0.1.2path_provider: ^2.0.1dev_dependencies:flutter_test:sdk: flutterflutter:uses-material-design: trueassets:- images/sidalin.png- images/sidalin2.png

导入的文件 :

执行效果 :

五、相关资源

参考资料 :

Flutter 官网 :https://flutter.dev/Flutter 插件下载地址 :https://pub.dev/packagesFlutter 开发文档 :/docs( 强烈推荐 )官方 GitHub 地址: /flutterFlutter 中文社区 :/Flutter 实用教程 :/docs/cookbookFlutter CodeLab :https://codelabs.flutter-/Dart 中文文档 :/Dart 开发者官网 :https://api.dart.dev/Flutter 中文网 ( 非官方 , 翻译的很好 ) :https://flutterchina.club/ , /docs/Flutter 相关问题 :https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )GitHub 上的 Flutter 开源示例 :/download/han120/15989510

博客源码下载 :

GitHub 地址 :/han120/flutter_image_widget ( 随博客进度一直更新 , 有可能没有本博客的源码 )

博客源码快照 :/download/han120/16059814 ( 本篇博客的源码快照 , 可以找到本博客的源码 )