'Floating search bar hiding list tiles
I have a search floating bar that's supposed to be positioned on top of my ListView right now this is how it looks like : enter image description here
I used this package for the search bar : enter link description here
This my the main page :
class MyQrqc extends StatefulWidget {
@override
_MyQrqcPageState createState() => _MyQrqcPageState();
}
class _MyQrqcPageState extends State<MyQrqc> {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body:Stack(
fit: StackFit.expand,
children: [
MyExpanableCardViewFlutter(),
const SizedBox(height: 50,),
searchBarUI(),
],
), //Wrapped into SingleChildScrollView because when click on TextField keyboard will open and you may get error on screen "bottom overflowed by pixels flutter"
);
}
}
ListView page :
class _MyExpanableCardViewFlutterState
extends State<MyExpanableCardViewFlutter> {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 3,
itemBuilder: (BuildContext context, int index){
return Card(
elevation: 2,
color: kSecondaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
),
foregroundDecoration: const RotatedCornerDecoration(
color: Colors.orange,
geometry: BadgeGeometry(width: 32, height: 32, cornerRadius: 16),
textSpan: TextSpan(
text: 'Init',
style: TextStyle(
fontSize: 10,
letterSpacing: 1,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
child: ExpansionTile(
leading: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(
"assets/icons/security.png",
height :40,
width: 40,),
),
title: const Text("984561225",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black),
),
subtitle: const Text("this should be a title"),
trailing: Column(
children: [
Expanded(
child: CircularPercentIndicator(
radius: 20.0,
lineWidth: 2.0,
percent: 0.8,
center: const Text("80%",
style: TextStyle(fontSize: 10),
),
progressColor: kPrimaryColor,
)
),
],
),
children: [
Row(
children: [
Expanded(
child: Image.asset("assets/icons/user.png",
width: 20,
height: 20,
),
),
const Expanded(
child: Text(
"Pilot",
style: TextStyle(fontSize: 10),
)
),
const SizedBox(width: 50),
Expanded(
child: Image.asset("assets/icons/product.png",
width: 20,
height: 20,
),
),
const Expanded(
child: Text(
"product 1",
style: TextStyle(fontSize: 10),
)
),
],
),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: Image.asset("assets/icons/location.png",
width: 20,
height: 20,
),
),
const Expanded(
child: Text(
"Perimeter",
style: TextStyle(fontSize: 10),
)
),
const SizedBox(width: 50),
Expanded(
child: Image.asset("assets/icons/calendar.png",
width: 20,
height: 20,
),
),
const Expanded(
child: Text(
"10/02/2022",
style: TextStyle(fontSize: 10),
)
),
],
)
],
),
),
);
}
);
}
}
and the Floating search bar widget :
Widget searchBarUI(){
return FloatingSearchBar(
hint: 'Search.....',
openAxisAlignment: 0.0,
openWidth: 600,
axisAlignment:0.0,
scrollPadding: EdgeInsets.only(top: 16,bottom: 20),
elevation: 4.0,
physics: BouncingScrollPhysics(),
onQueryChanged: (query){
//Your methods will be here
},
transitionCurve: Curves.easeInOut,
transitionDuration: Duration(milliseconds: 500),
transition: CircularFloatingSearchBarTransition(),
debounceDelay: Duration(milliseconds: 500),
actions: [
FloatingSearchBarAction(
showIfOpened: false,
child: CircularButton(icon: Icon(Icons.search),
onPressed: (){
print('Places Pressed');
},),
),
FloatingSearchBarAction.searchToClear(
showIfClosed: false,
),
],
builder: (context, transition){
return ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Material(
color: Colors.white,
child: Container(
height: 200.0,
color: Colors.white,
child: Column(
children: const [
ListTile(
title: Text('Home'),
subtitle: Text('more info here........'),
),
],
),
),
),
);
},
);
}
If anyone knows how to solve the issue I'd be grateful for your help.
Solution 1:[1]
maybe it's happening because you put fit: StackFit.expand, on your stack properity you can change try to change the properties of stack it maybe help the results that you want to achieve
Solution 2:[2]
or you can also put the FloatingSearchBar() within a Container() and put the background color: Colors.transparent that can help you show the listTiles upside down to the FloatingSearchBar(). You can try this process if you want.
2ndly, you can also add sizedbox() in the body: section and before the listTile() items to attain the preferred result,
I hope this works, Happy Coding ^_^
Solution 3:[3]
You can used this way:
@override
Widget build(BuildContext context) {
final fsb = FloatingSearchBar.of(context);
return ListView.builder(
padding: EdgeInsets.only(top: fsb.height + fsb.margins.vertical),
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return Card(...);
}
);
}
Now even the first search result is visible.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Mou Biswas |
| Solution 2 | |
| Solution 3 | Ruble |