From 6da0d3a52be0c99ab35dd8ec8807f34d088b8e80 Mon Sep 17 00:00:00 2001 From: Prajapati Chintan Date: Fri, 13 Jan 2023 18:27:02 +0530 Subject: [PATCH 1/2] Added: Expansion panel and container with rounded border --- .../widgets/atoms/app_expansion_panel.dart | 128 ++++++++++++++++++ .../atoms/container_with_rounded_border.dart | 35 +++++ 2 files changed, 163 insertions(+) create mode 100644 lib/vaahextendflutter/widgets/atoms/app_expansion_panel.dart create mode 100644 lib/vaahextendflutter/widgets/atoms/container_with_rounded_border.dart diff --git a/lib/vaahextendflutter/widgets/atoms/app_expansion_panel.dart b/lib/vaahextendflutter/widgets/atoms/app_expansion_panel.dart new file mode 100644 index 00000000..41030ba9 --- /dev/null +++ b/lib/vaahextendflutter/widgets/atoms/app_expansion_panel.dart @@ -0,0 +1,128 @@ +import 'package:flutter/material.dart' hide ExpansionPanel; +import 'package:font_awesome_flutter/font_awesome_flutter.dart'; +import 'package:team/vaahextendflutter/app_theme.dart'; + +final _expansionTween = CurveTween(curve: Curves.fastOutSlowIn); +final _iconTurnTween = Tween(begin: 0.0, end: 0.5) // + .chain(_expansionTween); + +abstract class ExpansionControl { + abstract bool expanded; +} + +typedef ExpansionHeaderBuilder = Widget Function(BuildContext context, ExpansionControl control); + +@immutable +class AppExpansionPanel extends StatefulWidget { + const AppExpansionPanel({ + Key? key, + required this.headerBuilder, + required this.children, + this.expanded = false, + this.padding = EdgeInsets.zero, + this.border = true, + this.textStyle, + }) : super(key: key); + + final ExpansionHeaderBuilder headerBuilder; + final List children; + final bool expanded; + final EdgeInsets padding; + final bool border; + final TextStyle? textStyle; + + @override + State createState() => _AppExpansionPanelState(); +} + +class _AppExpansionPanelState extends State + with SingleTickerProviderStateMixin, ExpansionControl { + late AnimationController _controller; + late Animation _expansionAnim; + late Animation _iconTurns; + + late bool _expanded; + + @override + void initState() { + super.initState(); + _expanded = widget.expanded; + _controller = AnimationController(duration: const Duration(milliseconds: 250), vsync: this); + _controller.value = expanded ? _controller.upperBound : _controller.lowerBound; + _expansionAnim = _controller.drive(_expansionTween); + _iconTurns = _controller.drive(_iconTurnTween); + } + + @override + void didUpdateWidget(covariant AppExpansionPanel oldWidget) { + super.didUpdateWidget(oldWidget); + if (oldWidget.expanded != widget.expanded) { + expanded = widget.expanded; + } + } + + @override + bool get expanded => _expanded; + + @override + set expanded(bool value) { + if (_expanded == value) return; + + if (value) { + _controller.forward(); + } else { + _controller.reverse(); + } + _expanded = value; + } + + @override + void dispose() { + _controller.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Material( + type: widget.border ? MaterialType.canvas : MaterialType.transparency, + shape: widget.border ? AppTheme.panelBorder : null, + textStyle: widget.textStyle, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + widget.headerBuilder(context, this), + SizeTransition( + axis: Axis.vertical, + axisAlignment: -1.0, + sizeFactor: _expansionAnim, + child: Padding( + padding: widget.padding - EdgeInsets.only(top: widget.padding.top), + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: widget.children, + ), + ), + ), + ], + ), + ); + } +} + +@immutable +class AppExpansionPanelIcon extends StatelessWidget { + const AppExpansionPanelIcon({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return RotationTransition( + turns: context.findAncestorStateOfType<_AppExpansionPanelState>()!._iconTurns, + child: FaIcon( + FontAwesomeIcons.angleDown, + color: AppTheme.colors['primary'], + ), + ); + } +} diff --git a/lib/vaahextendflutter/widgets/atoms/container_with_rounded_border.dart b/lib/vaahextendflutter/widgets/atoms/container_with_rounded_border.dart new file mode 100644 index 00000000..d63c8da5 --- /dev/null +++ b/lib/vaahextendflutter/widgets/atoms/container_with_rounded_border.dart @@ -0,0 +1,35 @@ +import 'package:flutter/material.dart'; +import 'package:team/vaahextendflutter/helpers/constants.dart'; + +class ContainerWithRoundedBorder extends StatelessWidget { + final EdgeInsets padding; + final double? width; + final double? height; + final double borderRadius; + final Color color; + final Widget child; + + const ContainerWithRoundedBorder({ + super.key, + this.padding = allPadding24, + this.width, + this.height, + this.borderRadius = defaultPadding, + this.color = Colors.white, + required this.child, + }); + + @override + Widget build(BuildContext context) { + return Container( + width: width, + height: height, + padding: padding, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(borderRadius), + color: color, + ), + child: child, + ); + } +} From fb649229ba49ebf000a0a5735e0a156a781072d7 Mon Sep 17 00:00:00 2001 From: Prajapati Chintan Date: Fri, 13 Jan 2023 16:04:03 +0530 Subject: [PATCH 2/2] Added: Title styles and title selector --- lib/views/pages/ui/components/commons.dart | 20 ++++++++++++++++++ .../ui/components/section_title_selector.dart | 21 +++++++++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 lib/views/pages/ui/components/commons.dart create mode 100644 lib/views/pages/ui/components/section_title_selector.dart diff --git a/lib/views/pages/ui/components/commons.dart b/lib/views/pages/ui/components/commons.dart new file mode 100644 index 00000000..7595555a --- /dev/null +++ b/lib/views/pages/ui/components/commons.dart @@ -0,0 +1,20 @@ +import 'package:flutter/material.dart'; +import 'package:team/vaahextendflutter/app_theme.dart'; + +TextStyle heading = TextStyle( + fontSize: AppTheme.large, + fontWeight: FontWeight.bold, + color: AppTheme.colors['black']!.shade400, +); + +TextStyle subheading = TextStyle( + fontSize: AppTheme.medium, + fontWeight: FontWeight.w600, + color: AppTheme.colors['black']!.shade400, +); + +TextStyle normal = TextStyle( + fontSize: AppTheme.small, + fontWeight: FontWeight.w600, + color: AppTheme.colors['black']!.shade400, +); diff --git a/lib/views/pages/ui/components/section_title_selector.dart b/lib/views/pages/ui/components/section_title_selector.dart new file mode 100644 index 00000000..81cce797 --- /dev/null +++ b/lib/views/pages/ui/components/section_title_selector.dart @@ -0,0 +1,21 @@ +import 'package:flutter/material.dart'; +import 'package:team/vaahextendflutter/app_theme.dart'; +import 'package:team/vaahextendflutter/helpers/styles.dart'; + +Widget sectionTitleSelector({ + required String title, + bool condition = false, + required Function()? callback, +}) { + return InkWell( + onTap: callback, + child: Text( + title, + style: condition + ? TextStyles.semiBold6?.copyWith( + color: AppTheme.colors['primary'], + ) + : TextStyles.regular5, + ), + ); +}