feat: Added new screen of videos (#74)

* Added new screen of videos

* Resolve comments

android/app/src/main/AndroidManifest.xml

@@ -34,9 +34,15 @@
             <action android:name="android.intent.action.SENDTO" />
             <data android:scheme="mailto" />
         </intent>
+        <intent>
+            <action android:name="android.intent.action.VIEW" />
+            <data android:scheme="tel" />329
+        </intent>
     </queries>
     <uses-permission
         android:name="android.permission.ACCESS_NETWORK_STATE"/>
     <uses-permission
         android:name="android.permission.INTERNET"/>
+    <uses-permission android:name="android.permission.QUERY_ALL_PACKAGES" />
+
 </manifest>

ios/Runner/Info.plist

@@ -2,6 +2,10 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+    <key>LSApplicationQueriesSchemes</key>
+    <array>
+        <string>youtube</string>
+    </array>
 	<key>CADisableMinimumFrameDurationOnPhone</key>
 	<true/>
 	<key>CFBundleDevelopmentRegion</key>

lib/core/common/config.dart

@@ -42,8 +42,10 @@ abstract class Config {
 
   static Uri imagesTipsRepository =
       Uri.parse('https://www.github.com/vandadnp/flutter-tips-and-tricks');
+  static String widgetOfTheWeekPlaylistId =
+      'PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG';
   static Uri widgetOfTheWeekLink = Uri.parse(
-    'https://www.youtube.com/watch?v=b6Z885Z46cU&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG',
+    'https://www.youtube.com/playlist?list=$widgetOfTheWeekPlaylistId',
   );
   static String fluttipsRepository = 'https://github.com/xmartlabs/fluttips';
   static Uri xmartlabsLinkedln =

lib/l10n/intl_en.arb

@@ -64,6 +64,8 @@
   "password": "Password",
   "search": "Search",
   "secondMessageEmptyFavoritesScreen": "2. Tap on the start icon on the bottom right of the screen",
-  "videos": "Coming soon",
+  "videos": "Videos",
+  "videos_button": "Watch videos",
+  "videos_description": "Here you have series of quick, animated videos, each of which covers a particular widget from the Flutter SDK.\n\nWe’re working to improve this feature :)",
   "xmartlabs_projects": "Xmartlabs' projects"
 }

lib/ui/common/app_base_button.dart

@@ -8,12 +8,14 @@ class AppBaseButton extends StatelessWidget {
   final VoidCallback action;
   final Color backgroundColor;
   final Color textColor;
+  final Image? image;
 
   const AppBaseButton({
     required this.text,
     required this.action,
     required this.backgroundColor,
     required this.textColor,
+    this.image,
     Key? key,
   }) : super(key: key);
 
@@ -29,6 +31,17 @@ class AppBaseButton extends StatelessWidget {
         color: backgroundColor,
         textColor: textColor,
         onPressed: action,
-        child: Text(text),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: [
+            if (image != null)
+              Container(
+                padding: EdgeInsets.only(right: 10.w),
+                child: image,
+              ),
+            Text(text),
+          ],
+        ),
       );
 }

lib/ui/common/app_primary_button.dart

@@ -6,17 +6,20 @@ import 'package:fluttips/ui/theme/app_theme.dart';
 class AppPrimaryButton extends StatelessWidget {
   final String text;
   final VoidCallback action;
+  final Image? image;
 
   const AppPrimaryButton({
     required this.text,
     required this.action,
+    this.image,
     Key? key,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) => AppBaseButton(
         text: text,
         action: action,
+        image: image,
         backgroundColor: context.theme.colors.primary.shade100,
         textColor: context.theme.colors.primary,
       );

lib/ui/helper/launch_helper.dart

@@ -0,0 +1,27 @@
+import 'dart:io';
+import 'package:url_launcher/url_launcher.dart';
+
+Future<void> openYoutubePlaylist(String playlistId) async {
+  final url = 'www.youtube.com/playlist?list=$playlistId';
+  final youtubeWebUri = Uri.parse('https://$url');
+  if (Platform.isIOS) {
+    if (await canLaunchUrl(Uri.parse('youtube://$url'))) {
+      await launchUrl(
+        Uri.parse('youtube://$url'),
+        mode: LaunchMode.externalApplication,
+      );
+    } else {
+      if (await canLaunchUrl(youtubeWebUri)) {
+        await launchUrl(youtubeWebUri);
+      } else {
+        throw Exception('Could not launch https://$url');
+      }
+    }
+  } else {
+    if (await canLaunchUrl(youtubeWebUri)) {
+      await launchUrl(youtubeWebUri);
+    } else {
+      throw Exception('Could not launch https://$url');
+    }
+  }
+}

lib/ui/videos/videos.dart

@@ -1,7 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:fluttips/ui/common/app_primary_button.dart';
 import 'package:fluttips/ui/common/context_extensions.dart';
+import 'package:fluttips/ui/helper/launch_helper.dart';
 import 'package:fluttips/ui/theme/app_theme.dart';
+import 'package:fluttips/gen/assets.gen.dart';
+import 'package:fluttips/core/common/config.dart';
 
 class VideosScreen extends StatelessWidget {
   const VideosScreen({Key? key}) : super(key: key);
@@ -12,21 +16,36 @@ class VideosScreen extends StatelessWidget {
 
 class _VideosContentScreen extends StatelessWidget {
   @override
-  Widget build(BuildContext context) => Center(
+  Widget build(BuildContext context) => Container(
+        padding: EdgeInsets.fromLTRB(70.w, 30.h, 70.w, 30.h),
+        margin: EdgeInsets.only(right: 30.w, left: 20.w),
         child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             Text(
               context.localizations.videos,
-              style: context.theme.textStyles.titleLarge!.copyWith(
-                color: context.theme.colors.surface.shade700,
+              style: context.theme.textStyles.headlineLarge!.copyWith(
+                color: context.theme.colors.surface,
                 fontWeight: FontWeight.bold,
               ),
+              textDirection: TextDirection.ltr,
             ),
-            SizedBox(height: 10.h),
-            Icon(
-              Icons.play_circle_outline_outlined,
-              color: context.theme.colors.surface.shade700,
+            SizedBox(height: 20.h),
+            Text(
+              context.localizations.videos_description,
+              style: context.theme.textStyles.bodyLarge!.copyWith(
+                color: context.theme.colors.surface,
+              ),
+              textDirection: TextDirection.ltr,
+            ),
+            SizedBox(height: 20.h),
+            Divider(color: context.theme.colors.surface.shade700),
+            SizedBox(height: 30.h),
+            AppPrimaryButton(
+              image: Assets.images.icYoutubeLogo.image(),
+              text: context.localizations.videos_button,
+              action: () =>
+                  openYoutubePlaylist(Config.widgetOfTheWeekPlaylistId),
             ),
           ],
         ),