文章目錄

• 一、加載網絡圖片
• 二、加載靜態圖片
• 三、加載本地圖片
• 四、完整代碼示例
• 五、相關資源

一、加載網絡圖片

---

參考 【Flutter】Image 組件 ( Image 組件簡介 | Image 構造函數 | Image.network 構造函數 | Image.asset 構造函數 ) 三、Image.network 構造函數

代碼示例 :

// 圖片組件 , 從網絡中加載一張圖片 Image.network(// 圖片地址"https://img-blog.csdnimg.cn/2021032313493741.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,),// 圖片組件 , 從網絡中加載一張圖片Image.network(// 圖片地址"https://img-blog.csdnimg.cn/2021032313493741.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_widget description: 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/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_image_widget ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/16059814 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。