flutter填坑之旅(配置本地资源文件)

一、添加单个资源文件

项目下创建一个assets目录,在该目录下存放对应的资源文件(json、image、…)

pubspec.yaml文件中配置资源文件路径(注意缩进要与上下文一直)


  assets:
    - assets/home.json
    

二、添加多个资源文件

pubspec.yaml文件中配置资源文件路径


  assets:
    - assets/home.json
    - assets/avatar.jpg
    

或者直接将assets目录下所有文件添加


  assets:
    - assets/

三、 json读取


  static Future<String> fetch() async{

	  rootBundle.loadString('assets/home.json').then((response){
	      var result = json.decode(response);
	      return result;
	    });

  }

这种方式发现页面无法获得数据

在这里插入图片描述
调试发现数据已经取到,但是在这个异步过程中页面渲染已经结束

修改方法(使用await)


  static Future<String> fetch() async{
  
    final response = await rootBundle.loadString('assets/home.json');
    var result = json.decode(response);
    
    return result;

//  rootBundle.loadString('assets/home.json').then((response){
//      var result = json.decode(response);
//      return result;
//    });

 }
 

页面数据获取成功

四、image 读取


    body: Center(
      // Center is a layout widget. It takes a single child and positions it
      // in the middle of the parent.
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
        Image(
          width: 100,
          height: 100,
          image: AssetImage("assets/avatar.jpg"),
        )
        ],
      ),
    ),
      

这个相同简单,直接使用AssetImage接口获取就行

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在Flutter中上传本地文件,您需要使用Flutter中提供的dart:io库。首先,使用FilePicker库选择要上传的文件。然后,使用http包中的MultipartRequest,将文件作为多部分请求附加到请求体中。最后,使用http包中的HttpClient将请求发送到服务器。以下是一个示例代码: ```dart import 'dart:io'; import 'package:http/http.dart' as http; import 'package:flutter/material.dart'; import 'package:file_picker/file_picker.dart'; class FileUpload extends StatefulWidget { @override _FileUploadState createState() => _FileUploadState(); } class _FileUploadState extends State<FileUpload> { File file; void _openFileExplorer() async { file = await FilePicker.getFile(type: FileType.any); setState(() {}); } Future _uploadFile() async { var request = http.MultipartRequest( 'POST', Uri.parse('your-upload-api-url-here'), ); request.files.add(await http.MultipartFile.fromPath('file', file.path)); request.headers.addAll({'Authorization': 'Bearer your_access_token_here'}); var response = await request.send(); if (response.statusCode == 200) { // handle success } else { // handle error } } @override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ FlatButton( onPressed: _openFileExplorer, child: Text('Select File'), ), file != null ? Text(file.path) : Container(), RaisedButton( onPressed: _uploadFile, child: Text('Upload File'), ), ], ); } } ``` 您需要将“your-upload-api-url-here”替换为您的上传API的实际URL,“Bearer your_access_token_here”替换为您的实际访问令牌。此外,您需要在pubspec.yaml文件中添加依赖项file_picker和http。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奔跑的痕迹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值