Improve search boxes ui

This commit is contained in:
hanie.khodkari
2025-05-12 18:42:20 +03:30
parent 839821e72f
commit 7e4b9a383e
3 changed files with 124 additions and 91 deletions
+32 -19
View File
@@ -1,3 +1,4 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart';
@@ -24,17 +25,21 @@ class ResultSearchBox extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return TextField( return Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 3,
),
Expanded(
child: TextField(
onEditingComplete: () { onEditingComplete: () {
FocusScope.of(context).unfocus(); FocusScope.of(context).unfocus();
}, },
controller: searchCTRL, controller: searchCTRL,
onChanged: onChanged, onChanged: onChanged,
decoration: InputDecoration( decoration: InputDecoration(
icon: Icon(
FontAwesomeIcons.search,
size: 6 * _deviceBlockSize,
),
labelStyle: TextStyle( labelStyle: TextStyle(
fontWeight: FontWeight.w100, fontWeight: FontWeight.w100,
fontSize: 4 * _deviceBlockSize, fontSize: 4 * _deviceBlockSize,
@@ -42,26 +47,34 @@ class ResultSearchBox extends StatelessWidget {
labelText: 'Search by $text $text2', labelText: 'Search by $text $text2',
isDense: true, isDense: true,
contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3), contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3),
suffixIcon: InkWell(
onTap: onTap,
child: Container(
margin: EdgeInsets.all(5),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
),
child: Icon(
Icons.input,
color: Colors.white,
),
),
),
), ),
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
fontSize: 5 * _deviceBlockSize, fontSize: 5 * _deviceBlockSize,
), ),
keyboardType: textInputType, keyboardType: textInputType,
),
),
InkWell(
onTap: onTap,
child: Container(
padding: EdgeInsets.all(7),
width: 8 * _deviceBlockSize,
margin: EdgeInsets.only(left: 5),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
),
child: Center(
child: Icon(
Icons.search,
size: 4 * _deviceBlockSize,
color: Colors.white,
),
),
),
),
],
); );
} }
} }
+37 -28
View File
@@ -1,5 +1,4 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import '../../../providers/labels.dart'; import '../../../providers/labels.dart';
@@ -18,19 +17,23 @@ class LabelSearchBox extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var searchVal; var searchVal;
return TextField( return Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 3,
),
Expanded(
child: TextField(
onEditingComplete: () { onEditingComplete: () {
FocusScope.of(context).unfocus(); FocusScope.of(context).unfocus();
}, },
controller: searchCTRL,
onChanged: (value) async { onChanged: (value) async {
searchVal = value; searchVal = value;
}, },
controller: searchCTRL,
decoration: InputDecoration( decoration: InputDecoration(
icon: Icon(
FontAwesomeIcons.search,
size: 6 * _deviceBlockSize,
),
labelStyle: TextStyle( labelStyle: TextStyle(
fontWeight: FontWeight.w100, fontWeight: FontWeight.w100,
fontSize: 4 * _deviceBlockSize, fontSize: 4 * _deviceBlockSize,
@@ -38,33 +41,39 @@ class LabelSearchBox extends StatelessWidget {
labelText: 'Search by package name', labelText: 'Search by package name',
isDense: true, isDense: true,
contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3), contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3),
suffixIcon: InkWell(
onTap: () async {
var labels = await Provider.of<LabelsProvider>(
context,
listen: false);
labels.setLoading();
await labels.search(searchVal);
},
child: Container(
margin: EdgeInsets.all(5),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
),
child: Icon(
Icons.input,
color: Colors.white,
),
),
),
), ),
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
fontSize: 5 * _deviceBlockSize, fontSize: 5 * _deviceBlockSize,
), ),
keyboardType: TextInputType.number, keyboardType: TextInputType.number,
),
),
InkWell(
onTap: () async {
var labels =
await Provider.of<LabelsProvider>(context, listen: false);
labels.setLoading();
await labels.search(searchVal);
},
child: Container(
padding: EdgeInsets.all(7),
width: 8 * _deviceBlockSize,
margin: EdgeInsets.only(left: 5),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
),
child: Center(
child: Icon(
Icons.search,
size: 4 * _deviceBlockSize,
color: Colors.white,
),
),
),
),
],
); );
} }
} }
@@ -1,5 +1,4 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import '../../../providers/test_results.dart'; import '../../../providers/test_results.dart';
@@ -18,19 +17,23 @@ class TestResultSearchBox extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var textVal; var textVal;
return TextField( return Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 3,
),
Expanded(
child: TextField(
onEditingComplete: () { onEditingComplete: () {
FocusScope.of(context).unfocus(); FocusScope.of(context).unfocus();
}, },
controller: searchCTRL,
onChanged: (value) async { onChanged: (value) async {
textVal = value; textVal = value;
}, },
controller: searchCTRL,
decoration: InputDecoration( decoration: InputDecoration(
icon: Icon(
FontAwesomeIcons.search,
size: 6 * _deviceBlockSize,
),
labelStyle: TextStyle( labelStyle: TextStyle(
fontWeight: FontWeight.w100, fontWeight: FontWeight.w100,
fontSize: 4 * _deviceBlockSize, fontSize: 4 * _deviceBlockSize,
@@ -38,7 +41,15 @@ class TestResultSearchBox extends StatelessWidget {
labelText: 'Search by test name', labelText: 'Search by test name',
isDense: true, isDense: true,
contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3), contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3),
suffixIcon: InkWell( ),
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 5 * _deviceBlockSize,
),
keyboardType: TextInputType.number,
),
),
InkWell(
onTap: () async { onTap: () async {
var testResults = var testResults =
await Provider.of<TestResultsProvider>(context, listen: false); await Provider.of<TestResultsProvider>(context, listen: false);
@@ -46,23 +57,23 @@ class TestResultSearchBox extends StatelessWidget {
await testResults.search(textVal); await testResults.search(textVal);
}, },
child: Container( child: Container(
margin: EdgeInsets.all(5), padding: EdgeInsets.all(7),
width: 8 * _deviceBlockSize,
margin: EdgeInsets.only(left: 5),
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
color: Colors.black, color: Colors.black,
), ),
child: Center(
child: Icon( child: Icon(
Icons.input, Icons.search,
size: 4 * _deviceBlockSize,
color: Colors.white, color: Colors.white,
), ),
), ),
), ),
), ),
style: TextStyle( ],
fontWeight: FontWeight.w700,
fontSize: 5 * _deviceBlockSize,
),
keyboardType: TextInputType.visiblePassword,
); );
} }
} }