Textformfiled flutter: prefix and suffix not in line with the content

Question

The textformfiled i want

and My textformfield now

I'm trying create a search field like this.(attach this link) but the suffix, prefix icon not align with content

I am also attaching the code that I am using for this TextFormfield:

 Container(
            height: 35,
            width: Get.width - 40,
            decoration: BoxDecoration(
              color: backgroundColor.withOpacity(.8),
              borderRadius: BorderRadius.circular(20),
            ),
            child: TextFormField(
              textAlignVertical: TextAlignVertical.center,
              decoration: InputDecoration(
                contentPadding: const EdgeInsets.only(
                    left: 15, bottom: 10, top: 10, right: 15),
                border: InputBorder.none,
                focusedBorder: InputBorder.none,
                enabledBorder: InputBorder.none,
                errorBorder: InputBorder.none,
                disabledBorder: InputBorder.none,
                hintText: 'Search',
                prefix: IconButton(
                  constraints: const BoxConstraints(),
                  icon: Image.asset(
                    'assets/icons/back.png',
                    width: 20,
                    height: 20,
                    fit: BoxFit.scaleDown,
                  ),
                  onPressed: () => toast(content: 'back action'),
                  padding: EdgeInsets.zero,
                ),
                suffix: IconButton(
                  constraints: const BoxConstraints(),
                  icon: Image.asset(
                    'assets/icons/plus_circle.png',
                    width: 20,
                    height: 20,
                    fit: BoxFit.scaleDown,
                  ),
                  onPressed: () => toast(content: 'clear action'),
                  padding: EdgeInsets.zero,
                ),
              ),
            ),
          ),

score 1 · Accepted Answer · answered Jul 23 '22 at 15:26

You can use CupertinoSearchTextField and modify the way it as you like. If it doesnt satisfy, you can choose row over prefix and suffix alignment. Here are three looks and code.

CupertinoSearchTextField

child: CupertinoSearchTextField(
  padding: EdgeInsets.all(8),
  borderRadius: BorderRadius.circular(20),
  // decoration: BoxDecoration(
  //   color: Colors.grey,
  //   borderRadius: BorderRadius.circular(20),
  // ),
  prefixIcon: Icon(Icons.arrow_back_ios),
),

Using Row

Container(
  width: 400,
  decoration: BoxDecoration(
    color: Colors.grey,
    borderRadius: BorderRadius.circular(20),
  ),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      IconButton(
        iconSize: 16,
        icon: Icon(
          Icons.ads_click,
        ),
        onPressed: () {},
        padding: EdgeInsets.zero,
      ),
      Expanded(
          child: TextFormField(
        decoration: InputDecoration(
          border: InputBorder.none,
          focusedBorder: InputBorder.none,
          enabledBorder: InputBorder.none,
          errorBorder: InputBorder.none,
          disabledBorder: InputBorder.none,
          hintText: 'Search',
          isDense: true,
        ),
      )),
      IconButton(
        iconSize: 16,
        icon: Icon(
          Icons.ads_click,
        ),
        onPressed: () {},
        padding: EdgeInsets.zero,
      ),
    ],
  ),
),

Using Prefix and suffix

Container(
width: 400,
decoration: BoxDecoration(
  color: Colors.grey,
  borderRadius: BorderRadius.circular(20),
),
child: TextFormField(
  decoration: InputDecoration(
    border: InputBorder.none,
    focusedBorder: InputBorder.none,
    enabledBorder: InputBorder.none,
    errorBorder: InputBorder.none,
    disabledBorder: InputBorder.none,
    hintText: 'Search',
    isDense: true,
    prefix: IconButton(
      iconSize: 16,
      icon: Icon(
        Icons.ads_click,
      ),
      onPressed: () {},
      padding: EdgeInsets.zero,
    ),
    suffix: IconButton(
      iconSize: 16,
      constraints: const BoxConstraints(),
      icon: Icon(Icons.ads_click),
      onPressed: () {},
      padding: EdgeInsets.only(right: 16),
    ),
  ),
),
),

IF you need to change size, provide height and width(if needed wrapped with SizedBox)

Glad to help, You can also check [SearchDelegate-class.html](https://api.flutter.dev/flutter/material/SearchDelegate-class.html) — Md. Yeasin Sheikh, Jul 23 '22 at 15:51
i voted for you but i got message "Thanks for the feedback! You need at least 15 reputation to cast a vote, but your feedback has been recorded.". sorry my friend — anhdhq, Jul 23 '22 at 16:46

score 0 · Answer 2 · answered Jul 23 '22 at 15:18

0

Wrap the icon in a column widget and give mainAxisAlignment center

Column(
  mainAxisAlignment: MainAxisAlignment.center,
   children:[ Icon(),]
  )

This will bring the icon to the center of the text field

answered Jul 23 '22 at 15:18

Kaushik Chandru

15,510
2
12
30

Textformfiled flutter: prefix and suffix not in line with the content

2 Answers2