Flutter 圖片的使用
效果圖
1.本地asset中讀取
從本地中獲取
a.開啟pubspec.yaml設定(這裡格式很重要!)
flutter:
assets:
- images/timg.jpeg
b.根目錄新建 images 資料夾
c.程式碼
new Image.asset(本地靜態資源的地址)
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyImg(),
);
}
}
class MyImg extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title:'圖片如何放入',
home: new Scaffold(
body: new Center(
child: new Image.asset('images/timg.jpeg'),
),
)
);
}
}
2.從網路獲取
new Images.network(網路資源https/http)
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyImg(),
);
}
}
class MyImg extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title:'圖片如何放入',
home: new Scaffold(
body: new Center(
child: new Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533368711441&di=9517daea3b4fc02d74b27a1f0e2d11f8&imgtype=0&src=http%3A%2F%2Fimage13-c.poco.cn%2Fmypoco%2Fmyphoto%2F20121102%2F22%2F66582707201211022200252633924731300_000_640.jpg'),
),
)
);
}
}
3.從快取中讀取(待更新)
送人玫瑰,手留餘香。
相關文章
- Flutter 生成圖片Flutter
- Flutter 圖片載入Flutter
- Flutter 圖片全家桶Flutter
- Flutter載入圖片與GlideFlutterIDE
- Flutter: 完成一個圖片APPFlutterAPP
- Flutter 圖片庫重磅開源!Flutter
- Flutter 圖片選擇器 SelectPhotoWidgetFlutter
- flutter圖片元件原始碼解析Flutter元件原始碼
- Flutter 圖片加濾鏡效果Flutter
- 淺談Flutter web 圖片選擇器及圖片壓縮FlutterWeb
- flutter 圖片檢視,仿微信Flutter
- Flutter圖片解析度適配Flutter
- Flutter基礎(九)資源和圖片Flutter
- Flutter 基礎(九)資源和圖片Flutter
- Flutter 圖片庫高燃新登場Flutter
- Flutter 上傳圖片到阿里雲OSSFlutter阿里
- Flutter圖片載入優化深入探索Flutter優化
- Flutter 自定義列表以及本地圖片引用Flutter地圖
- Flutter基礎-021-ClipOval圖片裁剪Flutter
- Flutter 圖表繪製解密(charts_flutter 的使用)Flutter解密
- JavaScript WebGL 使用圖片JavaScriptWeb
- 圖解Flutter——BLoC的原理及使用圖解FlutterBloC
- Flutter 基礎控制元件篇-->圖片(Image)、圖示(Icon)Flutter控制元件
- 閒魚"同款"的Flutter圖片下載功能(demo版)Flutter
- 使用 Alfred 在 markdown 中優雅的使用圖片Alfred
- flutter佈局-8-animated_icons動畫圖片Flutter動畫
- Flutter 圖片裁剪旋轉翻轉編輯器Flutter
- Flutter學習筆記(10)--容器元件、圖片元件Flutter筆記元件
- Flutter-靜態資源和專案圖片的處理Flutter
- 用flutter給圖片加個好看的遮罩層【flutter20個例項之六】Flutter遮罩
- Flutter實現Luban圖片壓縮庫演算法Flutter演算法
- Laravel 使用 FastDFS 上傳圖片LaravelAST
- JavaScript WebGL 使用圖片疑惑點JavaScriptWeb
- 如何在Django中使用圖片Django
- 如何使用 resnet 生成圖片向量?
- LVGL 中圖片使用問題
- Flutter實戰: 如何同時設定Container的圖片和顏色FlutterAI
- flutter實現可縮放可拖拽雙擊放大的圖片功能Flutter