Creating the TopSection for Web and Putting the Project in English

felipecastrosales · Feb 12, 2021 · 8c72721 · 8c72721
2 parents 8352254 + ef154dd
commit 8c72721
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 5 deletions.
diff --git a/lib/pages/home/home_page.dart b/lib/pages/home/home_page.dart
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import '../../breakpoints.dart';
 import 'widgets/appbar/mobile_app_bar.dart';
 import 'widgets/appbar/web_app_bar.dart';
+import 'widgets/sections/top_section.dart';
 
 class HomePage extends StatelessWidget {
   @override
@@ -25,7 +26,9 @@ class HomePage extends StatelessWidget {
                 maxWidth: 1200,
               ),
               child: ListView(
-
+                children: [
+                  TopSection(),
+                ],
               ),
             ),
           ),

diff --git a/lib/pages/home/widgets/appbar/web_app_bar.dart b/lib/pages/home/widgets/appbar/web_app_bar.dart
@@ -30,7 +30,7 @@ class WebAppBar extends StatelessWidget {
               textColor: Colors.white,
               borderSide: BorderSide(color: Colors.white, width: 1.5),
               child: Text(
-                '  Fazer login  ',
+                '  Log in  ',
                 style: TextStyle(fontWeight: FontWeight.w600),
               ),
             ),
@@ -43,7 +43,7 @@ class WebAppBar extends StatelessWidget {
               color: Colors.white,
               textColor: Colors.black,
               child: Text(
-                '  Cadastre-se  ',
+                '  Sign up  ',
                 style: TextStyle(fontWeight: FontWeight.w800),
               ),
             ),

diff --git a/lib/pages/home/widgets/appbar/web_app_bar_responsive_content.dart b/lib/pages/home/widgets/appbar/web_app_bar_responsive_content.dart
@@ -28,7 +28,7 @@ class WebAppBarResponsiveContent extends StatelessWidget {
                         child: TextField(
                           decoration: InputDecoration(
                             border: InputBorder.none,
-                            hintText: '  Pesquise um curso aqui  ',
+                            hintText: ' Search for anything... ',
                             isCollapsed: true,
                           ),
                         ),
@@ -42,7 +42,7 @@ class WebAppBarResponsiveContent extends StatelessWidget {
                 FlatButton(
                   onPressed: () {},
                   child: Text(
-                    'Aprender', 
+                    'Learn', 
                     style: TextStyle(
                       fontWeight: FontWeight.w600,
                       color: Colors.grey[100],

diff --git a/lib/pages/home/widgets/sections/custom_search_field.dart b/lib/pages/home/widgets/sections/custom_search_field.dart
@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart'; 
+
+class CustomSearchField extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      cursorColor: Colors.blue,
+      style: TextStyle(color: Colors.grey[50]),
+      decoration: InputDecoration(
+        isDense: true,
+        enabledBorder: OutlineInputBorder(
+          borderSide: BorderSide(color: Colors.grey[50]),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: BorderSide(color: Colors.grey[50]),
+        ),
+        hintStyle: TextStyle(color: Colors.grey[50]),
+        hintText: 'Type some search here',
+        suffixIcon: IconButton(
+          icon: Icon(Icons.search),
+          color: Colors.grey[50],
+          onPressed: (){},
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/home/widgets/sections/top_section.dart b/lib/pages/home/widgets/sections/top_section.dart
@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+
+import 'custom_search_field.dart';
+
+class TopSection extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final maxWidth = constraints.maxWidth;
+        if (maxWidth >= 1100) {
+          return AspectRatio(
+            aspectRatio: 3.2,
+            child: Stack(
+              children: [
+                AspectRatio(
+                  aspectRatio: 3.4,
+                  child: Image.network(
+                    'https://images.pexels.com/photos/892757/pexels-photo-892757.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
+                    fit: BoxFit.cover,
+                  ),
+                ),
+                Positioned(
+                  left: 50,
+                  top: 64,
+                  child: Card(
+                    color: Colors.black,
+                    elevation: 16,
+                    child: Container(
+                      padding: EdgeInsets.all(24),
+                      width: 450,
+                      child: Column(
+                        children: [
+                          Text(
+                            'Learn Flutter with this course',
+                            style: TextStyle(
+                              fontWeight: FontWeight.w800,
+                              fontSize: 32,
+                              color: Colors.grey[50],
+                              letterSpacing: 1.25,
+                              height: 0.85
+                            ),
+                          ),
+                          const SizedBox(height: 16),
+                          Text(
+                            'Let\'s Learn Flutter! ' 
+                            'Create amazing things with a single code',
+                            style: TextStyle(
+                              fontWeight: FontWeight.w800,
+                              fontSize: 16,
+                              color: Colors.grey[100],
+                              letterSpacing: 1.1,
+                            ),
+                          ),
+                          const SizedBox(height: 16),
+                          CustomSearchField(),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          );
+        }
+        return Container();
+      },
+    );
+  }
+}