Improve search boxes ui

lib/widgets/CycleScreens/Result/search_box.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 
@@ -24,44 +25,56 @@ class ResultSearchBox extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return TextField(
-      onEditingComplete: () {
-        FocusScope.of(context).unfocus();
-      },
-      controller: searchCTRL,
-      onChanged: onChanged,
-      decoration: InputDecoration(
-        icon: Icon(
-          FontAwesomeIcons.search,
-          size: 6 * _deviceBlockSize,
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.end,
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        SizedBox(
+          width: 3,
         ),
-        labelStyle: TextStyle(
-          fontWeight: FontWeight.w100,
-          fontSize: 4 * _deviceBlockSize,
+        Expanded(
+          child: TextField(
+            onEditingComplete: () {
+              FocusScope.of(context).unfocus();
+            },
+            controller: searchCTRL,
+            onChanged: onChanged,
+            decoration: InputDecoration(
+              labelStyle: TextStyle(
+                fontWeight: FontWeight.w100,
+                fontSize: 4 * _deviceBlockSize,
+              ),
+              labelText: 'Search by $text $text2',
+              isDense: true,
+              contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3),
+            ),
+            style: TextStyle(
+              fontWeight: FontWeight.w700,
+              fontSize: 5 * _deviceBlockSize,
+            ),
+            keyboardType: textInputType,
+          ),
         ),
-        labelText: 'Search by $text $text2',
-        isDense: true,
-        contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3),
-        suffixIcon: InkWell(
+        InkWell(
           onTap: onTap,
           child: Container(
-            margin: EdgeInsets.all(5),
+            padding: EdgeInsets.all(7),
+            width: 8 * _deviceBlockSize,
+            margin: EdgeInsets.only(left: 5),
             decoration: BoxDecoration(
               shape: BoxShape.circle,
               color: Colors.black,
             ),
-            child: Icon(
-              Icons.input,
-              color: Colors.white,
+            child: Center(
+              child: Icon(
+                Icons.search,
+                size: 4 * _deviceBlockSize,
+                color: Colors.white,
+              ),
             ),
           ),
         ),
-      ),
-      style: TextStyle(
-        fontWeight: FontWeight.w700,
-        fontSize: 5 * _deviceBlockSize,
-      ),
-      keyboardType: textInputType,
+      ],
     );
   }
 }

lib/widgets/LabelScreens/Result/search_box.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:provider/provider.dart';
 
 import '../../../providers/labels.dart';
@@ -18,53 +17,63 @@ class LabelSearchBox extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     var searchVal;
-    return TextField(
-      onEditingComplete: () {
-        FocusScope.of(context).unfocus();
-      },
-      onChanged: (value) async {
-        searchVal = value;
-      },
-      controller: searchCTRL,
-      decoration: InputDecoration(
-        icon: Icon(
-          FontAwesomeIcons.search,
-          size: 6 * _deviceBlockSize,
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.end,
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        SizedBox(
+          width: 3,
         ),
-        labelStyle: TextStyle(
-          fontWeight: FontWeight.w100,
-          fontSize: 4 * _deviceBlockSize,
+        Expanded(
+          child: TextField(
+            onEditingComplete: () {
+              FocusScope.of(context).unfocus();
+            },
+            controller: searchCTRL,
+            onChanged: (value) async {
+              searchVal = value;
+            },
+            decoration: InputDecoration(
+              labelStyle: TextStyle(
+                fontWeight: FontWeight.w100,
+                fontSize: 4 * _deviceBlockSize,
+              ),
+              labelText: 'Search by package name',
+              isDense: true,
+              contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3),
+            ),
+            style: TextStyle(
+              fontWeight: FontWeight.w700,
+              fontSize: 5 * _deviceBlockSize,
+            ),
+            keyboardType: TextInputType.number,
+          ),
         ),
-        labelText: 'Search by package name',
-        isDense: true,
-        contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3),
-        suffixIcon: InkWell(
+        InkWell(
           onTap: () async {
-            var labels = await Provider.of<LabelsProvider>(
-                context,
-                listen: false);
+            var labels =
+                await Provider.of<LabelsProvider>(context, listen: false);
             labels.setLoading();
             await labels.search(searchVal);
-
           },
           child: Container(
-            margin: EdgeInsets.all(5),
+            padding: EdgeInsets.all(7),
+            width: 8 * _deviceBlockSize,
+            margin: EdgeInsets.only(left: 5),
             decoration: BoxDecoration(
               shape: BoxShape.circle,
               color: Colors.black,
             ),
-            child: Icon(
-              Icons.input,
-              color: Colors.white,
+            child: Center(
+              child: Icon(
+                Icons.search,
+                size: 4 * _deviceBlockSize,
+                color: Colors.white,
+              ),
             ),
           ),
         ),
-      ),
-      style: TextStyle(
-        fontWeight: FontWeight.w700,
-        fontSize: 5 * _deviceBlockSize,
-      ),
-      keyboardType: TextInputType.number,
+      ],
     );
   }
 }

lib/widgets/TestResultScreens/Main/search_box.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:provider/provider.dart';
 
 import '../../../providers/test_results.dart';
@@ -18,27 +17,39 @@ class TestResultSearchBox extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     var textVal;
-    return TextField(
-      onEditingComplete: () {
-        FocusScope.of(context).unfocus();
-      },
-      onChanged: (value) async {
-        textVal = value;
-      },
-      controller: searchCTRL,
-      decoration: InputDecoration(
-        icon: Icon(
-          FontAwesomeIcons.search,
-          size: 6 * _deviceBlockSize,
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.end,
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        SizedBox(
+          width: 3,
         ),
-        labelStyle: TextStyle(
-          fontWeight: FontWeight.w100,
-          fontSize: 4 * _deviceBlockSize,
+        Expanded(
+          child: TextField(
+            onEditingComplete: () {
+              FocusScope.of(context).unfocus();
+            },
+            controller: searchCTRL,
+            onChanged: (value) async {
+              textVal = value;
+            },
+            decoration: InputDecoration(
+              labelStyle: TextStyle(
+                fontWeight: FontWeight.w100,
+                fontSize: 4 * _deviceBlockSize,
+              ),
+              labelText: 'Search by test name',
+              isDense: true,
+              contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3),
+            ),
+            style: TextStyle(
+              fontWeight: FontWeight.w700,
+              fontSize: 5 * _deviceBlockSize,
+            ),
+            keyboardType: TextInputType.number,
+          ),
         ),
-        labelText: 'Search by test name',
-        isDense: true,
-        contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3),
-        suffixIcon: InkWell(
+        InkWell(
           onTap: () async {
             var testResults =
                 await Provider.of<TestResultsProvider>(context, listen: false);
@@ -46,23 +57,23 @@ class TestResultSearchBox extends StatelessWidget {
             await testResults.search(textVal);
           },
           child: Container(
-            margin: EdgeInsets.all(5),
+            padding: EdgeInsets.all(7),
+            width: 8 * _deviceBlockSize,
+            margin: EdgeInsets.only(left: 5),
             decoration: BoxDecoration(
               shape: BoxShape.circle,
               color: Colors.black,
             ),
-            child: Icon(
-              Icons.input,
-              color: Colors.white,
+            child: Center(
+              child: Icon(
+                Icons.search,
+                size: 4 * _deviceBlockSize,
+                color: Colors.white,
+              ),
             ),
           ),
         ),
-      ),
-      style: TextStyle(
-        fontWeight: FontWeight.w700,
-        fontSize: 5 * _deviceBlockSize,
-      ),
-      keyboardType: TextInputType.visiblePassword,
+      ],
     );
   }
 }