Feature -> Develop | Task-1081 VaahFlutter Updated: expansion panel, default header, code preview, tabs

lib/vaahextendflutter/widgets/atoms/app_expansion_panel.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart' hide ExpansionPanel;
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:team/vaahextendflutter/app_theme.dart';
+import 'package:team/vaahextendflutter/helpers/constants.dart';
+import 'package:team/vaahextendflutter/helpers/styles.dart';
 
 final _expansionTween = CurveTween(curve: Curves.fastOutSlowIn);
 final _iconTurnTween = Tween<double>(begin: 0.0, end: 0.5) //
@@ -16,19 +18,23 @@ typedef ExpansionHeaderBuilder = Widget Function(BuildContext context, Expansion
 class AppExpansionPanel extends StatefulWidget {
   const AppExpansionPanel({
     Key? key,
-    required this.headerBuilder,
+    this.headerBuilder,
+    this.heading,
     required this.children,
     this.expanded = false,
     this.padding = EdgeInsets.zero,
     this.border = true,
+    this.backgroundColor,
     this.textStyle,
   }) : super(key: key);
 
-  final ExpansionHeaderBuilder headerBuilder;
+  final ExpansionHeaderBuilder? headerBuilder;
+  final String? heading;
   final List<Widget> children;
   final bool expanded;
   final EdgeInsets padding;
   final bool border;
+  final Color? backgroundColor;
   final TextStyle? textStyle;
 
   @override
@@ -86,12 +92,16 @@ class _AppExpansionPanelState extends State<AppExpansionPanel>
   Widget build(BuildContext context) {
     return Material(
       type: widget.border ? MaterialType.canvas : MaterialType.transparency,
+      color: widget.backgroundColor ?? AppTheme.colors['black']!.shade50.withOpacity(0.5),
       shape: widget.border ? AppTheme.panelBorder : null,
       textStyle: widget.textStyle,
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
-          widget.headerBuilder(context, this),
+          if (widget.headerBuilder != null)
+            widget.headerBuilder!(context, this)
+          else
+            defaultHeaderBuilder(context, this),
           SizeTransition(
             axis: Axis.vertical,
             axisAlignment: -1.0,
@@ -109,6 +119,25 @@ class _AppExpansionPanelState extends State<AppExpansionPanel>
       ),
     );
   }
+
+  Widget defaultHeaderBuilder(BuildContext context, ExpansionControl control) {
+    return InkWell(
+      onTap: () {
+        control.expanded = !control.expanded;
+      },
+      child: Padding(
+        padding: allPadding16,
+        child: Row(
+          children: [
+            Expanded(
+              child: Text(widget.heading ?? '', style: TextStyles.bold5),
+            ),
+            const AppExpansionPanelIcon(),
+          ],
+        ),
+      ),
+    );
+  }
 }
 
 @immutable

lib/vaahextendflutter/widgets/atoms/inputs.dart

@@ -6,7 +6,7 @@ import 'package:team/vaahextendflutter/helpers/constants.dart';
 
 enum InputSize { extraSmall, small, medium, large, extraLarge }
 
-class TextInput extends StatelessWidget {
+class InputText extends StatelessWidget {
   final String? label;
   final EdgeInsets padding;
   final double borderRadius;
@@ -27,7 +27,7 @@ class TextInput extends StatelessWidget {
   final int? minLines;
   final int? maxLines;
 
-  const TextInput({
+  const InputText({
     super.key,
     this.label,
     this.padding = allPadding12,

lib/vaahextendflutter/widgets/atoms/tab_options.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/cupertino.dart';
+import 'package:team/vaahextendflutter/helpers/constants.dart';
+import 'package:team/views/pages/ui/components/section_title_selector.dart';
+
+class TabOption {
+  final String name;
+  final Widget tab;
+
+  const TabOption({
+    required this.name,
+    required this.tab,
+  });
+}
+
+class TabOptions extends StatefulWidget {
+  const TabOptions({
+    Key? key,
+    required this.tabs,
+  }) : super(key: key);
+
+  final List<TabOption> tabs;
+
+  @override
+  State<TabOptions> createState() => _TabOptionsState();
+}
+
+class _TabOptionsState extends State<TabOptions> {
+  bool hasError = false;
+
+  @override
+  void initState() {
+    if (widget.tabs.isEmpty) {
+      hasError = true;
+    }
+    super.initState();
+  }
+
+  int _selectedIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return hasError
+        ? const Text('Something went wrong!')
+        : Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Wrap(
+                crossAxisAlignment: WrapCrossAlignment.end,
+                children: [
+                  for (int i = 0; i < widget.tabs.length; i++) ...[
+                    sectionTitleSelector(
+                      title: widget.tabs[i].name,
+                      condition: _selectedIndex == i,
+                      callback: () {
+                        setState(() {
+                          _selectedIndex = i;
+                        });
+                      },
+                    ),
+                    verticalMargin12,
+                    horizontalMargin12,
+                  ],
+                ],
+              ),
+              verticalMargin24,
+              widget.tabs[_selectedIndex].tab,
+              verticalMargin24,
+            ],
+          );
+  }
+}

lib/views/pages/ui/components/code_preview.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/cupertino.dart';
+import 'package:team/vaahextendflutter/app_theme.dart';
+import 'package:team/vaahextendflutter/helpers/constants.dart';
+import 'package:team/vaahextendflutter/helpers/styles.dart';
+import 'package:team/vaahextendflutter/widgets/atoms/container_with_rounded_border.dart';
+
+class CodePreview extends StatelessWidget {
+  final List<String> code;
+
+  const CodePreview({Key? key, required this.code}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return ContainerWithRoundedBorder(
+      width: double.infinity,
+      color: AppTheme.colors['black']!.withOpacity(0.8),
+      padding: allPadding12,
+      borderRadius: 6,
+      child: SingleChildScrollView(
+        scrollDirection: Axis.horizontal,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            for (final line in code)
+              Text(
+                line,
+                style: TextStyles.regular2?.copyWith(color: AppTheme.colors['white']),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/views/pages/ui/components/inputs/defaults.dart

@@ -1,10 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:team/vaahextendflutter/helpers/constants.dart';
+import 'package:team/vaahextendflutter/helpers/styles.dart';
 import 'package:team/vaahextendflutter/widgets/atoms/inputs.dart';
+import 'package:team/views/pages/ui/components/code_preview.dart';
 import 'package:team/views/pages/ui/components/commons.dart';
 
-class DefaultTextInputs extends StatelessWidget {
-  const DefaultTextInputs({Key? key}) : super(key: key);
+class InputTextPreview extends StatelessWidget {
+  const InputTextPreview({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -15,13 +17,13 @@ class DefaultTextInputs extends StatelessWidget {
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Text('Defaults', style: heading),
+          Text('Input Text', style: heading),
           verticalMargin16,
-          const TextInput(label: 'Default'),
+          const InputText(label: 'Default'),
           verticalMargin8,
-          const TextInput(label: 'Disabled', isEnabled: false),
+          const InputText(label: 'Disabled', isEnabled: false),
           verticalMargin8,
-          TextInput(label: 'Invalid', validator: (_) => 'Message'),
+          InputText(label: 'Invalid', validator: (_) => 'Message'),
           verticalMargin8,
           ElevatedButton(
             onPressed: () => formKey.currentState?.validate(),
@@ -32,3 +34,44 @@ class DefaultTextInputs extends StatelessWidget {
     );
   }
 }
+
+class InputTextCode extends StatelessWidget {
+  const InputTextCode({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text('Simple', style: TextStyles.regular2),
+        verticalMargin4,
+        const CodePreview(code: ["const InputText(label: 'Simple'),"]),
+        verticalMargin8,
+        Text('Disabled', style: TextStyles.regular2),
+        verticalMargin4,
+        const CodePreview(code: ["const InputText(label: 'Disabled', isEnabled: false),"]),
+        verticalMargin8,
+        Text('Invalid', style: TextStyles.regular2),
+        verticalMargin4,
+        const CodePreview(
+          code: [
+            "InputText(",
+            "    label: 'Invalid',",
+            "    validator: (value) {",
+            "        if (value!.isEmpty) {",
+            "            return 'Field is empty';",
+            "        }",
+            "        return null;",
+            "    },",
+            "),",
+            "",
+            "",
+            "// Call below method to validate, also wrap the input with form and key",
+            "formKey.currentState?.validate()"
+          ],
+        ),
+      ],
+    );
+  }
+}