Flutter SVG图片缓存插件cached_svg_image的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter SVG图片缓存插件cached_svg_image的使用

如何使用

CachedNetworkSvgImage 可以直接使用。

带有占位符：

CachedNetworkSvgImage(
    url: "https://upload.wikimedia.org/wikipedia/commons/4/44/Google-flutter-logo.svg",
),

它是如何工作的

缓存网络图片使用了 flutter_cache_manager 来存储和检索文件。

示例代码

以下是使用 cached_svg_image 插件的完整示例代码：

import 'package:cached_svg_image/cached_svg_image.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cached SVG 图片',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '缓存SVG图片页面'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: const Center(
        child: CachedNetworkSvgImage(
          url: "https://upload.wikimedia.org/wikipedia/commons/4/44/Google-flutter-logo.svg", 
          // 加载中的gif动画，可以替换为自己的资源
          loadingGif: '{your loading assets}',
        ),
      ),
    );
  }
}

说明

  1. 导入库：
    import 'package:cached_svg_image/cached_svg_image.dart';
import 'package:flutter/material.dart';

更多关于Flutter SVG图片缓存插件cached_svg_image的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter SVG图片缓存插件cached_svg_image的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用cached_svg_image插件来缓存SVG图片的示例代码。这个插件允许你加载并缓存SVG图像，从而提高应用性能。

首先，你需要在pubspec.yaml文件中添加cached_svg_image依赖：

dependencies:
  flutter:
    sdk: flutter
  cached_svg_image: ^x.x.x  # 请替换为最新版本号

然后运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter项目中使用CachedSvgImage组件。以下是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:cached_svg_image/cached_svg_image.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cached SVG Image Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String svgUrl = 'https://example.com/path/to/your/image.svg'; // 替换为你的SVG图片URL

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cached SVG Image Example'),
      ),
      body: Center(
        child: CachedSvgImage(
          svgUrl,
          width: 200,
          height: 200,
          placeholderBuilder: (BuildContext context) => CircularProgressIndicator(),
          errorWidget: (context, exception, stackTrace) => Icon(Icons.error),
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖添加：

    • 在pubspec.yaml中添加cached_svg_image依赖。

  2. 导入包：

    • 在你的Dart文件中导入cached_svg_image包。

  3. 使用CachedSvgImage组件：

    • CachedSvgImage组件接受SVG图片的URL作为第一个参数。
    • width和height参数设置图片的宽度和高度。
    • placeholderBuilder参数允许你提供一个占位符，在图片加载时显示。这里我们使用了一个CircularProgressIndicator。
    • errorWidget参数允许你提供一个错误小部件，在图片加载失败时显示。这里我们使用了一个Icon小部件显示错误图标。

这个示例展示了如何使用cached_svg_image插件来加载和缓存SVG图片，并处理加载状态和错误情况。根据实际需求，你可以进一步自定义这些参数和组件。

回到顶部