Complete UI Layout

firebase.json

@@ -1,6 +1,6 @@
 {
   "hosting": {
-    "public": "build",
+    "public": "build/web",
     "ignore": [
       "firebase.json",
       "**/.*",
@@ -13,4 +13,4 @@
       }
     ]
   }
-}
+}

lib/home.dart

@@ -0,0 +1,31 @@
+import "package:flutter/material.dart";
+import 'package:tiktok_clone/widgets/actions_toolbar.dart';
+import 'package:tiktok_clone/widgets/bottom_toolbar.dart';
+import 'package:tiktok_clone/widgets/video_description.dart';
+
+class MyHomePage extends StatelessWidget {
+  const MyHomePage({super.key});
+
+  Widget get topSection => Container(height: 100, color: Colors.yellow[300]);
+
+  Widget get middleSection => Expanded(
+        child: Row(
+          mainAxisSize: MainAxisSize.max,
+          crossAxisAlignment: CrossAxisAlignment.end,
+          children: [VideoDescription(), ActionToolbar()],
+        ),
+      );
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Column(
+        children: [
+          topSection,
+          middleSection,
+          BottomToolbar(),
+        ],
+      ),
+    );
+  }
+}

lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:tiktok_clone/home.dart';
 
 void main() {
   runApp(const MyApp());
@@ -19,38 +20,3 @@ class MyApp extends StatelessWidget {
     );
   }
 }
-
-class MyHomePage extends StatelessWidget {
-  const MyHomePage({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      body: Column(
-        children: [
-          Container(
-            height: 100,
-            padding: const EdgeInsets.only(bottom: 15.0),
-            color: Colors.yellow[300],
-          ),
-          Expanded(
-            child: Row(
-              mainAxisSize: MainAxisSize.max,
-              crossAxisAlignment: CrossAxisAlignment.end,
-              children: [
-                Expanded(
-                  child: Container(color: Colors.green[300]),
-                ),
-                Container(
-                  color: Colors.red[300],
-                  width: 100.0,
-                )
-              ],
-            ),
-          ),
-          Container(height: 80.0, color: Colors.blue[300]),
-        ],
-      ),
-    );
-  }
-}

lib/widgets/actions_toolbar.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/src/widgets/container.dart';
+import 'package:flutter/src/widgets/framework.dart';
+
+class ActionToolbar extends StatelessWidget {
+  const ActionToolbar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.red[300],
+      width: 100.0,
+      child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: List.generate(
+              5,
+              (_) => Container(
+                    width: 60,
+                    height: 60,
+                    color: Colors.blue[300],
+                    margin: EdgeInsets.only(top: 20),
+                  ))),
+    );
+  }
+}

lib/widgets/bottom_toolbar.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+
+class BottomToolbar extends StatelessWidget {
+  const BottomToolbar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      children: List.generate(
+          5,
+          (_) => Container(
+                width: 40,
+                height: 40,
+                color: Colors.purple[300],
+              )),
+    );
+  }
+}

lib/widgets/video_description.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/src/widgets/container.dart';
+import 'package:flutter/src/widgets/framework.dart';
+
+class VideoDescription extends StatelessWidget {
+  const VideoDescription({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Container(
+            height: 10.0,
+            color: Colors.green[300],
+            margin: EdgeInsets.only(top: 30),
+          ),
+          Container(
+            height: 10.0,
+            color: Colors.green[300],
+            margin: EdgeInsets.only(top: 30),
+          ),
+          Container(
+            height: 10.0,
+            color: Colors.green[300],
+            margin: EdgeInsets.only(top: 30),
+          ),
+        ],
+      ),
+    );
+  }
+}