Add channel card widget

lib/models/channel.dart

@@ -20,8 +20,22 @@ class Channel {
   final List<String> tagIds;
   final bool isMature;
 
-  const Channel(this.id, this.userId, this.userLogin, this.userName, this.gameId, this.gameName, this.type, this.title, this.viewerCount, this.startedAt,
-      this.language, this.thumbnailUrl, this.tagIds, this.isMature);
+  const Channel({
+    required this.id,
+    required this.userId,
+    required this.userLogin,
+    required this.userName,
+    required this.gameId,
+    required this.gameName,
+    required this.type,
+    required this.title,
+    required this.viewerCount,
+    required this.startedAt,
+    required this.language,
+    required this.thumbnailUrl,
+    required this.tagIds,
+    required this.isMature,
+  });
 
   factory Channel.fromJson(Map<String, dynamic> json) => _$ChannelFromJson(json);
 }

lib/models/channel.g.dart

@@ -8,19 +8,19 @@ part of 'channel.dart';
 
 Channel _$ChannelFromJson(Map<String, dynamic> json) {
   return Channel(
-    json['id'] as String,
-    json['user_id'] as String,
-    json['user_login'] as String,
-    json['user_name'] as String,
-    json['game_id'] as String,
-    json['game_name'] as String,
-    json['type'] as String,
-    json['title'] as String,
-    json['viewer_count'] as int,
-    json['started_at'] as String,
-    json['language'] as String,
-    json['thumbnail_url'] as String,
-    (json['tag_ids'] as List<dynamic>).map((e) => e as String).toList(),
-    json['is_mature'] as bool,
+    id: json['id'] as String,
+    userId: json['user_id'] as String,
+    userLogin: json['user_login'] as String,
+    userName: json['user_name'] as String,
+    gameId: json['game_id'] as String,
+    gameName: json['game_name'] as String,
+    type: json['type'] as String,
+    title: json['title'] as String,
+    viewerCount: json['viewer_count'] as int,
+    startedAt: json['started_at'] as String,
+    language: json['language'] as String,
+    thumbnailUrl: json['thumbnail_url'] as String,
+    tagIds: (json['tag_ids'] as List<dynamic>).map((e) => e as String).toList(),
+    isMature: json['is_mature'] as bool,
   );
 }

lib/widgets/channel_card.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:frosty/models/channel.dart';
+
+/// A card widget that displays a live channel's thumbnail and details.
+class ChannelCard extends StatelessWidget {
+  final Channel channelInfo;
+
+  const ChannelCard({Key? key, required this.channelInfo}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Card(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Flexible(
+              child: Padding(
+                padding: EdgeInsets.all(10.0),
+                child: Image.network(
+                  channelInfo.thumbnailUrl.replaceFirst('-{width}x{height}', '-1024x576'),
+                ),
+              ),
+            ),
+            Flexible(
+              child: Padding(
+                padding: EdgeInsets.all(5.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Text(
+                      channelInfo.userName,
+                      style: const TextStyle(fontSize: 16),
+                    ),
+                    const SizedBox(height: 5),
+                    SingleChildScrollView(
+                      scrollDirection: Axis.horizontal,
+                      child: Text(channelInfo.title),
+                    ),
+                    const SizedBox(height: 5),
+                    Text(
+                      channelInfo.gameName,
+                      style: const TextStyle(fontSize: 12),
+                    ),
+                    const SizedBox(height: 5),
+                    Text(
+                      '${channelInfo.viewerCount} viewers',
+                      style: const TextStyle(fontSize: 12),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}