Flutter非同质化代币渲染插件nft_rendering的使用

简介

nft_rendering 是一个支持多种类型的非同质化代币（NFT）渲染的 Flutter 插件。它能够处理静态图像、动画图像、矢量图形、视频、HTML 页面以及 PDF 文件。

功能特性

• 支持静态图像。
• 支持动画图像。
• 支持矢量图像（如 SVG）。
• 支持视频文件。
• 支持 HTML 页面。
• 支持 PDF 文件。

使用指南

1. 添加依赖

在 pubspec.yaml 文件中添加 nft_rendering 依赖：

dependencies:
  nft_rendering: ^1.0.0

然后运行以下命令以更新依赖项：

flutter pub get

2. 示例代码

以下是一个完整的示例代码，展示如何使用 nft_rendering 插件来渲染不同类型的 NFT。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这是应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo NFT Display'),
    );
  }
}

// 支持的 MIME 类型
List<String> _typeValues = [
  "image",
  "svg",
  "video",
  "application/pdf",
  "webview"
];

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _inputPreviewUrl = ""; // 输入的 URL
  String _mimeType = ""; // MIME 类型

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 输入框和下拉菜单
          SizedBox(
            height: 170,
            child: InputProperty(callbackAction: _callbackFromInputProperty),
          ),
          // 如果有输入的 URL 和 MIME 类型，则渲染 NFT
          _inputPreviewUrl.isNotEmpty && _mimeType.isNotEmpty
              ? Expanded(
                  child: Center(
                    child: NFTRenderingCombineWidget(
                      mimeType: _mimeType,
                      previewURL: _inputPreviewUrl,
                    ),
                  ),
                )
              : const SizedBox(),
        ],
      ),
    );
  }

  // 更新输入的 URL 和 MIME 类型
  void _callbackFromInputProperty(String mimeType, String previewUrl) {
    setState(() {
      _inputPreviewUrl = previewUrl;
      _mimeType = mimeType;
    });
  }
}

// 输入框和按钮组件
class InputProperty extends StatefulWidget {
  const InputProperty({Key? key, required this.callbackAction})
      : super(key: key);

  final Function callbackAction;

  [@override](/user/override)
  State<StatefulWidget> createState() {
    return _StateInputProperty();
  }
}

class _StateInputProperty extends State<InputProperty> {
  String _dropdownValue = _typeValues.first;
  final TextEditingController textEdittingController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        _inputPreviewUrl(),
        _dropdownListMimeType(),
        _renderButton(),
      ],
    );
  }

  // 输入框用于输入 URL
  Widget _inputPreviewUrl() {
    return Padding(
      padding: const EdgeInsets.only(left: 8, right: 8, top: 8),
      child: TextFormField(
        controller: textEdittingController,
        decoration: const InputDecoration(
          contentPadding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
          border: UnderlineInputBorder(),
          labelText: "Enter your url",
        ),
        onChanged: (value) {},
      ),
    );
  }

  // 下拉菜单选择 MIME 类型
  Widget _dropdownListMimeType() {
    return Padding(
      padding: const EdgeInsets.only(left: 8, right: 8),
      child: DropdownButton<String>(
        isExpanded: true,
        value: _dropdownValue,
        icon: const Icon(
          Icons.arrow_downward,
          size: 18,
          color: Colors.blueAccent,
        ),
        elevation: 16,
        style: const TextStyle(color: Colors.blueAccent, fontSize: 16),
        underline: Container(
          height: 2,
          color: Colors.blueAccent,
        ),
        onChanged: (String? newValue) {
          setState(() {
            _dropdownValue = newValue!;
          });
        },
        items: _typeValues.map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
      ),
    );
  }

  // 渲染按钮
  Widget _renderButton() {
    return TextButton(
      style: TextButton.styleFrom(
        minimumSize: const Size(100, 50),
        backgroundColor: Colors.blueAccent,
        padding: const EdgeInsets.all(0),
      ),
      onPressed: () {
        String url = textEdittingController.text;
        if (url.isNotEmpty) {
          widget.callbackAction(_dropdownValue, url);
        }
      },
      child: const Text(
        "Render NFT",
        style: TextStyle(color: Colors.white),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    textEdittingController.dispose();
    super.dispose();
  }
}