construct header section in detail view

client/ios/Podfile.lock

@@ -30,4 +30,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: aafe91acc616949ddb318b77800a7f51bffa2a4c
 
-COCOAPODS: 1.10.1
+COCOAPODS: 1.10.0

client/lib/screens/detail_screen.dart

@@ -1,7 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:pr12er/protos/pkg/pr12er/messages.pb.dart';
-import 'package:youtube_player_flutter/youtube_player_flutter.dart';
+import 'package:pr12er/widgets/detail/header.dart';
 import 'package:pr12er/utils/extractor.dart';
+import 'package:pr12er/widgets/detail/youtube.dart';
 
 class DetailScreenArguments {
   final Video video;
@@ -12,59 +13,51 @@ class DetailScreenArguments {
 class DetailScreen extends StatelessWidget {
   static const String routeName = "detail_app";
 
+  Widget getHorizontalLine() {
+    return const Divider(
+      height: 5,
+      color: Colors.black,
+      indent: 5,
+      endIndent: 5,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     final args =
         // ignore: cast_nullable_to_non_nullable
         ModalRoute.of(context)!.settings.arguments as DetailScreenArguments;
 
     return Scaffold(
-        appBar: AppBar(
-          leading: IconButton(
-            icon: const Icon(Icons.arrow_back),
-            onPressed: () {
-              Navigator.pop(context);
-            },
-          ),
-          title: Text(args.video.title,
-              key: const ValueKey("$routeName/appBar/title")),
+      appBar: AppBar(
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back),
+          onPressed: () {
+            Navigator.pop(context);
+          },
         ),
-        body: Detail(youtubeId: extractYoutubeId(args.video.link)));
-  }
-}
-
-class Detail extends StatefulWidget {
-  final String youtubeId;
-
-  const Detail({required this.youtubeId});
-
-  @override
-  _DetailState createState() => _DetailState();
-}
-
-class _DetailState extends State<Detail> {
-  late final YoutubePlayerController _controller;
-
-  @override
-  void initState() {
-    super.initState();
-
-    _controller = YoutubePlayerController(
-      initialVideoId: widget.youtubeId,
-    );
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return YoutubePlayerBuilder(
-      player: YoutubePlayer(
-        controller: _controller,
+        title: Text(args.video.title,
+            key: const ValueKey("$routeName/appBar/title")),
+      ),
+      body: CustomScrollView(
+        slivers: [
+          SliverList(
+              delegate: SliverChildListDelegate([
+            YoutubeWidget(youtubeId: extractYoutubeId(args.video.link)),
+            Container(
+              margin: const EdgeInsets.only(top: 5, left: 10, right: 10),
+              child: Column(
+                children: [
+                  HeaderWidget(video: args.video),
+                  const SizedBox(height: 10),
+                  getHorizontalLine(),
+                  const SizedBox(height: 10),
+                ],
+              ),
+            )
+          ]))
+        ],
       ),
-      builder: (context, player) {
-        return Column(
-          children: [player],
-        );
-      },
     );
   }
 }

client/lib/widgets/detail/abstract.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class AbstractWidget extends StatelessWidget {
+  const AbstractWidget({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container();
+  }
+}

client/lib/widgets/detail/header.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:pr12er/protos/pkg/pr12er/messages.pb.dart';
+
+// ignore: must_be_immutable
+class HeaderWidget extends StatelessWidget {
+  // this is a placeholder
+  // didILIkedIt should be replaced in the next future PR
+  // after defining user related information
+  bool didILikedIt = false;
+
+  late Video video;
+
+  HeaderWidget({Key? key, required this.video}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.only(top: 10),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          ...getPresenterWidgets(),
+          const SizedBox(width: 25),
+          ...getViewNumbersWidgets(),
+          const SizedBox(width: 25),
+          ...getDateWidgets(),
+        ],
+      ),
+    );
+  }
+
+  Widget getLikeIcon() {
+    if (didILikedIt) {
+      return const Icon(Icons.thumb_up_alt);
+    }
+    return const Icon(Icons.thumb_up_alt_outlined);
+  }
+
+  List<Widget> getViewNumbersWidgets() {
+    return [
+      const SizedBox(width: 8),
+      const Icon(Icons.remove_red_eye),
+      const SizedBox(width: 8),
+      Text(video.numberOfViews.toString(),
+          style: const TextStyle(fontSize: 18)),
+      const SizedBox(width: 15),
+      getLikeIcon(),
+      const SizedBox(width: 8),
+      Text(video.numberOfLike.toString(), style: const TextStyle(fontSize: 18)),
+    ];
+  }
+
+  List<Widget> getPresenterWidgets() {
+    return [
+      Text(video.presenter,
+          style: const TextStyle(
+              color: Colors.black54, fontSize: 18, fontStyle: FontStyle.italic))
+    ];
+  }
+
+  List<Widget> getDateWidgets() {
+    return [
+      const Icon(Icons.today),
+      const SizedBox(width: 8),
+      Text(video.publishedDate, style: const TextStyle(fontSize: 18))
+    ];
+  }
+}

client/lib/widgets/detail/recommendataion.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class RecommentationWidget extends StatelessWidget {
+  const RecommentationWidget({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container();
+  }
+}

client/lib/widgets/detail/repository.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class RepositoryWidget extends StatelessWidget {
+  const RepositoryWidget({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container();
+  }
+}

client/lib/widgets/detail/youtube.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:youtube_player_flutter/youtube_player_flutter.dart';
+
+class YoutubeWidget extends StatefulWidget {
+  final String youtubeId;
+
+  const YoutubeWidget({Key? key, required this.youtubeId}) : super(key: key);
+
+  @override
+  _DetailState createState() => _DetailState();
+}
+
+class _DetailState extends State<YoutubeWidget> {
+  late final YoutubePlayerController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = YoutubePlayerController(
+      initialVideoId: widget.youtubeId,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return YoutubePlayerBuilder(
+      player: YoutubePlayer(
+        controller: _controller,
+      ),
+      builder: (context, player) {
+        return Column(
+          children: [player],
+        );
+      },
+    );
+  }
+}