So I have been trying to work around this but couldn't I have a search box inside my appbar in flutter and I have a PreferredSize to help with the height my I have extra space as shown with the blue line in the image below. Can someone help on how to remove this padding-like space as I want the content to align with the content below the search box? Below is the screenshot and my code snippet.
appBar: PreferredSize(
preferredSize: Size.fromHeight(40.0),
// here the desired height
child: AppBar(
centerTitle: true,
backgroundColor: colorGreen,
title: Container(
height: 35,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
),
child: Center(
child: SizedBox(
height: 40,
width: double.infinity,
child: Row(
children: <Widget>[
// Expanded(
Container(
padding: EdgeInsets.only(bottom:6),
width: 240,
alignment: Alignment.centerLeft,
child: TextField(
readOnly: true,
onTap: (){
},
textAlign: TextAlign.left,
controller: controller,
cursorColor: Colors.grey,
style: TextStyle(
color: Colors.grey,
fontSize: 16,
fontFamily: 'Montserrat'),
onChanged:
onSearchTextChanged,
decoration: InputDecoration(
hintText: "Search",
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 13,fontWeight: FontWeight.normal,
fontFamily:
'Montserrat'),
border: InputBorder.none,
prefixIcon: Container(
padding: EdgeInsets.only(top: 5),
child:Icon(
Icons.search,
color: Colors.grey,
size: 15,
)),
suffixIcon: Visibility(
visible: backClear,
child:InkWell(
onTap: () {
},
child: Container(
padding: EdgeInsets.only(top: 5),
child:Icon(
Icons.backspace,
color: Colors.grey,
size: 12,
)))),
labelStyle: TextStyle(
color: Colors.grey,
fontSize: 14,fontWeight: FontWeight.normal,
fontFamily:
'Montserrat'),
// hintText:Center(child: Text(""),), //contentPadding: EdgeInsets.only(top: 2),
),
),
),
new Container(
width: 2.0,
height: 100.0,
color: colorGreen,
),
Expanded(
flex: 1,
child: Align(
alignment: Alignment.center,
child: new Theme(
data: Theme.of(context)
.copyWith(
canvasColor:colorGray,
),
child:Directionality(
textDirection: TextDirection.ltr,
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
//iconSize: 15,
isDense: false,
icon: Container(
padding: EdgeInsets.all(0),
child:Icon(
//Icons.arrow_drop_down,
Icons.location_on,
color: Colors.grey,
size: 15,
)),
hint: Center(
child: Text(
"All Cities",
textAlign: TextAlign
.center,
style: TextStyle(
color: Colors
.grey,
fontWeight:
FontWeight
.normal,
fontFamily:
'Montserrat',
fontSize: 12),
)),
style: TextStyle(
color: Colors
.grey,
fontWeight:
FontWeight
.normal,
fontFamily:
'Montserrat',
fontSize: 12),
//value: selectedCountry,
onChanged: (newVal) {
setState(() {
});
},
value: _mySelection,
items:
data.map((item) {
return new DropdownMenuItem(
child: Container(
child: Container(
padding: EdgeInsets.all(0),
child: Center(
child: Text(
""
))),
),
value: item['id']
.toString(),
);
}).toList(),
isExpanded: true,
),
),
)
),
)
),
)
],
),
))),
),
),
CodePudding user response：
Add titleSpacing 0 and automaticallyImplyLeading false as below:
AppBar(
automaticallyImplyLeading: false,
titleSpacing: 0
)
Note: It will remove leading icon , you can add your own custom Leading icon.
CodePudding user response：
Make center title to false and add leadingWidth: 0,
centerTitle: false,
appBar: PreferredSize(
preferredSize: Size.fromHeight(40.0),
// here the desired height
child: AppBar(
leadingWidth: 0,
centerTitle: true,
backgroundColor: colorGreen,
title: Container(
height: 35,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
),
child: Center(
child: SizedBox(
height: 40,
width: double.infinity,
child: Row(
children: <Widget>[
// Expanded(
Container(
padding: EdgeInsets.only(bottom:6),
width: 240,
alignment: Alignment.centerLeft,
child: TextField(
readOnly: true,
onTap: (){
},
textAlign: TextAlign.left,
controller: controller,
cursorColor: Colors.grey,
style: TextStyle(
color: Colors.grey,
fontSize: 16,
fontFamily: 'Montserrat'),
onChanged:
onSearchTextChanged,
decoration: InputDecoration(
hintText: "Search",
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 13,fontWeight: FontWeight.normal,
fontFamily:
'Montserrat'),
border: InputBorder.none,
prefixIcon: Container(
padding: EdgeInsets.only(top: 5),
child:Icon(
Icons.search,
color: Colors.grey,
size: 15,
)),
suffixIcon: Visibility(
visible: backClear,
child:InkWell(
onTap: () {
},
child: Container(
padding: EdgeInsets.only(top: 5),
child:Icon(
Icons.backspace,
color: Colors.grey,
size: 12,
)))),
labelStyle: TextStyle(
color: Colors.grey,
fontSize: 14,fontWeight: FontWeight.normal,
fontFamily:
'Montserrat'),
// hintText:Center(child: Text(""),), //contentPadding: EdgeInsets.only(top: 2),
),
),
),
new Container(
width: 2.0,
height: 100.0,
color: colorGreen,
),
Expanded(
flex: 1,
child: Align(
alignment: Alignment.center,
child: new Theme(
data: Theme.of(context)
.copyWith(
canvasColor:colorGray,
),
child:Directionality(
textDirection: TextDirection.ltr,
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
//iconSize: 15,
isDense: false,
icon: Container(
padding: EdgeInsets.all(0),
child:Icon(
//Icons.arrow_drop_down,
Icons.location_on,
color: Colors.grey,
size: 15,
)),
hint: Center(
child: Text(
"All Cities",
textAlign: TextAlign
.center,
style: TextStyle(
color: Colors
.grey,
fontWeight:
FontWeight
.normal,
fontFamily:
'Montserrat',
fontSize: 12),
)),
style: TextStyle(
color: Colors
.grey,
fontWeight:
FontWeight
.normal,
fontFamily:
'Montserrat',
fontSize: 12),
//value: selectedCountry,
onChanged: (newVal) {
setState(() {
});
},
value: _mySelection,
items:
data.map((item) {
return new DropdownMenuItem(
child: Container(
child: Container(
padding: EdgeInsets.all(0),
child: Center(
child: Text(
""
))),
),
value: item['id']
.toString(),
);
}).toList(),
isExpanded: true,
),
),
)
),
)
),
)
],
),
))),
),
),
CodePudding user response：
You can replace the title with flexibleSpace
AppBar(
centerTitle: true,
backgroundColor: Colors.green,
flexibleSpace: Container(
// height: 35, <-- adjust height here
margin: EdgeInsets.zero,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
),
child: Center(
....
)
),
)