Merge pull request #25 from 90lucasgabriel/25-components

25 - Extras
90lucasgabriel · May 2, 2021 · 3d0994f · 3d0994f
2 parents e7b3a79 + bb3ef67
commit 3d0994f
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 5 deletions.
diff --git a/ios/Podfile b/ios/Podfile
@@ -1,5 +1,5 @@
 # Uncomment this line to define a global platform for your project
-# platform :ios, '9.0'
+platform :ios, '10.0'
 
 # CocoaPods analytics sends network stats synchronously affecting flutter build latency.
 ENV['COCOAPODS_DISABLE_STATS'] = 'true'

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -412,6 +412,6 @@ SPEC CHECKSUMS:
   share_plus: 1210d16d59b24d9fe73c2cbec481758952348b81
   url_launcher: 6fef411d543ceb26efce54b05a0a40bfd74cbbef
 
-PODFILE CHECKSUM: aafe91acc616949ddb318b77800a7f51bffa2a4c
+PODFILE CHECKSUM: fe0e1ee7f3d1f7d00b11b474b62dd62134535aea
 
 COCOAPODS: 1.10.1
diff --git a/lib/home/home_page.dart b/lib/home/home_page.dart
@@ -8,6 +8,7 @@ import 'package:quiz/challenge/challenge_page.dart';
 
 import 'package:quiz/home/widgets/appbar/appbar_widget.dart';
 import 'package:quiz/home/widgets/level_button/level_button_widget.dart';
+import 'package:quiz/home/widgets/quiz_card/quiz_card_skeleton_widget.dart';
 import 'package:quiz/home/widgets/quiz_card/quiz_card_widget.dart';
 import 'package:quiz/shared/models/question_model.dart';
 
@@ -67,6 +68,7 @@ class _HomePageState extends State<HomePage> {
                               LevelButtonWidget(label: 'Perito'),
                             ],
                           ),
+                          SizedBox(height: 16),
                           Expanded(
                             child: StreamBuilder<QuerySnapshot>(
                               stream: FirebaseFirestore.instance
@@ -84,6 +86,7 @@ class _HomePageState extends State<HomePage> {
                                         snapshot.data?.docs.toList() ?? [];
 
                                     return GridView.builder(
+                                      padding: EdgeInsets.only(bottom: 16),
                                       itemCount: documentList.length,
                                       gridDelegate:
                                           SliverGridDelegateWithFixedCrossAxisCount(
@@ -101,7 +104,7 @@ class _HomePageState extends State<HomePage> {
                                             switch (snapshot.connectionState) {
                                               case ConnectionState.none:
                                               case ConnectionState.waiting:
-                                                return Container();
+                                                return QuizCardSkeletonWidget();
                                               default:
                                                 var currentData = snapshot.data
                                                     as DocumentSnapshot;

diff --git a/lib/home/widgets/appbar/appbar_widget.dart b/lib/home/widgets/appbar/appbar_widget.dart
@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:quiz/core/core.dart';
 import 'package:quiz/shared/models/user_model.dart';
 import 'package:quiz/home/widgets/score_card/score_card_widget.dart';
+import 'package:quiz/home/widgets/score_card/score_card_skeleton_widget.dart';
 
 class AppbarWidget extends StatefulWidget {
   final UserModel? user;
@@ -114,7 +115,7 @@ class _AppbarWidgetState extends State<AppbarWidget> {
                   switch (snapshot.connectionState) {
                     case ConnectionState.none:
                     case ConnectionState.waiting:
-                      return Container();
+                      return ScoreCardSkeletonWidget();
                     default:
                       var currentData = snapshot.data as DocumentSnapshot;
                       double score = 0.0;

diff --git a/lib/home/widgets/quiz_card/quiz_card_skeleton_widget.dart b/lib/home/widgets/quiz_card/quiz_card_skeleton_widget.dart
@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+import 'package:quiz/core/core.dart';
+import 'package:quiz/home/widgets/skeleton/skeleton_widget.dart';
+
+class QuizCardSkeletonWidget extends StatelessWidget {
+  const QuizCardSkeletonWidget({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: AppColors.white,
+        borderRadius: BorderRadius.circular(10),
+        border: Border.fromBorderSide(
+          BorderSide(
+            color: AppColors.border,
+          ),
+        ),
+      ),
+      child: Skeleton(
+        borderRadius: 9,
+      ),
+    );
+  }
+}
diff --git a/lib/home/widgets/score_card/score_card_skeleton_widget.dart b/lib/home/widgets/score_card/score_card_skeleton_widget.dart
@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:quiz/core/core.dart';
+import 'package:quiz/home/widgets/skeleton/skeleton_widget.dart';
+
+class ScoreCardSkeletonWidget extends StatelessWidget {
+  const ScoreCardSkeletonWidget({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.symmetric(horizontal: 16),
+      height: 136,
+      decoration: BoxDecoration(
+        color: AppColors.white,
+        borderRadius: BorderRadius.circular(15),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.grey.withOpacity(0.2),
+            spreadRadius: 2,
+            blurRadius: 5,
+            offset: Offset(0, 2),
+          ),
+        ],
+      ),
+      child: Skeleton(borderRadius: 14),
+    );
+  }
+}
diff --git a/lib/home/widgets/score_card/score_card_widget.dart b/lib/home/widgets/score_card/score_card_widget.dart
@@ -15,6 +15,14 @@ class ScoreCardWidget extends StatelessWidget {
       decoration: BoxDecoration(
         color: AppColors.white,
         borderRadius: BorderRadius.circular(15),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.grey.withOpacity(0.2),
+            spreadRadius: 2,
+            blurRadius: 5,
+            offset: Offset(0, 2),
+          ),
+        ],
       ),
       child: Row(
         children: [

diff --git a/lib/home/widgets/skeleton/skeleton_widget.dart b/lib/home/widgets/skeleton/skeleton_widget.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'package:quiz/core/core.dart';
+
+class Skeleton extends StatefulWidget {
+  final double height;
+  final double width;
+  final double borderRadius;
+
+  Skeleton({
+    Key? key,
+    this.height = 1000,
+    this.width = 1000,
+    this.borderRadius = 0,
+  }) : super(key: key);
+
+  createState() => SkeletonState();
+}
+
+class SkeletonState extends State<Skeleton>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+
+  late Animation gradientPosition;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+        duration: Duration(milliseconds: 1500), vsync: this);
+
+    gradientPosition = Tween<double>(
+      begin: -3,
+      end: 10,
+    ).animate(
+      CurvedAnimation(parent: _controller, curve: Curves.linear),
+    )..addListener(() {
+        setState(() {});
+      });
+
+    _controller.repeat();
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    _controller.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: widget.width,
+      height: widget.height,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(widget.borderRadius),
+        gradient: LinearGradient(
+          begin: Alignment(gradientPosition.value, 0),
+          end: Alignment(-1, 0),
+          colors: [AppColors.border, Colors.white10, AppColors.border],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/result/result_page.dart b/lib/result/result_page.dart
@@ -68,7 +68,7 @@ class ResultPage extends StatelessWidget {
                           label: 'Compartilhar',
                           onPressed: () {
                             Share.share(
-                                'Resultado do quiz $title:\n${totalRightAnswers / totalQuestions}% de aproveitamento.\n\nhttps://github.com/90lucasgabriel/quiz-nlw5');
+                                'Resultado do quiz $title:\n${((totalRightAnswers / totalQuestions) * 100).toStringAsFixed(2)}% de aproveitamento.\n\nhttps://github.com/90lucasgabriel/quiz-nlw5');
                           },
                         ),
                       ),