working on GFSlider viewport

Author: deepikahr

example/lib/main.dart

@@ -21,6 +21,8 @@ import 'package:ui_kit/components/image/gf_image_overlay.dart';
 
 import 'package:ui_kit/components/button_bar/gf_button_bar.dart';
 
+import 'package:ui_kit/components/list_tile/gf_list_tile.dart';
+
 import 'package:ui_kit/types/gf_type.dart';
 import 'package:ui_kit/shape/gf_shape.dart';
 import 'package:ui_kit/components/slider/gf_slider.dart';
@@ -45,7 +47,6 @@ class MyApp extends StatelessWidget {
       title: 'UI_KIT_EXAMPLE',
       theme: ThemeData(
         primarySwatch: Colors.blue,
-
       ),
       debugShowCheckedModeBanner: false,
       home: MyHomePage(title: 'UI_KIT_EXAMPLE'),
@@ -153,7 +154,10 @@ class _MyHomePageState extends State<MyHomePage> {
                       mainAxisAlignment: MainAxisAlignment.center,
                       crossAxisAlignment: CrossAxisAlignment.center,
                       children: <Widget>[
-                        RawMaterialButton(onPressed: null, child: Text("fv"),),
+                        RawMaterialButton(
+                          onPressed: null,
+                          child: Text("fv"),
+                        ),
                         FlatButton(onPressed: null, child: Text("cds")),
                         Icon(Icons.directions_railway),
                         GFButton(
@@ -220,7 +224,7 @@ class _MyHomePageState extends State<MyHomePage> {
               image: Image.asset("lib/assets/food.jpeg"),
 //              imageOverlay: AssetImage("lib/assets/food.jpeg"),
               titlePosition: GFPosition.end,
-              title: GFListItem(
+              title: GFListTile(
                 avatar: GFAvatar(
                   child: Text("tb"),
                 ),

lib/components/card/gf_card.dart

@@ -62,7 +62,7 @@ class GFCard extends StatelessWidget {
   final bool semanticContainer;
 
   /// The title to display inside the [GFTitleBar]. see [GFTitleBar]
-  final GFListItem title;
+  final GFListTile title;
 
   /// widget can be used to define content
   final Widget content;

lib/components/header/gf_header.dart

@@ -1,9 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:ui_kit/colors/gf_color.dart';
+import 'package:ui_kit/types/gf_heading_type.dart';
 
 class GFHeader extends StatelessWidget {
   const GFHeader(
       {Key key,
+        this.type,
       this.child,
       this.text,
       this.icon,
@@ -18,6 +20,8 @@ class GFHeader extends StatelessWidget {
       : super(key: key);
 
 
+
+
   /// child of  type [Widget] is alternative to text key. text will get priority over child
   final Widget child;
 
@@ -51,8 +55,29 @@ class GFHeader extends StatelessWidget {
   ///backgroundImagecolorFilter of type [ColorFilter] to set the background color of [GFHeader] only when backgroundImage is available
   final ColorFilter backgroundImagecolorFilter;
 
+
+  /// header type of [GFHeaderType] i.e, typo1, typo2, typo3, typo4, typo5, typo6
+  final GFHeadingType type;
+
   @override
   Widget build(BuildContext context) {
+
+    double fontSize;
+
+    if(type == GFHeadingType.typo1){
+      fontSize = 25.0;
+    }else if(type == GFHeadingType.typo2){
+      fontSize = 22.0;
+    }else if (type == GFHeadingType.typo3){
+      fontSize = 19.0;
+    }else if(type == GFHeadingType.typo4){
+      fontSize = 17.0;
+    }else if (type == GFHeadingType.typo5){
+      fontSize = 15.0;
+    }else if(type == GFHeadingType.typo6){
+      fontSize = 13.0;
+    }
+
     return Container(
         padding: EdgeInsets.all(backgroundImage != null ? 10 : 0),
         decoration: BoxDecoration(
@@ -75,28 +100,28 @@ class GFHeader extends StatelessWidget {
                     ? Padding(padding: EdgeInsets.only(left: 10))
                     : Container(),
                 text != null
-                    ? Text(
-                        text,
-                        style: TextStyle(
-                            color: textColor != null
-                                ? getGFColor(textColor)
-                                : backgroundImage != null
-                                    ? Colors.white
-                                    : Colors.black,
-                            fontSize: 16,
-                            letterSpacing: 0.3,
-                            fontWeight: FontWeight.w500),
-                      )
+                    ? Expanded(child: Text(
+                  text,
+                  style: TextStyle(
+                      color: textColor != null
+                          ? getGFColor(textColor)
+                          : backgroundImage != null
+                          ? Colors.white
+                          : Colors.black,
+                      fontSize:  fontSize,
+                      letterSpacing: 0.3,
+                      fontWeight: FontWeight.w500),
+                ))
                     : child
               ],
             ),
             showDivider
                 ? Container(
-                    margin: EdgeInsets.only(top: 5, bottom: 5),
+                    margin: EdgeInsets.only(top: 3, bottom: 3),
                     alignment: dividerAlignment,
                     child: Container(
                       width: dividerWidth != null ? dividerWidth : 70,
-                      height: 4,
+                      height: fontSize/5,
                       decoration: BoxDecoration(
                           color: dividerColor != null
                               ? getGFColor(dividerColor)

lib/components/image/gf_image_overlay.dart

@@ -1,23 +1,24 @@
+import 'dart:ui';
+
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
 class GFImageOverlay extends StatelessWidget {
-
-  const GFImageOverlay({
-    Key key,
-    this.height,
-    this.width,
-    this.color,
-    this.padding,
-    this.margin,
-    this.image,
-    this.child,
-    this.alignment,
-    this.borderRadius,
-    this.colorFilter,
-    this.boxFit,
-    this.border
-  }) : super(key: key);
+  const GFImageOverlay(
+      {Key key,
+      this.height,
+      this.width,
+      this.color,
+      this.padding,
+      this.margin,
+      this.image,
+      this.child,
+      this.alignment,
+      this.borderRadius,
+      this.colorFilter=  const ColorFilter.mode(Colors.black26, BlendMode.colorBurn),
+      this.boxFit,
+      this.border})
+      : super(key: key);
 
   /// define image's [double] height
   final double height;
@@ -49,7 +50,7 @@ class GFImageOverlay extends StatelessWidget {
   final BoxFit boxFit;
 
   /// A color filter to apply to the image before painting it.
-  final ColorFilter colorFilter;
+  final ColorFilter colorFilter ;
 
   /// The corners of this [GFCard] are rounded by this [BorderRadius].
   final BorderRadiusGeometry borderRadius;
@@ -59,11 +60,10 @@ class GFImageOverlay extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-
     return Container(
       alignment: alignment,
-      height: height,
-      width: width,
+      height: height ?? MediaQuery.of(context).size.height * 0.3,
+      width: width ?? MediaQuery.of(context).size.width,
       margin: margin,
       padding: padding,
       child: child,
@@ -72,14 +72,8 @@ class GFImageOverlay extends StatelessWidget {
         border: border,
         color: color,
         image: new DecorationImage(
-            fit: boxFit,
-            colorFilter: colorFilter,
-            image: image
-        ),
+            fit: BoxFit.fill, colorFilter: child != null?  colorFilter: null, image: image),
       ),
     );
   }
 }
-
-
-

lib/components/list_tile/gf_list_tile.dart

@@ -2,38 +2,64 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:ui_kit/components/avatar/gf_avatar.dart';
 
-class GFListItem extends StatelessWidget {
+class GFListTile extends StatelessWidget {
   /// The card's background color.
   final Color color;
 
-  /// [GFAvatar] used to create rounded user profile
-  final GFAvatar avatar;
+  /// type of [Widget] or [GFAvatar] used to create rounded user profile
+  final Widget avatar;
 
-  /// The title to display inside the [GFListItem]. see [Text]
+  /// The title to display inside the [GFListTile]. see [Text]
   final Widget title;
 
-  /// The subTitle to display inside the [GFListItem]. see [Text]
+  /// The subTitle to display inside the [GFListTile]. see [Text]
   final Widget subTitle;
 
-  /// The icon to display inside the [GFListItem]. see [Icon]
+  /// The descriprion to display inside the [GFListTile]. see [Text]
+  final Widget description;
+
+  /// The icon to display inside the [GFListTile]. see [Icon]
   final Widget icon;
 
-  const GFListItem(
+  ///type of [bool] corresponds to true or false to show or hide the divider
+  final bool showDivider;
+
+  const GFListTile(
       {Key key,
       this.color,
       this.avatar,
       this.title,
       this.subTitle,
-      this.icon})
+      this.description,
+      this.icon,
+      this.showDivider = true
+      })
       : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return ListTile(
-      leading: avatar,
-      title: title,
-      subtitle: subTitle,
-      trailing: icon,
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: <Widget>[
+        ListTile(
+            leading: avatar,
+            title: title,
+            subtitle:  subTitle != null || description != null ? Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: <Widget>[
+                subTitle ?? Container(),
+                description ?? Container()
+              ],
+            ): null,
+            trailing: icon != null ?  Column(
+              children: <Widget>[
+                Padding(padding: EdgeInsets.only(top: description != null ? 0.0 : 8.0), child:
+                icon )
+              ],
+            ): null
+        ),
+        showDivider ? Divider() : Container()
+      ],
     );
   }
 }