design updates

ricardocaste · Jan 2, 2020 · 67b3c5f · 67b3c5f
1 parent 2643e9a
commit 67b3c5f
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 12 deletions.
diff --git a/assets/icon/feature_store.jpg b/assets/icon/feature_store.jpg
diff --git a/lib/core/presentation/res/assets.dart b/lib/core/presentation/res/assets.dart
@@ -1,4 +1,5 @@
 const String appLogo = 'assets/icon/icon.png';
+const String appFeatureImage = 'assets/icon/feature_store.jpg';
 const String fishtail =
     'https://firebasestorage.googleapis.com/v0/b/dl-flutter-ui-challenges.appspot.com/o/travel%2Ffishtail.jpg?alt=media';
 const String mountEverest =
@@ -142,4 +143,4 @@ const List<String> introIllus = [
   'https://firebasestorage.googleapis.com/v0/b/dl-flutter-ui-challenges.appspot.com/o/intro%2F1.png?alt=media',
   'https://firebasestorage.googleapis.com/v0/b/dl-flutter-ui-challenges.appspot.com/o/intro%2F2.png?alt=media',
   'https://firebasestorage.googleapis.com/v0/b/dl-flutter-ui-challenges.appspot.com/o/intro%2F3.png?alt=media'
-];
+];
diff --git a/lib/core/presentation/widgets/rounded_bordered_container.dart b/lib/core/presentation/widgets/rounded_bordered_container.dart
@@ -10,13 +10,15 @@ class RoundedContainer extends StatelessWidget {
     this.color = Colors.white,
     this.padding = const EdgeInsets.all(16.0),
     this.margin,
+    this.borderRadius,
   }) : super(key: key);
   final Widget child;
   final double width;
   final double height;
   final Color color;
   final EdgeInsets padding;
   final EdgeInsets margin;
+  final BorderRadius borderRadius;
 
   @override
   Widget build(BuildContext context) {
@@ -27,7 +29,7 @@ class RoundedContainer extends StatelessWidget {
       margin: margin,
       decoration: BoxDecoration(
         color: color,
-        borderRadius: BorderRadius.circular(20.0),
+        borderRadius: borderRadius ?? BorderRadius.circular(20.0),
         border: Border.all(
           color: borderColor,
           width: 0.5,

diff --git a/lib/features/home/presentation/pages/new_home.dart b/lib/features/home/presentation/pages/new_home.dart
@@ -1,9 +1,11 @@
 import 'dart:convert';
-
 import 'package:firebase_remote_config/firebase_remote_config.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_ui_challenges/core/data/models/survey.dart';
+import 'package:flutter_ui_challenges/core/presentation/res/assets.dart';
 import 'package:flutter_ui_challenges/core/presentation/res/functions.dart';
+import 'package:flutter_ui_challenges/core/presentation/res/text_styles.dart';
+import 'package:flutter_ui_challenges/core/presentation/widgets/rounded_bordered_container.dart';
 import 'package:flutter_ui_challenges/core/presentation/widgets/survey_widget.dart';
 import 'package:flutter_ui_challenges/features/announcements/data/model/announcement.dart';
 import 'package:flutter_ui_challenges/features/announcements/widgets/announcement_slider.dart';
@@ -72,11 +74,53 @@ class _NewHomePageState extends State<NewHomePage>
       appBar: customAppBar(context: context),
       body: ListView(
         children: <Widget>[
-          Padding(
-            padding: const EdgeInsets.fromLTRB(16.0,0,16.0,16.0),
-            child: FeaturedCategoryItem(
-              title: "UI Challenges",
-              onPressed: () => Navigator.pushNamed(context, 'challenge_home'),
+          RoundedContainer(
+            borderRadius: BorderRadius.circular(10.0),
+            margin: const EdgeInsets.symmetric(
+              vertical: 8.0,
+              horizontal: 16.0,
+            ),
+            padding: const EdgeInsets.all(0),
+            height: 250,
+            child: InkWell(
+              borderRadius: BorderRadius.circular(10.0),
+              onTap: () => Navigator.pushNamed(context, 'challenge_home'),
+              child: Column(
+                children: <Widget>[
+                  Expanded(
+                    child: ClipRRect(
+                      borderRadius: BorderRadius.only(
+                        topLeft: Radius.circular(10.0),
+                        topRight: Radius.circular(10.0),
+                      ),
+                      child: Image.asset(
+                        appFeatureImage,
+                        fit: BoxFit.cover,
+                      ),
+                    ),
+                  ),
+                  const SizedBox(height: 10.0),
+                  Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: <Widget>[
+                      Text(
+                        "UI Challenges",
+                        style: buttonText.copyWith(
+                          color: Theme.of(context).primaryColor,
+                          fontWeight: FontWeight.bold,
+                          fontSize: 20.0,
+                        ),
+                      ),
+                      const SizedBox(width: 10.0),
+                      Icon(
+                        Icons.arrow_forward,
+                        color: Theme.of(context).primaryColor,
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: 10.0),
+                ],
+              ),
             ),
           ),
           if (announcements.length > 0) ...[
@@ -164,6 +208,7 @@ class CategoryItem extends StatelessWidget {
     );
   }
 }
+
 class FeaturedCategoryItem extends StatelessWidget {
   final TextStyle buttonText = boldText.copyWith(
     fontSize: 16.0,
@@ -186,7 +231,7 @@ class FeaturedCategoryItem extends StatelessWidget {
       highlightColor: Theme.of(context).primaryColor,
       highlightElevation: 0,
       elevation: 0,
-      padding: const EdgeInsets.symmetric(horizontal: 24.0,vertical: 32.0),
+      padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 32.0),
       child: Row(
         children: <Widget>[
           if (icon != null) ...[
@@ -196,9 +241,7 @@ class FeaturedCategoryItem extends StatelessWidget {
           Text(
             title,
             style: buttonText.copyWith(
-              fontSize: 24.0,
-              fontWeight: FontWeight.w300
-            ),
+                fontSize: 24.0, fontWeight: FontWeight.w300),
           ),
           Spacer(),
           Icon(Icons.keyboard_arrow_right),