Flutter赛事锦标赛对阵图插件flutter_tournament_bracket的使用

🎬 Demo

🌟 Features

• 自定义比赛卡片：您可以根据需要定制每场比赛的信息展示。
• 支持缩放和平移：为了更好地查看详细信息，提供了缩放和平移功能。
• 自定义颜色和尺寸：调整线条、卡片的颜色及大小以匹配您的应用风格。

🚀 Getting Started

首先，在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_tournament_bracket: ^latest_version # 请替换为最新版本号

然后在Dart代码中导入包：

import 'package:flutter_tournament_bracket/flutter_tournament_bracket.dart';

🛠️ Usage

使用TournamentBracket小部件来显示您的锦标赛：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TournamentBracket(
          list: [
            Tournament(matches: [
              TournamentMatch(id: "1", teamA: "Real Madrid", teamB: "Barcelona", scoreTeamA: "3", scoreTeamB: "1"),
              // 更多比赛...
            ]),
            // 更多轮次...
          ],
          card: (item) => customMatchCard(item),
          itemsMarginVertical: 20.0,
          cardWidth: 220.0,
          cardHeight: 100,
          lineWidth: 80,
          lineThickness: 5,
          lineBorderRadius: 12,
          lineColor: Colors.green,
        ),
      ),
    );
  }
}

完整示例

这里是一个完整的例子，展示了如何将所有部分组合在一起：

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

// 定义锦标赛数据
final List<Tournament> _tournaments = [
  Tournament(matches: [
    TournamentMatch(id: "1", teamA: "Real Madrid", teamB: "Barcelona", scoreTeamA: "3", scoreTeamB: "1"),
    // 其他比赛...
  ]),
  // 更多轮次...
];

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

/// 主应用程序组件
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tournament Bracket',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Tournament Bracket')),
        body: Center(
          child: TournamentBracket(
            list: _tournaments,
            card: (item) => customMatchCard(item),
            itemsMarginVertical: 20.0,
            cardWidth: 220.0,
            cardHeight: 100,
            lineWidth: 80,
            lineThickness: 5,
            lineBorderRadius: 12,
            lineColor: Colors.green,
          ),
        ),
      ),
    );
  }

  /// 自定义比赛详情卡片
  Container customMatchCard(TournamentMatch item) {
    return Container(
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(12),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                  item.teamA ?? "No Info",
                  style: const TextStyle(fontSize: 16, color: Colors.white),
                ),
                const SizedBox(height: 8),
                Text(
                  item.teamB ?? "No Info",
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                  style: const TextStyle(fontSize: 16, color: Colors.white),
                )
              ],
            ),
          ),
          const VerticalDivider(color: Colors.white),
          const SizedBox(width: 5),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                item.scoreTeamA ?? "",
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
                style: const TextStyle(fontSize: 16, color: Colors.white),
              ),
              const SizedBox(height: 8),
              Text(
                item.scoreTeamB ?? "",
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
                style: const TextStyle(fontSize: 16, color: Colors.white, fontWeight: FontWeight.w600),
              )
            ],
          ),
          const SizedBox(width: 5)
        ],
      ),
    );
  }
}

🐞 遇到问题？

如果您遇到任何问题或认为该库缺少某些特性，请在GitHub Issues上提交反馈，作者会尽快处理。

📃 License

本项目采用MIT许可证，详情参见LICENSE。