From b6f0516ee5616ef31c0698ed1b7e755e2952a7f7 Mon Sep 17 00:00:00 2001 From: "Shravya.ckm" Date: Mon, 27 Jan 2020 16:12:38 +0530 Subject: [PATCH 1/2] gf-accordian in progress --- lib/components/accordian/gf_accordian.dart | 140 +++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 lib/components/accordian/gf_accordian.dart diff --git a/lib/components/accordian/gf_accordian.dart b/lib/components/accordian/gf_accordian.dart new file mode 100644 index 00000000..8fa5eb0d --- /dev/null +++ b/lib/components/accordian/gf_accordian.dart @@ -0,0 +1,140 @@ +import 'package:flutter/material.dart'; +import 'package:getflutter/colors/gf_color.dart'; + +class GFAccordian extends StatefulWidget { + const GFAccordian( + {Key key, + this.child, + this.description, + this.titlebackgroundColor, + this.collapsedIcon = const Icon(Icons.keyboard_arrow_down), + this.expandedIcon = const Icon(Icons.keyboard_arrow_up), + this.text, + this.textStyle = const TextStyle(color: Colors.black, fontSize: 16), + this.titlePadding, + this.descriptionPadding, + this.descriptionbackgroundColor, + this.margin}) + : super(key: key); + + /// child of type [Widget]is alternative to text key. text will get priority over child + final Widget child; + + /// description of type[Widget] which shows the messages after the [GFAccordian] is expanded + final Widget description; + + /// type of [Color] or [GFColor] which is used to change the background color of the [GFAccordian] title + final dynamic titlebackgroundColor; + + ///collapsedIcon of type [Widget] which is used to show when the [GFAccordian] is collapsed + final Widget collapsedIcon; + + ///expandedIcon of type[Widget] which is used when the [GFAccordian] is expanded + final Widget expandedIcon; + + /// text of type [String] is alternative to child. text will get priority over child + final String text; + + /// textStyle of type [textStyle] will be applicable to text only and not for the child + final TextStyle textStyle; + + ///titlePadding of type [EdgeInsets] which is used to set the padding of the [GFAccordian] title + final EdgeInsets titlePadding; + + ///descriptionPadding of type [EdgeInsets] which is used to set the padding of the [GFAccordian] description + final EdgeInsets descriptionPadding; + + /// type of [Color] or [GFColor] which is used to change the background color of the [GFAccordian] description + final dynamic descriptionbackgroundColor; + + ///margin of type [EdgeInsets] which is used to set the margin of the [GFAccordian] + final EdgeInsets margin; + + @override + _GFAccordianState createState() => _GFAccordianState(); +} + +class _GFAccordianState extends State + with TickerProviderStateMixin { + AnimationController animationController; + AnimationController controller; + Animation offset; + + @override + void initState() { + super.initState(); + animationController = + AnimationController(duration: Duration(seconds: 2), vsync: this); + controller = + AnimationController(vsync: this, duration: Duration(milliseconds: 300)); + offset = Tween(begin: Offset(0.0, -0.06), end: Offset.zero).animate( + CurvedAnimation( + parent: controller, + curve: Curves.fastOutSlowIn, + ), + ); + } + + bool showAccordian = false; + + @override + Widget build(BuildContext context) { + return Container( + margin: widget.margin != null ? widget.margin : EdgeInsets.all(10), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GestureDetector( + onTap: () { + setState(() { + switch (controller.status) { + case AnimationStatus.completed: + controller.forward(from: 0); + break; + case AnimationStatus.dismissed: + controller.forward(); + break; + default: + } + showAccordian = !showAccordian; + }); + }, + child: Container( + color: widget.titlebackgroundColor != null + ? widget.titlebackgroundColor + : Colors.white, + padding: widget.titlePadding != null + ? widget.titlePadding + : EdgeInsets.all(10), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: widget.text != null + ? Text(widget.text, style: widget.textStyle) + : (widget.child ?? Container()), + ), + showAccordian ? widget.expandedIcon : widget.collapsedIcon + ], + ), + ), + ), + showAccordian + ? Container( + color: widget.descriptionbackgroundColor != null + ? widget.descriptionbackgroundColor + : Colors.white70, + padding: widget.descriptionPadding != null + ? widget.descriptionPadding + : EdgeInsets.all(10), + child: SlideTransition( + position: offset, + child: widget.description != null + ? widget.description + : Container())) + : Container() + ], + ), + ); + } +} From 72a2cabe11d9f6b1431f99d32b877cf994c11a15 Mon Sep 17 00:00:00 2001 From: "Shravya.ckm" Date: Tue, 28 Jan 2020 17:29:08 +0530 Subject: [PATCH 2/2] gf-accordion done --- example/lib/main.dart | 3 +- lib/components/accordian/gf_accordian.dart | 64 ++++---- lib/components/alert/gf_alert.dart | 149 +++++++++++++++++++ lib/components/toast/gf_floating_widget.dart | 53 +++++-- lib/types/gf_alert_type.dart | 1 + 5 files changed, 227 insertions(+), 43 deletions(-) create mode 100644 lib/components/alert/gf_alert.dart create mode 100644 lib/types/gf_alert_type.dart diff --git a/example/lib/main.dart b/example/lib/main.dart index 786b1543..c28f9523 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1,6 +1,5 @@ import 'package:flutter/material.dart'; import 'package:getflutter/getflutter.dart'; -import 'package:getflutter/components/search_bar/gf_search_bar.dart'; final List imageList = [ "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg", @@ -799,7 +798,7 @@ class _MyHomePageState extends State ).toList(), onPageChanged: (index) { setState(() { - index; + }); }, ), diff --git a/lib/components/accordian/gf_accordian.dart b/lib/components/accordian/gf_accordian.dart index 8fa5eb0d..f9ea107d 100644 --- a/lib/components/accordian/gf_accordian.dart +++ b/lib/components/accordian/gf_accordian.dart @@ -1,60 +1,66 @@ import 'package:flutter/material.dart'; import 'package:getflutter/colors/gf_color.dart'; -class GFAccordian extends StatefulWidget { - const GFAccordian( +class GFAccordion extends StatefulWidget { + + const GFAccordion( {Key key, this.child, - this.description, + this.content, this.titlebackgroundColor, this.collapsedIcon = const Icon(Icons.keyboard_arrow_down), - this.expandedIcon = const Icon(Icons.keyboard_arrow_up), - this.text, + this.expandedIcon = + const Icon(Icons.keyboard_arrow_up, color: Colors.red), + this.title, this.textStyle = const TextStyle(color: Colors.black, fontSize: 16), this.titlePadding, this.descriptionPadding, this.descriptionbackgroundColor, + this.contentChild, this.margin}) : super(key: key); - /// child of type [Widget]is alternative to text key. text will get priority over child + /// child of type [Widget]is alternative to title key. title will get priority over child final Widget child; - /// description of type[Widget] which shows the messages after the [GFAccordian] is expanded - final Widget description; + /// content of type[String] which shows the messages after the [GFAccordion] is expanded + final String content; + + /// contentChild of type [Widget]is alternative to content key. content will get priority over contentChild + final Widget contentChild; - /// type of [Color] or [GFColor] which is used to change the background color of the [GFAccordian] title + /// type of [Color] or [GFColor] which is used to change the background color of the [GFAccordion] title final dynamic titlebackgroundColor; - ///collapsedIcon of type [Widget] which is used to show when the [GFAccordian] is collapsed + ///collapsedIcon of type [Widget] which is used to show when the [GFAccordion] is collapsed final Widget collapsedIcon; - ///expandedIcon of type[Widget] which is used when the [GFAccordian] is expanded + ///expandedIcon of type[Widget] which is used when the [GFAccordion] is expanded final Widget expandedIcon; /// text of type [String] is alternative to child. text will get priority over child - final String text; + final String title; /// textStyle of type [textStyle] will be applicable to text only and not for the child final TextStyle textStyle; - ///titlePadding of type [EdgeInsets] which is used to set the padding of the [GFAccordian] title + ///titlePadding of type [EdgeInsets] which is used to set the padding of the [GFAccordion] title final EdgeInsets titlePadding; - ///descriptionPadding of type [EdgeInsets] which is used to set the padding of the [GFAccordian] description + ///descriptionPadding of type [EdgeInsets] which is used to set the padding of the [GFAccordion] description final EdgeInsets descriptionPadding; - /// type of [Color] or [GFColor] which is used to change the background color of the [GFAccordian] description + /// type of [Color] or [GFColor] which is used to change the background color of the [GFAccordion] description final dynamic descriptionbackgroundColor; - ///margin of type [EdgeInsets] which is used to set the margin of the [GFAccordian] + ///margin of type [EdgeInsets] which is used to set the margin of the [GFAccordion] final EdgeInsets margin; @override - _GFAccordianState createState() => _GFAccordianState(); + _GFAccordionState createState() => _GFAccordionState(); } -class _GFAccordianState extends State +class _GFAccordionState extends State with TickerProviderStateMixin { AnimationController animationController; AnimationController controller; @@ -75,7 +81,7 @@ class _GFAccordianState extends State ); } - bool showAccordian = false; + bool showAccordion = false; @override Widget build(BuildContext context) { @@ -96,7 +102,7 @@ class _GFAccordianState extends State break; default: } - showAccordian = !showAccordian; + showAccordion = !showAccordion; }); }, child: Container( @@ -110,17 +116,18 @@ class _GFAccordianState extends State mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Expanded( - child: widget.text != null - ? Text(widget.text, style: widget.textStyle) + child: widget.title != null + ? Text(widget.title, style: widget.textStyle) : (widget.child ?? Container()), ), - showAccordian ? widget.expandedIcon : widget.collapsedIcon + showAccordion ? widget.expandedIcon : widget.collapsedIcon ], ), ), ), - showAccordian + showAccordion ? Container( + width: MediaQuery.of(context).size.width, color: widget.descriptionbackgroundColor != null ? widget.descriptionbackgroundColor : Colors.white70, @@ -128,10 +135,11 @@ class _GFAccordianState extends State ? widget.descriptionPadding : EdgeInsets.all(10), child: SlideTransition( - position: offset, - child: widget.description != null - ? widget.description - : Container())) + position: offset, + child: widget.content != null + ? Text(widget.content) + : (widget.contentChild ?? Container()), + )) : Container() ], ), diff --git a/lib/components/alert/gf_alert.dart b/lib/components/alert/gf_alert.dart new file mode 100644 index 00000000..52618f2f --- /dev/null +++ b/lib/components/alert/gf_alert.dart @@ -0,0 +1,149 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; +import 'package:getflutter/getflutter.dart'; +import 'package:getflutter/types/gf_alert_type.dart'; + +class GFAlert extends StatefulWidget { + + /// Alert has to be wrap inside the body like [GFFloatingWidget]. See [GFFloatingWidget] + GFAlert( + {Key key, + this.child, + this.backgroundColor, + this.content, + this.width, + this.type = GFAlertType.basic, + this.alignment, + this.contentChild, + this.title, + this.bottombar, + this.animationDuration = const Duration(milliseconds: 300), + this.textStyle = const TextStyle(color: Colors.black87), + this.titleTextStyle = const TextStyle( + color: Colors.black87, fontSize: 17, fontWeight: FontWeight.w500)}) + : super(key: key); + + /// child of type [Widget]is alternative to text key. text will get priority over child + final Widget child; + + /// title of type [String] used to descripe the title of the [GFAlert] + final String title; + + /// child of type [Widget]is alternative to title key. title will get priority over contentchild + final Widget contentChild; + + /// title of type [String] used to describe the content of the [GFAlert] + final String content; + + final TextStyle titleTextStyle; + + ///pass color of type [Color] or [GFColor] for background of [GFAlert] + final dynamic backgroundColor; + + /// textStyle of type [textStyle] will be applicable to text only and not for the child + final TextStyle textStyle; + + /// width of type [double] used to control the width of the [GFAlert] + final double width; + + ///type of [GFAlertType] which takes the type ie, basic, rounded and fullWidth for the [GFAlert] + final GFAlertType type; + + ///type of [Duration] which takes the duration of the fade in animation + final Duration animationDuration; + + /// type of [Alignment] used to align the text inside the toast + final Alignment alignment; + + ///type of [Widget] used for the buttons ie, OK, Cancel for the action in [GFAlert] + final Widget bottombar; + @override + _GFAlertState createState() => _GFAlertState(); +} + +class _GFAlertState extends State with TickerProviderStateMixin { + AnimationController animationController; + Animation animation; + + @override + void initState() { + animationController = AnimationController( + duration: const Duration(milliseconds: 300), vsync: this); + animation = CurvedAnimation( + parent: animationController, curve: Curves.fastOutSlowIn); + + animationController.forward(); + super.initState(); + } + + @override + void dispose() { + animationController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Stack( + children: [ + Container( + height: MediaQuery.of(context).size.height, + ), + FadeTransition( + opacity: animation, + child: Column( + children: [ + Container( + width: widget.type == GFAlertType.fullWidth + ? MediaQuery.of(context).size.width + : widget.width, + constraints: BoxConstraints(minHeight: 50.0), + margin: widget.type == GFAlertType.fullWidth + ? EdgeInsets.only(left: 0, right: 0) + : EdgeInsets.only(left: 20, right: 20), + padding: EdgeInsets.all(15), + decoration: BoxDecoration( + borderRadius: widget.type == GFAlertType.basic + ? BorderRadius.circular(3.0) + : widget.type == GFAlertType.rounded + ? BorderRadius.circular(10.0) + : BorderRadius.zero, + color: widget.backgroundColor != null + ? GFColors.getGFColor(widget.backgroundColor) + : GFColors.getGFColor(GFColor.white), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.40), + blurRadius: 3.0) + ]), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + widget.title != null + ? Text(widget.title, style: widget.titleTextStyle) + : (widget.child ?? Container()), + SizedBox( + height: 10, + ), + Align( + alignment: widget.alignment != null + ? widget.alignment + : Alignment.topLeft, + child: widget.content != null + ? Text(widget.content, style: widget.textStyle) + : (widget.contentChild ?? Container()), + ), + SizedBox( + height: 10, + ), + widget.bottombar != null ? widget.bottombar : Container(), + ], + ), + ), + ], + ), + ), + ], + ); + } +} diff --git a/lib/components/toast/gf_floating_widget.dart b/lib/components/toast/gf_floating_widget.dart index 8a950c81..75541a55 100644 --- a/lib/components/toast/gf_floating_widget.dart +++ b/lib/components/toast/gf_floating_widget.dart @@ -9,6 +9,8 @@ class GFFloatingWidget extends StatefulWidget { this.child, this.horizontalPosition, this.verticalPosition, + this.color, + this.blur=false, this.body}) : super(key: key); @@ -24,6 +26,17 @@ class GFFloatingWidget extends StatefulWidget { /// verticalPosition of type [double] which aligns the child vertically across the body final double verticalPosition; + + final dynamic color; + + final bool blur; + + + + + + + @override _GFFloatingWidgetState createState() => _GFFloatingWidgetState(); } @@ -39,19 +52,33 @@ class _GFFloatingWidgetState extends State { height: MediaQuery.of(context).size.height, child: widget.body ?? Container(), ), - Positioned( - top: - widget.verticalPosition != null ? widget.verticalPosition : 0.0, - left: widget.horizontalPosition != null - ? widget.horizontalPosition - : 0.0, - right: widget.horizontalPosition != null - ? widget.horizontalPosition - : 0.0, - child: Container( - width: MediaQuery.of(context).size.width, - child: widget.child ?? Container(), - )), + Container( +// color: widget.child!=null? widget.color: null, + child: Stack( + children: [ + Positioned( + child:Container( + alignment: Alignment.topLeft, +// color: widget.child!=null? widget.color: null, + color: widget.blur?Colors.black38:null, + child: Stack( + children: [ + Positioned( top: + widget.verticalPosition != null ? widget.verticalPosition : 0.0, + left: widget.horizontalPosition != null + ? widget.horizontalPosition + : 0.0, + right: widget.horizontalPosition != null + ? widget.horizontalPosition + : 0.0,child: widget.child??Container(),) + ], + ) + ) + ), + ], + ) + ) + ], ); } diff --git a/lib/types/gf_alert_type.dart b/lib/types/gf_alert_type.dart new file mode 100644 index 00000000..8c3480ab --- /dev/null +++ b/lib/types/gf_alert_type.dart @@ -0,0 +1 @@ +enum GFAlertType { basic, rounded, fullWidth }