Flutter自定义渲染插件render_pro的使用

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

Flutter自定义渲染插件render_pro的使用

About

render_pro 是一个Dart包，用于在后台渲染图片。现在无需在网络图片上显示加载器或Shimmer效果。Render Pro 为您的网络图片提供了平滑的体验。

Render Pro Demo

Features

  • Image Type: 支持所有类型的图片。

Render_Pro Example

创建网络URL列表

首先，创建一个包含网络图片URL的列表：

List<String> imageUrls = [
  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrX7nxND2CUn9u_vklCWYEzIzbuNHzQfLmIw&s',
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmCy16nhIbV3pI1qLYHMJKwbH2458oiC9EmA&s",
  "https://fps.cdnpk.net/images/home/subhome-ai.webp?w=649&h=649",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZz_aEaEAX0yAzanEe_wfwTHlzCnad7IkNKzHs4NS-NIZ66QfCRVILJRZvhgfMEP_txgU&usqp=CAU",
  "https://i0.wp.com/picjumbo.com/wp-content/uploads/beautiful-fall-waterfall-free-image.jpeg?w=600&quality=80",
  "https://thumbs.dreamstime.com/b/incredibly-beautiful-sunset-sun-lake-sunrise-landscape-panorama-nature-sky-amazing-colorful-clouds-fantasy-design-115177001.jpg",
  'https://images.samsung.com/levant/smartphones/galaxy-s24-ultra/images/galaxy-s24-ultra-highlights-color-carousel-global-mo.jpg?imbypass=true',
  'https://img.freepik.com/premium-photo/aesthetic-sky-background_636537-267412.jpg',
];

在后台开始加载图片

调用以下方法在需要显示图片的屏幕之前预加载图片：

RenderPro.init(imageUrls);

在视图中显示图片

使用 RenderProImage 小部件来显示预加载的网络图片，确保URL与预加载时使用的URL相同：

RenderProImage(
  width: double.infinity,
  url: placeholderImageUrls[index],
  fit: BoxFit.cover,
  filterQuality: FilterQuality.high,
  placeholder: CircularProgressIndicator(),
),

示例代码

以下是一个完整的示例代码，展示了如何使用 render_pro 插件：

// ignore_for_file: library_private_types_in_public_api

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

void main() async {
  // 确保绑定在预加载图片之前初始化
  WidgetsFlutterBinding.ensureInitialized();

  // 运行应用
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'RenderPro Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<String> imageUrls = Global().imageUrls;

  @override
  void initState() {
    super.initState();
    List<String> initialImageUrls = imageUrls;
    RenderPro.init(initialImageUrls);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('RenderPro Example'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16.0),
        children: [
          const Text(
            'Loading images for next screen:',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 16),
          const SizedBox(height: 16),
          ElevatedButton(
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => const NextScreen(),
                    ));
              },
              child: const Text("HomeScreen"))
        ],
      ),
    );
  }
}

class Global {
  List<String> imageUrls = [
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrX7nxND2CUn9u_vklCWYEzIzbuNHzQfLmIw&s',
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmCy16nhIbV3pI1qLYHMJKwbH2458oiC9EmA&s",
    "https://fps.cdnpk.net/images/home/subhome-ai.webp?w=649&h=649",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZz_aEaEAX0yAzanEe_wfwTHlzCnad7IkNKzHs4NS-NIZ66QfCRVILJRZvhgfMEP_txgU&usqp=CAU",
    "https://i0.wp.com/picjumbo.com/wp-content/uploads/beautiful-fall-waterfall-free-image.jpeg?w=600&quality=80",
    "https://thumbs.dreamstime.com/b/incredibly-beautiful-sunset-sun-lake-sunrise-landscape-panorama-nature-sky-amazing-colorful-clouds-fantasy-design-115177001.jpg",
    'https://images.samsung.com/levant/smartphones/galaxy-s24-ultra/images/galaxy-s24-ultra-highlights-color-carousel-global-mo.jpg?imbypass=true',
    'https://img.freepik.com/premium-photo/aesthetic-sky-background_636537-267412.jpg',
  ];
}

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

  @override
  Widget build(BuildContext context) {
    // 占位符图片URL（已在主页面预加载）
    final placeholderImageUrls = Global().imageUrls;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Loaded Network Images'),
      ),
      body: ListView.builder(
        itemCount: placeholderImageUrls.length,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: SizedBox(
              height: 200,
              width: double.infinity,
              child: RenderProImage(
                width: double.infinity,
                url: placeholderImageUrls[index],
                fit: BoxFit.cover,
                filterQuality: FilterQuality.high,
                placeholder: const CircularProgressIndicator(),
              ),
            ),
          );
        },
      ),
    );
  }
}

Contributors

  • Rana Sharjeel Ali Flutter Developer

Learn More

Learn More Learn More


更多关于Flutter自定义渲染插件render_pro的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter自定义渲染插件render_pro的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用自定义渲染插件 render_pro 的示例代码。请注意，render_pro 是一个假想的插件名称，用于演示目的。实际使用中，你需要根据具体插件的文档进行调整。

首先，假设我们有一个自定义渲染插件 render_pro，它允许我们在Flutter中执行一些高级的渲染操作。我们需要以下步骤来使用它：

  1. 添加插件依赖：

    在 pubspec.yaml 文件中添加插件依赖（这步假设插件已经发布到 pub.dev）：

    dependencies:
  flutter:
    sdk: flutter
  render_pro: ^1.0.0  # 假设版本号是 1.0.0

  2. 导入插件：

    在你需要使用 render_pro 的 Dart 文件中导入插件：

    import 'package:render_pro/render_pro.dart';

  3. 使用插件：

    假设 render_pro 插件提供了一个 CustomRenderWidget，用于在Flutter中进行自定义渲染。以下是一个简单的使用示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Custom Render Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Render Demo'),
      ),
      body: Center(
        child: CustomRenderWidget(
          // 假设 CustomRenderWidget 需要一个配置对象
          configuration: CustomRenderConfiguration(
            // 配置对象的属性，根据插件的API进行设置
            color: Colors.red,
            shape: CustomRenderShape.circle,
            size: Size(100, 100),
          ),
        ),
      ),
    );
  }
}

// 假设插件定义了一个配置类 CustomRenderConfiguration
class CustomRenderConfiguration {
  final Color color;
  final CustomRenderShape shape;
  final Size size;

  CustomRenderConfiguration({
    required this.color,
    required this.shape,
    required this.size,
  });
}

// 假设插件定义了一个枚举 CustomRenderShape
enum CustomRenderShape {
  circle,
  square,
  rectangle,
}

在这个示例中，我们：

  1. 在 pubspec.yaml 中添加了 render_pro 插件的依赖。
  2. 在 Dart 文件中导入了 render_pro 插件。
  3. 创建了一个简单的 Flutter 应用，并在应用中使用了一个假设的 CustomRenderWidget，并传递了一个配置对象 CustomRenderConfiguration。

请注意，CustomRenderWidget、CustomRenderConfiguration 和 CustomRenderShape 是假设的类和枚举，你需要根据实际的 render_pro 插件文档进行调整。

由于 render_pro 是一个假想的插件名称，如果你在使用一个真实的插件，请务必参考该插件的官方文档和示例代码。

回到顶部