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
+40 -27
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,44 +25,56 @@ class ResultSearchBox extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return TextField( return Row(
onEditingComplete: () { crossAxisAlignment: CrossAxisAlignment.end,
FocusScope.of(context).unfocus(); mainAxisAlignment: MainAxisAlignment.spaceBetween,
}, children: [
controller: searchCTRL, SizedBox(
onChanged: onChanged, width: 3,
decoration: InputDecoration(
icon: Icon(
FontAwesomeIcons.search,
size: 6 * _deviceBlockSize,
), ),
labelStyle: TextStyle( Expanded(
fontWeight: FontWeight.w100, child: TextField(
fontSize: 4 * _deviceBlockSize, 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', InkWell(
isDense: true,
contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3),
suffixIcon: InkWell(
onTap: onTap, onTap: onTap,
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: Icon( child: Center(
Icons.input, child: Icon(
color: Colors.white, Icons.search,
size: 4 * _deviceBlockSize,
color: Colors.white,
),
), ),
), ),
), ),
), ],
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 5 * _deviceBlockSize,
),
keyboardType: textInputType,
); );
} }
} }
+43 -34
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,53 +17,63 @@ class LabelSearchBox extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var searchVal; var searchVal;
return TextField( return Row(
onEditingComplete: () { crossAxisAlignment: CrossAxisAlignment.end,
FocusScope.of(context).unfocus(); mainAxisAlignment: MainAxisAlignment.spaceBetween,
}, children: [
onChanged: (value) async { SizedBox(
searchVal = value; width: 3,
},
controller: searchCTRL,
decoration: InputDecoration(
icon: Icon(
FontAwesomeIcons.search,
size: 6 * _deviceBlockSize,
), ),
labelStyle: TextStyle( Expanded(
fontWeight: FontWeight.w100, child: TextField(
fontSize: 4 * _deviceBlockSize, 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', InkWell(
isDense: true,
contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3),
suffixIcon: InkWell(
onTap: () async { onTap: () async {
var labels = await Provider.of<LabelsProvider>( var labels =
context, await Provider.of<LabelsProvider>(context, listen: false);
listen: false);
labels.setLoading(); labels.setLoading();
await labels.search(searchVal); await labels.search(searchVal);
}, },
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: Icon( child: Center(
Icons.input, child: Icon(
color: Colors.white, Icons.search,
size: 4 * _deviceBlockSize,
color: Colors.white,
),
), ),
), ),
), ),
), ],
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 5 * _deviceBlockSize,
),
keyboardType: TextInputType.number,
); );
} }
} }
@@ -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,27 +17,39 @@ class TestResultSearchBox extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var textVal; var textVal;
return TextField( return Row(
onEditingComplete: () { crossAxisAlignment: CrossAxisAlignment.end,
FocusScope.of(context).unfocus(); mainAxisAlignment: MainAxisAlignment.spaceBetween,
}, children: [
onChanged: (value) async { SizedBox(
textVal = value; width: 3,
},
controller: searchCTRL,
decoration: InputDecoration(
icon: Icon(
FontAwesomeIcons.search,
size: 6 * _deviceBlockSize,
), ),
labelStyle: TextStyle( Expanded(
fontWeight: FontWeight.w100, child: TextField(
fontSize: 4 * _deviceBlockSize, 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', InkWell(
isDense: true,
contentPadding: EdgeInsets.symmetric(vertical: 2, horizontal: 3),
suffixIcon: 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: Icon( child: Center(
Icons.input, child: Icon(
color: Colors.white, Icons.search,
size: 4 * _deviceBlockSize,
color: Colors.white,
),
), ),
), ),
), ),
), ],
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 5 * _deviceBlockSize,
),
keyboardType: TextInputType.visiblePassword,
); );
} }
} }