Flutter开发之——基本组件-Image,面试经历分享

  • Image.asset - 用于从资源目录的显示图片

  • Image.network - 用于从网络上显示图片

  • Image.file - 用于从文件里显示图片

  • Image.memory - 用于从内存里(Uint8List)显示图片

三 示例


3.1 Image.asset

设置pubspec.yaml

Flutter开发之——基本组件-Image,面试经历分享

  • 在项目路径下,新建images文件夹,并将图片flutter.png放到images路径下

  • 在pubspec.yaml 文件中添加assets,如上图,注意images的路径(间隔两个字母)

flutter:

assets:

  • images/flutter.png

代码设置(lib/main.dart)

Image.asset(“images/flutter.png”),

3.2 Image.network

Image.network(“https://flutter.dev/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png”),

7)3.3 Image.file

添加path_provider依赖

在pubspec.yaml 文件中添加path_provider依赖

dependencies:

path_provider: ^1.6.26

Flutter开发之——基本组件-Image,面试经历分享

然后,执行Pub get获取path_provider依赖

path_provider说明

对于Android系统

Directory tempDir = await getTemporaryDirectory();

String tempPath = tempDir.path;

Directory appDocDir = await getApplicationDocumentsDirectory();

String appDocPath = appDocDir.path;

String storageDir = (await getExternalStorageDirectory()).path;

加载sd卡图片需要读写权限,在AndroidManifest.xml中添加

打印文件路径

Future main() async {

String appDir = (await getApplicationDocumentsDirectory()).path;

String tempDir = (await getTemporaryDirectory()).path;

String storageDir = (await getExternalStorageDirectory()).path;

print(“appDir==$appDir”);

print(“tempDir==$tempDir”);

print(“storageDir==$storageDir”);

}

输出结果

I/flutter (10148): appDir==/data/user/0/com.example.flutter_image/app_flutter

I/flutter (10148): tempDir==/data/user/0/com.example.flutter_image/cache

I/flutter (10148): storageDir==/storage/emulated/0/Android/data/com.example.flutter_image/files

将要显示的图片导入到手机中

Flutter开发之——基本组件-Image,面试经历分享

完整代码(lib/main.dart)

import ‘dart:convert’;

import ‘dart:io’;

import ‘dart:typed_data’;

import ‘package:flutter/material.dart’;

import ‘package:path_provider/path_provider.dart’;

Future main() async {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@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();

}

File file;

class _MyHomePageState extends State {

int _counter = 0;

String _storageDir = ‘’;

File file;

void _incrementCounter() {

setState(() {

_counter++;

});

}

@override

Widget build(BuildContext context) {

_getLocalFile();

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Image.file(File(_storageDir+"/flutter.png")),

Image.file(File("$_storageDir/flutter.png")),

],

),

),

floatingActionButton: FloatingActionButton(

onPressed: _incrementCounter,

tooltip: ‘Increment’,

child: Icon(Icons.add),

),

);

}

_getLocalFile() async {

String appDir = (await getApplicationDocumentsDirectory()).path;

String tempDir = (await getTemporaryDirectory()).path;

String storageDir = (await getExternalStorageDirectory()).path;

ctionButton: FloatingActionButton(

onPressed: _incrementCounter,

tooltip: ‘Increment’,

child: Icon(Icons.add),

),

);

}

_getLocalFile() async {

String appDir = (await getApplicationDocumentsDirectory()).path;

String tempDir = (await getTemporaryDirectory()).path;

String storageDir = (await getExternalStorageDirectory()).path;

上一篇:linux培训视频,再爆安全漏洞


下一篇:Java生成图片验证码