Creating the Responsive CourseSection

felipecastrosales · Feb 14, 2021 · a377cb9 · a377cb9
2 parents 417bc97 + b585e41
commit a377cb9
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 24 deletions.
diff --git a/lib/breakpoints.dart b/lib/breakpoints.dart
@@ -1 +1,2 @@
 const mobileBreakpoint = 650;
+const tabletBreakpoint = 1000;
diff --git a/lib/pages/home/home_page.dart b/lib/pages/home/home_page.dart
@@ -4,6 +4,7 @@ import '../../breakpoints.dart';
 import 'widgets/appbar/mobile_app_bar.dart';
 import 'widgets/appbar/web_app_bar.dart';
 import 'widgets/sections/advantages_section.dart';
+import 'widgets/sections/course_section.dart';
 import 'widgets/sections/top_section.dart';
 
 class HomePage extends StatelessWidget {
@@ -30,6 +31,7 @@ class HomePage extends StatelessWidget {
                 children: [
                   TopSection(),
                   AdvantagesSection(),
+                  CourseSection(),
                 ],
               ),
             ),

diff --git a/lib/pages/home/widgets/sections/course_section.dart b/lib/pages/home/widgets/sections/course_section.dart
@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+import '../../../../breakpoints.dart';
+
+class CourseSection extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (_, constraints) {
+        return GridView.builder(
+          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+            maxCrossAxisExtent: 300,
+            crossAxisSpacing: 16,
+            mainAxisSpacing: 16,
+          ),
+          padding: EdgeInsets.symmetric(
+            vertical: 16, 
+            horizontal: constraints.maxWidth >= tabletBreakpoint ? 0 : 16
+          ),
+          physics: NeverScrollableScrollPhysics(),
+          itemCount: 20,
+          shrinkWrap: true,
+          itemBuilder: (context, index) {
+            return Container(color: Colors.red);
+          },
+        );
+      },
+    );
+  }
+}
diff --git a/lib/pages/home/widgets/sections/top_section.dart b/lib/pages/home/widgets/sections/top_section.dart
@@ -9,28 +9,28 @@ class TopSection extends StatelessWidget {
     return LayoutBuilder(
       builder: (context, constraints) {
         final maxWidth = constraints.maxWidth;
-        if (maxWidth >= 1000) {
+        if (maxWidth >= tabletBreakpoint) {
           return AspectRatio(
-            aspectRatio: 3.2,
+            aspectRatio: 7 / 2,
             child: Stack(
               children: [
                 AspectRatio(
                   aspectRatio: 7 / 2,
                   child: TopSectionImage(),
                 ),
                 Positioned(
-                  top: 64,
+                  top: 56,
                   left: 50,
                   child: Card(
-                    color: Colors.black,
+                    color: Colors.black87,
                     elevation: 16,
                     child: Container(
                       padding: EdgeInsets.all(24),
                       width: 450,
                       child: Column(
                         children: [
                           Text(
-                            'Learn Flutter with this course',
+                            'Let\'s learn Flutter with these courses',
                             style: TextStyle(
                               fontWeight: FontWeight.w800,
                               fontSize: 32,
@@ -41,8 +41,8 @@ class TopSection extends StatelessWidget {
                           ),
                           const SizedBox(height: 16),
                           Text(
-                            'Let\'s Learn Flutter! '
-                            'Create amazing things with a single code.',
+                            'The Flutter is amazing! '
+                            'Create amazing things with the Flutter Framework.',
                             style: TextStyle(
                               fontWeight: FontWeight.w800,
                               fontSize: 16,
@@ -63,38 +63,38 @@ class TopSection extends StatelessWidget {
         }
         if (maxWidth >= mobileBreakpoint) {
           return SizedBox(
-            height: 320,
+            height: 300,
             child: Stack(
               children: [
                 SizedBox(
-                  height: 250,
+                  height: 300,
                   width: double.infinity,
                   child: TopSectionImage(),
                 ),
                 Positioned(
-                  top: 42,
-                  left: 36,
+                  top: 32,
+                  left: 32,
                   child: Card(
-                    color: Colors.black,
+                    color: Colors.black87,
                     elevation: 16,
                     child: Container(
                       padding: EdgeInsets.all(20),
                       width: 360,
                       child: Column(
                         children: [
                           Text(
-                            'Learn Flutter with this course',
+                            'Let\'s learn Flutter with these courses',
                             style: TextStyle(
-                                fontWeight: FontWeight.w800,
-                                fontSize: 28,
-                                color: Colors.grey[50],
-                                letterSpacing: 1.2,
-                                height: 0.9),
+                              fontWeight: FontWeight.w800,
+                              fontSize: 28,
+                              color: Colors.grey[50],
+                              letterSpacing: 1.2,
+                            ),
                           ),
                           const SizedBox(height: 12),
                           Text(
-                            'Let\'s Learn Flutter! '
-                            'Create amazing things with a single code.',
+                            'The Flutter is amazing! '
+                            'Create amazing things with the Flutter Framework.',
                             style: TextStyle(
                               fontWeight: FontWeight.w700,
                               fontSize: 16,
@@ -123,20 +123,19 @@ class TopSection extends StatelessWidget {
               child: Column(
                 children: [
                   Text(
-                    'Learn Flutter with this course',
+                    'Let\'s learn Flutter with these courses',
                     textAlign: TextAlign.center,
                     style: TextStyle(
                       fontWeight: FontWeight.w800,
                       fontSize: 28,
                       color: Colors.grey[50],
                       letterSpacing: 1.2,
-                      height: 0.95
                     ),
                   ),
                   const SizedBox(height: 8),
                   Text(
-                    'Let\'s Learn Flutter! '
-                    'Create amazing things with a single code.',
+                    'The Flutter is amazing! '
+                    'Create amazing things with the Flutter Framework.',
                     textAlign: TextAlign.center,
                     style: TextStyle(
                       fontWeight: FontWeight.w700,
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		const mobileBreakpoint = 650;
		const tabletBreakpoint = 1000;