5_3

movie_browser_tutorial/lib/main.dart

@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import 'presentation/screens/home_screen.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override 
+  Widget build(BuildContext context) {
+    return GetMaterialApp(
+      debugShowCheckedModeBanner: false,
+      home: HomeScreen(),
+    );
+  }
+}

movie_browser_tutorial/lib/presentation/misc/bg_gradient.dart

@@ -0,0 +1,14 @@
+import 'package:flutter/material.dart';
+import 'package:movie_browser_tutorial/presentation/misc/my_colors.dart';
+
+BoxDecoration bg_gradient = BoxDecoration(
+  gradient: LinearGradient(
+    begin: Alignment.topCenter,
+    end: Alignment.bottomCenter,
+    colors: [
+      myColors[PALE_PRIMARY_BG],
+      Colors.white,
+      Colors.white,
+    ]
+  ),
+);

movie_browser_tutorial/lib/presentation/misc/my_colors.dart

@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+
+const String PRIMARY = 'Primary';
+const String PALE_PRIMARY_BG = 'PalePrimaryBg';
+
+const Map<String, Color> myColors = {
+  PRIMARY: Color.fromRGBO(62, 77, 196, 1),
+  PALE_PRIMARY_BG: Color.fromRGBO(204, 208, 239, 1),
+};

movie_browser_tutorial/lib/presentation/screens/home_screen.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+
+import '../misc/bg_gradient.dart';
+import '../misc/my_colors.dart';
+
+class HomeScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Container(
+        height: double.infinity,
+        width: double.infinity,
+        decoration: bg_gradient,
+        child: Column(
+          children: [
+            Expanded(
+              flex: 2,
+              child: Container(
+                alignment: Alignment.bottomCenter,
+                child: Text(
+                  "Ovid's Movie\nBrowser",
+                  style: TextStyle(
+                    fontSize: 32,
+                    fontWeight: FontWeight.bold,
+                  ),
+                  textAlign: TextAlign.center,
+                ),
+              ),
+            ),
+            Container(
+              height: 200,
+              width: MediaQuery.of(context).size.width * .85,
+              alignment: Alignment.center,
+              child: TextFormField(
+                decoration: InputDecoration(
+                  prefixIcon: const Icon(
+                    Icons.search,
+                    size: 20,
+                  ),
+                  isDense: true,
+                  contentPadding: const EdgeInsets.symmetric(
+                    horizontal: 20,
+                    vertical: 20,
+                  ),
+                  border: OutlineInputBorder(
+                    borderRadius: BorderRadius.circular(30),
+                  ),
+                ),
+                style: TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+            Expanded(
+              flex: 3,
+              child: Container(
+                alignment: Alignment.topCenter,
+                child: Container(
+                  width: 140,
+                  height: 50,
+                  child: FlatButton(
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(25),
+                    ),
+                    onPressed: () => print('Navigating to search results'),
+                    color: myColors[PRIMARY],
+                    child: Text(
+                      'Search',
+                      style: TextStyle(
+                        color: Colors.white,
+                        fontSize: 16,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}