Flutter魔法卡牌游戏插件magic_the_gathering_flutter的使用

通过开发自定义的MTG Flutter小部件，可以轻松地创建《魔法风云会》(MTG)应用。该插件完全支持MTG的法术力和其他符号。

示例

以下展示了如何使用MTG Flutter小部件：

还支持“Un”系列的卡片：

功能

• 表示一张MTG卡片的模型
• 支持双面卡
• 使用支持的 fromMap 构造函数将JSON转换为模型实例
• 所有MTG符号的SVG，并提供了方便的方法来显示它们
• 最小的外部依赖项 - 只使用了 <a href="https://pub.dev/packages/flutter_svg">flutter_svg</a> 和 <a href="https://pub.dev/packages/equatable">equatable</a>
• 支持Android、iOS、Linux、MacOS、Web和Windows平台

入门指南

你需要自己提供MTG卡片的数据。可以考虑使用 <a href="https://scryfall.com/docs/api" rel="ugc">Scryfall API</a> 下载或请求数据（此包完全与之兼容）！

然后使用模型的 fromMap 构造函数实例化一个 MTGCard 对象。

final blackLotus = MTGCard.fromMap({
    "keywords": [],
    "lang": "en",
    "rarity": "bonus",
    "released_at": "2014-06-16",
    "reserved": true,
    "set": "vma",
    "set_name": "Vintage Masters",
    "artist": "Chris Rahn",
    "image_uris": {
    "art_crop":
        "https://cards.scryfall.io/art_crop/front/b/d/bd8fa327-dd41-4737-8f19-2cf5eb1f7cdd.jpg?1614638838",
    },
    "mana_cost": "{0}",
    "cmc": 0.0,
    "name": "Black Lotus",
    "oracle_text":
        "{T}, Sacrifice Black Lotus: Add three mana of any one color.",
    "type_line": "Artifact",
});

目前不支持 MTGCard 模型的默认构造函数。推荐的做法是存储或请求MTG卡片数据作为JSON并将其解析为Dart Map 对象。

API

MTGCard

方法

属性

MTGSymbol

方法

属性

示例

下面展示了如何显示一个简单的部件。该示例假定你已经有一个名为 blackLotus 的 MTGCard 实例。

final cardImage = blackLotus.images?['art_crop'];
final child = Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
    Row(
        children: [
        Text(blackLotus.name),
        const Spacer(),
        ...?blackLotus.preparedManaCost(),
        ],
    ),
    const SizedBox(height: 8.0),
    if (cardImage != null) Image.network(cardImage),
    const SizedBox(height: 8.0),
    Text(blackLotus.typeLine),
    Text.rich(blackLotus.preparedOracleText() ??
        TextSpan(text: blackLotus.oracleText)),
    ],
);
return Scaffold(
    appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: Text('Magic: the Gathering Flutter App'),
    ),
    body: SafeArea(
    child: Center(child: child),
    ),
);

为了更详细的示例，请查看 <a href="https://github.com/zmuranaka/magic_the_gathering_flutter/tree/main/example" rel="ugc">example</a> 目录下的代码。

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用 magic_the_gathering_flutter 插件。

import 'dart:convert';

import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:magic_the_gathering_flutter/models/mtg_card.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Magic: the Gathering Flutter App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  final _cards = <MTGCard>[];

  [@override](/user/override)
  void initState() {
    super.initState();
    _loadMagicCards();
  }

  Future<void> _loadMagicCards() async {
    final jsonString = await rootBundle.loadString('assets/cards.json');
    if (!mounted) return;
    final json = jsonDecode(jsonString);
    if (json is! List) {
      throw ArgumentError.value(json, 'json', 'Expected type List');
    }
    for (final card in json) {
      _cards.add(MTGCard.fromMap(card));
    }
    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text('Magic: the Gathering Flutter App'),
      ),
      body: SafeArea(
        child: Center(
          child: _cards.isEmpty
              ? const CircularProgressIndicator()
              : ListView.separated(
                  padding: EdgeInsets.symmetric(horizontal: 16.0),
                  itemCount: _cards.length,
                  itemBuilder: (context, index) => MTGCardTile(
                    card: _cards[index],
                  ),
                  separatorBuilder: (context, index) => Divider(thickness: 2.0),
                ),
        ),
      ),
    );
  }
}

class MTGCardTile extends StatelessWidget {
  const MTGCardTile({super.key, required this.card});

  final MTGCard card;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final cardImage = card.images?['art_crop'];
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Text(card.name),
            const Spacer(),
            ...?card.preparedManaCost(),
          ],
        ),
        const SizedBox(height: 8.0),
        if (cardImage != null) Image.network(cardImage),
        const SizedBox(height: 8.0),
        Text(card.typeLine),
        Text.rich(card.preparedOracleText() ?? TextSpan(text: card.oracleText)),
      ],
    );
  }
}