Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(height: 40),
Row(
children: [
SizedBox(width: 8),
//MENU
Icon(
Icons.menu,
size: 34,
color: AppColors.black,
),
Spacer(),
//LOGO
SizedBox(
height: 60,
width: 100,
child: Image.asset(
'assets/icons/logo_transparent_main.png',
)),
SizedBox(width: 8)
],
),
//SEARCHBAR
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
// controller: textIDController,
style: const TextStyle(
color: Colors.black, fontWeight: FontWeight.w700),
decoration: InputDecoration(
suffixIcon: FaIcon(
Icons.filter_list_sharp,
size: 30,
color: AppColors.black,
),
labelText: "Search",
labelStyle: const TextStyle(
color: Colors.black, fontWeight: FontWeight.w700),
// fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
),
maxLines: 1,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
),
),
SizedBox(height: 10),
],
),
),
I want the Icon (inside the searchbar in suffix Icon) to be shown after the Search Bar
Here's what I've tried but doesn't work:
Try below code hope its help to you. I have just change your searchbar widget if you want to display your suffixIcon just add it afer texrfield
//SEARCHBAR
Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
// controller: textIDController,
style: const TextStyle(
color: Colors.black, fontWeight: FontWeight.w700),
decoration: InputDecoration(
// suffixIcon: Icon(
// Icons.filter_list_sharp,
// size: 30,
// color: Colors.black,
// ),
labelText: "Search",
labelStyle: const TextStyle(
color: Colors.black, fontWeight: FontWeight.w700),
// fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide:
const BorderSide(color: Colors.black, width: 2.0),
),
),
maxLines: 1,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
),
),
),
SizedBox(width: 5,),// adjust width between search box and icon here as per your need
Icon(
Icons.filter_list_sharp,
size: 30,
color: Colors.black,
)
],
),