fix: responsive FittedBox as text grows too big

- Remove FittedBox when the screen width is >= 600px because the text become too
big.

Author: kkweon

client/lib/screens/detail_screen.dart

@@ -50,7 +50,7 @@ class DetailScreen extends StatelessWidget {
               padding: const EdgeInsets.all(10).copyWith(bottom: 0),
               child: ListView(
                 children: [
-                  FittedBox(child: HeaderWidget(video: args.video)),
+                  HeaderWidget(video: args.video),
                   const SizedBox(height: 15),
                   FutureBuilder<Detail>(
                     future:

client/lib/widgets/detail/header.dart

@@ -1,3 +1,4 @@
+import 'package:fixnum/fixnum.dart';
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 import 'package:pr12er/protos/pkg/pr12er/messages.pb.dart';
@@ -9,52 +10,88 @@ class HeaderWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      margin: const EdgeInsets.only(top: 10),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          ...getPresenterWidgets(context),
-          const SizedBox(width: 25),
-          ...getViewNumbersWidgets(),
-          const SizedBox(width: 25),
-          ...getDateWidgets(),
-        ],
-      ),
+    if (MediaQuery.of(context).size.width > 600) {
+      return _HeaderInternal(video: video);
+    }
+    return FittedBox(
+      child: _HeaderInternal(video: video),
     );
   }
+}
+
+class _HeaderInternal extends StatelessWidget {
+  const _HeaderInternal({
+    Key? key,
+    required this.video,
+  }) : super(key: key);
+
+  final Video video;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Text(video.presenter, style: Theme.of(context).textTheme.subtitle1),
+
+        const SizedBox(width: 25),
+
+        // Views and likes icons
+        _ViewsAndLikes(
+          numberOfViews: video.numberOfViews,
+          numberOfLike: video.numberOfLike,
+        ),
+
+        const SizedBox(width: 25),
+
+        // Date Widgets
+        _Dates(date: video.publishedDate.toDateTime()),
+      ],
+    );
+  }
+}
+
+class _Dates extends StatelessWidget {
+  final DateTime date;
 
-  Widget getLikeIcon() {
-    return const Icon(Icons.thumb_up_alt_outlined);
+  const _Dates({Key? key, required this.date}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        const Icon(Icons.today),
+        const SizedBox(width: 8),
+        Text(DateFormat.yMd().format(date),
+            style: const TextStyle(fontSize: 18))
+      ],
+    );
   }
+}
+
+class _ViewsAndLikes extends StatelessWidget {
+  final Int64 numberOfViews;
+  final Int64 numberOfLike;
 
-  List<Widget> getViewNumbersWidgets() {
-    return [
+  const _ViewsAndLikes({
+    Key? key,
+    required this.numberOfViews,
+    required this.numberOfLike,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(children: [
       const SizedBox(width: 8),
       const Icon(Icons.remove_red_eye),
       const SizedBox(width: 8),
-      Text(NumberFormat.compact().format(video.numberOfViews),
+      Text(NumberFormat.compact().format(numberOfViews),
           style: const TextStyle(fontSize: 18)),
       const SizedBox(width: 15),
-      getLikeIcon(),
-      const SizedBox(width: 8),
-      Text(NumberFormat.compact().format(video.numberOfLike),
-          style: const TextStyle(fontSize: 18)),
-    ];
-  }
-
-  List<Widget> getPresenterWidgets(BuildContext context) {
-    return [
-      Text(video.presenter, style: Theme.of(context).textTheme.subtitle1)
-    ];
-  }
-
-  List<Widget> getDateWidgets() {
-    return [
-      const Icon(Icons.today),
+      const Icon(Icons.thumb_up_alt_outlined),
       const SizedBox(width: 8),
-      Text(DateFormat.yMd().format(video.publishedDate.toDateTime()),
+      Text(NumberFormat.compact().format(numberOfLike),
           style: const TextStyle(fontSize: 18))
-    ];
+    ]);
   }
 }