Чтобы отобразить изображение SVG из сетевого URL-адреса в приложении Flutter, вы можете использовать пакет flutter_svgвместе с пакетом cached_network_image. Вот несколько методов с примерами кода:
Метод 1: использование пакета flutter_svgи виджета Image.network
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class SvgNetworkImageExample extends StatelessWidget {
final String imageUrl = 'https://example.com/image.svg';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SVG Network Image'),
),
body: Center(
child: FutureBuilder(
future: Future.delayed(Duration(seconds: 1)), // Delay for testing purposes
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else {
return Image.network(
imageUrl,
loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
if (loadingProgress == null) {
return child;
}
return CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
: null,
);
},
errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
return Text('Failed to load SVG');
},
);
}
},
),
),
);
}
}
Метод 2: использование пакета cached_network_image
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
class SvgNetworkImageExample extends StatelessWidget {
final String imageUrl = 'https://example.com/image.svg';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SVG Network Image'),
),
body: Center(
child: CachedNetworkImage(
imageUrl: imageUrl,
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Text('Failed to load SVG'),
),
),
);
}
}
В обоих методах вам необходимо заменить 'https://example.com/image.svg'фактическим URL-адресом изображения SVG, которое вы хотите отобразить.