当前位置:网站首页>[shutter] image component (load network pictures | load static pictures | load local pictures | path | provider plug-in)
[shutter] image component (load network pictures | load static pictures | load local pictures | path | provider plug-in)
2022-07-03 00:34:00 【Programmer community】
List of articles
- One 、 Load network pictures
- Two 、 Load static pictures
- 3、 ... and 、 Load local image
- Four 、 Complete code example
- 5、 ... and 、 Related resources
One 、 Load network pictures
Reference resources 【Flutter】Image Components ( Image Component Introduction | Image Constructors | Image.network Constructors | Image.asset Constructors ) 3、 ... and 、Image.network Constructors
Code example :
// Picture components , Load a picture from the network Image.network( // Picture address "https://img-blog.csdnimg.cn/2021032313493741. width: 200,),
Effect display :
Online pictures used in blogs : ( Drawing bed function , Prevent the picture from hanging up )
Two 、 Load static pictures
Steps for loading static pictures : First declare the picture , Then use the picture ;
① Declare image resources : stay pubspec.yaml Declare the image resource path in ;
② Visit pictures : stay dart Use... In the document AssetImage Class to access pictures ;
Configure static pictures : Registration hierarchy , assets Press on flutter Configure... In the secondary level of ;
flutter: uses-material-design: true assets: - images/sidalin.png - images/sidalin2.png
Code example : The following two methods can load static pictures
Image( width: 200, image: AssetImage("images/sidalin.png"),),Image.asset( 'images/sidalin2.png', width: 200,),
Execution effect :
3、 ... and 、 Load local image
install path_provider plug-in unit :
- Search plug-ins : stay https://pub.dev/packages Mid search path_provider plug-in unit ;
- Plug-in address : https://pub.dev/packages/path_provider
- Configuration plug-ins : stay pubspec.yaml Configure plug-ins in ;
dependencies: path_provider: ^2.0.1
- Get plug-ins : Click on pubspec.yaml In the upper right corner of the middle Pub get Button , Get plug-ins ;
- Import header file :
import 'package:path_provider/path_provider.dart';
Copy pictures to /storage/emulated/0/Android/data/kim.hsl.flutter_image_widget/files
In the path , This is also called path_provider The plug-in getExternalStorageDirectory()
Method of obtaining SD Card path ;
Copy picture command :
adb push sidalin3.png /storage/emulated/0/Android/data/kim.hsl.flutter_image_widget/files
Code example : stay initState Method calls asynchronous method to get SD Card path , stay build If in the method SD Card path is not empty , Only show Image Components ;
/// SD Card path String sdPath; @override void initState() {
// obtain SD Card path getSdPath(); } void getSdPath() async {
String path = (await getExternalStorageDirectory()).path; setState(() {
sdPath = path; }); }/// from SD Card loading picture if(sdPath != null) Image.file( File('$sdPath/sidalin3.png'), width: 200, ),
Execution effect :
Four 、 Complete code example
Code example :
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. @override Widget 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 Card path String sdPath; @override void initState() {
// obtain SD Card path getSdPath(); } void getSdPath() async {
String path = (await getExternalStorageDirectory()).path; setState(() {
sdPath = path; }); } @override Widget 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, ), // Picture components , Load a picture from the network Image.network( // Picture address "https://img-blog.csdnimg.cn/2021032313493741.png", width: 200, ), Image( width: 200, image: AssetImage("images/sidalin.png"), ), Image.asset( 'images/sidalin2.png', width: 200,), /// from SD Card loading picture 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 The configuration file :
name: flutter_image_widgetdescription: A new Flutter application.version: 1.0.0+1environment: sdk: ">=2.1.0 <3.0.0"dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 path_provider: ^2.0.1dev_dependencies: flutter_test: sdk: flutterflutter: uses-material-design: true assets: - images/sidalin.png - images/sidalin2.png
Imported files :
Execution effect :
5、 ... and 、 Related resources
Reference material :
- Flutter Official website : https://flutter.dev/
- Flutter Plug in download address : https://pub.dev/packages
- Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
- official GitHub Address : https://github.com/flutter
- Flutter The Chinese community : https://flutter.cn/
- Flutter Practical tutorial : https://flutter.cn/docs/cookbook
- Flutter CodeLab : https://codelabs.flutter-io.cn/
- Dart Chinese document : https://dart.cn/
- Dart Developer website : https://api.dart.dev/
- Flutter Chinese net ( unofficial , The translation is very good ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
- Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )
- GitHub Upper Flutter Open source examples : https://download.csdn.net/download/han1202012/15989510
Blog source download :
GitHub Address : https://github.com/han1202012/flutter_image_widget ( Keep updating with the progress of the blog , There may not be the source code of this blog )
Blog source snapshot : https://download.csdn.net/download/han1202012/16059814 ( The source code snapshot of this blog , You can find the source code of this blog )
边栏推荐
- Feature Engineering: summary of common feature transformation methods
- [pulsar document] concepts and architecture
- Gan model architecture in mm
- Architecture: database architecture design
- Centos7 one click compilation to build MySQL script
- CMake基本使用
- [target detection] r-cnn, fast r-cnn, fast r-cnn learning
- DotNet圈里一个优秀的ORM——FreeSql
- Monitor container runtime tool Falco
- Thinkadmin V6 arbitrary file read vulnerability (cve-2020-25540)
猜你喜欢
TypeError: Cannot read properties of undefined (reading ***)
Luogu_ P2010 [noip2016 popularization group] reply date_ Half enumeration
多进程编程(二):管道
Angled detection frame | calibrated depth feature for target detection (with implementation source code)
Should you study kubernetes?
Bloom filter
Two common methods and steps of character device registration
How do educators find foreign language references?
Detailed explanation of pod life cycle
Linux软件:如何安装Redis服务
随机推荐
哪些软件可以整篇翻译英文论文?
Monitor container runtime tool Falco
Should you study kubernetes?
Blue decides red - burst CS teamserver password
Rust字符串切片、结构体和枚举类
Basic use of shell script
Bypass AV with golang
Is there a specific format for English papers?
Attributeerror: 'tuple' object has no attribute 'layer' problem solving
Thinkadmin V6 arbitrary file read vulnerability (cve-2020-25540)
【Pulsar文档】概念和架构/Concepts and Architecture
国外的论文在那找?
百数不断创新,打造自由的低代码办公工具
NC24840 [USACO 2009 Mar S]Look Up
【雅思阅读】王希伟阅读P1(阅读判断题)
Some introduction and precautions about XML
[shutter] image component (image component introduction | image constructor | image.network constructor | image.asset constructor)
node_modules删不掉
TypeError: Cannot read properties of undefined (reading ***)
大学生课堂作业2000~3000字的小论文,标准格式是什么?