Flutter电视频道展示插件tv_channel_widget的使用

ChannelWidget 📺

ChannelWidget 是一个用于显示电视频道及其相应节目的优雅且易于使用的包。受流行的流媒体服务如 Amazon Prime 和 Jio Tv 的启发，此包完全用 Dart 开发，并支持所有平台。凭借其可定制性和布局选项，ChannelWidget 可以让您完全控制应用的外观和感觉。

没有自动检测时间

有自动检测时间

特性 🚀

• 显示电视频道及其相应节目。
• 使用 ChannelBuilder 和 ShowBuilder 回调自定义外观。
• 选项显示时间在小部件上方。
• 选项移动到当前日期和时间。
• 可定制的布局选项，如头部宽度、项目高度、垂直填充和计时器行高度。
• 选项禁用水平滚动。

安装 🔧

在您的 pubspec.yaml 文件中添加 tv_channel_widget 作为依赖项：

dependencies:
  tv_channel_widget: '^0.0.1'

然后在终端中运行 flutter packages get 以便获取该包。

导入 Channel Widget：

import 'package:tv_channel_widget/tv_channel_widget.dart';

使用 🎬

创建包含 TvChannel 类的列表

首先，创建一个 TvChannel 对象及其相应 ShowItem 的列表：

List<TvChannel> showsList = [
  TvChannel(
    channelName: 'Discovery+',
    showItems: [
      ShowItem(
        showName: 'Gold Rush',
        showStartTime: DateTime(2023, 1, 6, 00, 0),
        showEndTime: DateTime(2023, 1, 6, 1, 0)),
      ShowItem(
        showName: 'Food Factory',
        showStartTime: DateTime(2023, 1, 6, 1, 0),
        showEndTime: DateTime(2023, 1, 6, 1, 30)),
      // 其他节目...
    ]
  ),
  // 其他频道...
];

创建 ChannelWidget

然后，使用 ChannelWidget 来显示频道和节目列表：

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

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

class _MyHomePageState extends State<MyHomePage> {
  List<TvChannel> showsList = [];

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

    showsList = [
      // 初始化频道列表...
    ];
    showsList.shuffle(); // 随机打乱列表
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text('Channel Widget'),
          backgroundColor: const Color(0xFFFF4500).withOpacity(0.8)),
      body: ChannelWidget(
        channelShows: showsList,
        moveToCurrentTime: true,
        itemHeight: 80,
        showTime: true,
        verticalPadding: 2,
        channelBuilder: (context, index) {
          final item = showsList[index];
          return Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: const Color(0xFFFF4500).withOpacity(0.8)),
            child: Center(
                child: Text(
              item.channelName,
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.w400),
            )),
          );
        },
        showsBuilder: (context, show) {
          final channel = show;
          return Padding(
            padding: const EdgeInsets.only(left: 5),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: Colors.black12,
              ),
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(channel.showName,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: const TextStyle(
                          fontSize: 20, fontWeight: FontWeight.w500)),
                  Text(
                      "${channel.showStartTime.difference(channel.showEndTime).inMinutes.abs()} Min",
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: const TextStyle(
                          fontSize: 14, fontWeight: FontWeight.w400)),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}