如何在flutter中将json中的链接解析为dio

Question

所以我有这个json

{
"video": "https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
"audio": "https://github.com/App2Sales/mobile-challenge/raw/master/os-lusiadas.pdf",
"pdf": "https://github.com/App2Sales/mobile-challenge/raw/master/a-arte-da-guerra.mp3"
}

一个朋友告诉我，我可以使用dio将媒体放入json文件的链接中，我想从链接中获取媒体，这样我就可以使用媒体制作一个gridViewBuider

这是无线电代码：

import 'package:dio/dio.dart';
import 'package:files_manager/models/midia_model.dart';
class ContentProvider {
Future<Media> getContent() async {
try {
var response = await Dio().get('http://www.example.com');
return Media.fromJson(response.data);
//print(response);
} catch (e) {
return Media(Media.EMPTY, Media.EMPTY, Media.EMPTY)
.setError(e.toString());
}
}
}

还有我的型号代码：

import 'package:flutter/material.dart';
class Media {
static const String EMPTY = "";
late String video;
late String audio;
late String pdf;
late Map<String, dynamic> httpError = {"error": false, "errorMessage": ""};
Media(this.video, this.audio, this.pdf);
setError(String message) {
httpError["error"] = true;
httpError["errorMessage"] = message;
}
factory Media.fromJson(Map<String, dynamic> json) {
return Media(json['video'], json['audio'], json['pdf']);
}
String mediaUrl() {
return '{ ${this.video}, ${this.audio}, ${this.pdf} }';
}
}

所以我也有构建gridView的代码，我只使用一些代码来测试布局，但我仍然需要弄清楚如何从链接中获取媒体，将其放入gridView

import 'dart:convert';
import 'package:files_manager/models/midia_model.dart';
import 'package:files_manager/models/test_model.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
class AudioWidget extends StatelessWidget {
AudioWidget({super.key});
final List<TestModel> heros = [
TestModel("assets/a-arte-da-guerra.mp3", "A arte da Guerra"),
];
/*final List<Map> media =
List.generate(1000000, (index) => {"id": index, "name": "Product $index"})
.toList();*/
@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.builder(
padding: const EdgeInsets.all(10.0),
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 180,
childAspectRatio: 1,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
itemCount: heros.length,
itemBuilder: (BuildContext ctx, index) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(15)),
child: Text(
heros[index].title,
style: TextStyle(color: Colors.white, fontSize: 20),
),
);
}),
);
}
}

Answer 1

使用dio从api获取数据并将其转换为媒体对象后，您可以在屏幕中使用此对象：要显示视频文件，您可以使用此软件包VideoPlayer

要显示音频文件，您可以使用此软件包AudioPlayer

要显示Pdf文件，可以使用此包SyncfusionFlutterPdfViewer

如果你想下载这些文件，你可以使用Dio.download((并传递你的url和文件路径(你想下载文件的地方(该路径是您可以再次读取文件以在屏幕中显示它们的路径