👌 IMPROVE: Reusable Transaction Toggle widget

justEhmadSaeed · Apr 24, 2021 · f5fec79 · f5fec79
1 parent 27eed4c
commit f5fec79
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 33 deletions.
diff --git a/lib/TransactionToggle.dart b/lib/TransactionToggle.dart
@@ -1,50 +1,36 @@
 import 'package:flutter/material.dart';
 
 class TransactionToggle extends StatefulWidget {
+  TransactionToggle({required this.children}) {
+    _isSelected = List.generate(children.length, (index) => false);
+  }
+  final List<Widget> children;
+  late final List<bool> _isSelected;
   @override
   _TransactionToggleState createState() => _TransactionToggleState();
 }
 
 class _TransactionToggleState extends State<TransactionToggle> {
-  List<bool> _isSelected = [false, false];
   @override
   Widget build(BuildContext context) {
+    var children = widget.children;
+    var _isSelected = widget._isSelected;
     return Center(
       child: ToggleButtons(
-        children: [
-          Row(
-            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-            children: [
-              Icon(
-                Icons.login,
-              ),
-              Text('Money In')
-            ],
-          ),
-          // Text('Money In'),
-          Row(
-            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-            children: [
-              Text('Money Out'),
-              Icon(
-                Icons.logout,
-              ),
-            ],
-          ),
-        ],
+        children: children,
         textStyle: TextStyle(
           fontSize: 20,
           fontWeight: FontWeight.w500,
         ),
         onPressed: (int index) {
           setState(() {
-            if (!_isSelected[index]) {
-              if (index == 0) {
-                _isSelected[0] = true;
-                _isSelected[1] = false;
+            for (int buttonIndex = 0;
+                buttonIndex < _isSelected.length;
+                buttonIndex++) {
+              if (buttonIndex == index) {
+                if (!_isSelected[index]) _isSelected[buttonIndex] = true;
               } else {
-                _isSelected[1] = true;
-                _isSelected[0] = false;
+                _isSelected[buttonIndex] = false;
               }
             }
           });
@@ -57,7 +43,10 @@ class _TransactionToggleState extends State<TransactionToggle> {
         selectedBorderColor: Colors.teal,
         borderWidth: 2,
         splashColor: Colors.teal[100],
-        constraints: BoxConstraints(maxWidth: 170, minHeight: 50),
+        constraints: BoxConstraints.expand(
+            width:
+                MediaQuery.of(context).size.width / (1.2 * _isSelected.length),
+            height: 60),
       ),
     );
   }

diff --git a/lib/main.dart b/lib/main.dart
@@ -54,8 +54,7 @@ class _MyHomePageState extends State<MyHomePage> {
       ),
       body: Padding(
         padding: const EdgeInsets.all(8.0),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.stretch,
+        child: ListView(
           children: [
             CustomCard(
               children: [
@@ -75,7 +74,26 @@ class _MyHomePageState extends State<MyHomePage> {
                 SizedBox(
                   height: 20,
                 ),
-                TransactionToggle()
+                TransactionToggle(children: [
+                  Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Icon(
+                        Icons.login,
+                      ),
+                      Text('Money In'),
+                    ],
+                  ),
+                  Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Icon(
+                        Icons.logout,
+                      ),
+                      Text('Money Out'),
+                    ],
+                  ),
+                ])
               ],
             ),
             CustomCard(children: [
@@ -88,7 +106,55 @@ class _MyHomePageState extends State<MyHomePage> {
                   'Direct Material'
                 ],
               ),
-            ])
+            ]),
+            CustomCard(
+              children: [
+                Text(
+                  'Transaction Health',
+                  style: TextStyle(fontSize: 30),
+                ),
+                SizedBox(
+                  height: 20,
+                ),
+                TransactionToggle(
+                  children: [
+                    Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Icon(
+                          Icons.recommend,
+                          color: Colors.green,
+                          size: 30,
+                        ),
+                        Text('Good'),
+                      ],
+                    ),
+                    Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Icon(
+                          Icons.thumb_down,
+                          color: Colors.yellow[800],
+                          size: 30,
+                        ),
+                        Text('Okay'),
+                      ],
+                    ),
+                    Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Icon(
+                          Icons.thumb_down,
+                          color: Colors.red[600],
+                          size: 30,
+                        ),
+                        Text('Bad'),
+                      ],
+                    ),
+                  ],
+                )
+              ],
+            )
           ],
         ),
       ),