Implementasikan ScreenUtil dan font Mazzard

Author: CoderJava

assets/fonts/MazzardL_SemiBold.otf

@@ -1,6 +1,7 @@
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
 
 void main() => runApp(MyApp());
 
@@ -16,9 +17,11 @@ class MyApp extends StatelessWidget {
 class MyHomePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
+    ScreenUtil.init(context);
     MediaQueryData mediaQueryData = MediaQuery.of(context);
     double heightScreen = mediaQueryData.size.height;
     double paddingTop = mediaQueryData.padding.top;
+    double paddingBottom = mediaQueryData.padding.bottom;
     return Scaffold(
       body: Container(
         width: double.infinity,
@@ -59,7 +62,52 @@ class MyHomePage extends StatelessWidget {
                 'assets/images/img_tree_beach.jpg',
               ),
             ),
-
+            Padding(
+              padding: EdgeInsets.only(
+                top: paddingTop,
+                bottom: paddingBottom,
+              ),
+              child: Column(
+                children: <Widget>[
+                  Expanded(
+                    child: Center(
+                      child: Text(
+                        'Meditation',
+                        style: TextStyle(
+                          color: Colors.white,
+                          fontFamily: 'MazzardSemiBold',
+                          fontSize: 36,
+                        ),
+                      ),
+                    ),
+                  ),
+                  Expanded(
+                    child: Center(
+                      child: Text(
+                        'Daydream',
+                        style: TextStyle(
+                          color: Colors.white,
+                          fontFamily: 'MazzardSemiBold',
+                          fontSize: 36,
+                        ),
+                      ),
+                    ),
+                  ),
+                  Expanded(
+                    child: Center(
+                      child: Text(
+                        'Sensations',
+                        style: TextStyle(
+                          color: Colors.white,
+                          fontFamily: 'MazzardSemiBold',
+                          fontSize: 36,
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
           ],
         ),
       ),
@@ -74,17 +122,17 @@ class WavyImage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    MediaQueryData mediaQueryData = MediaQuery.of(context);
-    double heightScreen = mediaQueryData.size.height;
     return ClipPath(
       child: Stack(
         children: <Widget>[
           Image.asset(
             img,
             fit: BoxFit.cover,
-            height: heightScreen / 2,
+            height: 1150.w,
+          ),
+          ContainerBlack(
+            heightScreen: 1150.w,
           ),
-          ContainerBlack(heightScreen: heightScreen),
         ],
       ),
       clipper: WaveClipper(),
@@ -158,7 +206,7 @@ class ContainerBlack extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      height: heightScreen / 2,
+      height: heightScreen,
       color: Colors.black.withOpacity(0.5),
     );
   }

lib/main.dart

@@ -69,6 +69,13 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_screenutil:
+    dependency: "direct main"
+    description:
+      name: flutter_screenutil
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -192,4 +199,4 @@ packages:
     source: hosted
     version: "3.5.0"
 sdks:
-  dart: ">=2.4.0 <3.0.0"
+  dart: ">=2.6.0 <3.0.0"

pubspec.lock

@@ -13,6 +13,9 @@ dependencies:
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^0.1.2
 
+  # A flutter plugin for adapting screen and font size.
+  flutter_screenutil: ^1.1.0
+
 dev_dependencies:
   flutter_test:
     sdk: flutter
@@ -46,6 +49,10 @@ flutter:
   #       - asset: fonts/TrajanPro.ttf
   #       - asset: fonts/TrajanPro_Bold.ttf
   #         weight: 700
+  fonts:
+    - family: MazzardSemiBold
+      fonts:
+        - asset: assets/fonts/MazzardL_SemiBold.otf
   #
   # For details regarding fonts from package dependencies,
   # see https://flutter.dev/custom-fonts/#from-packages