CODEWITHSUNDEEP
flutter
nima nima
nima nima

Reputation: 54

Flutter TextField: How add icon in right

in InputDecoration section on TextField Widget only icon for left is available(i mean outside of textfield not suffix)

how i add icon in right TextField?

for use Row its another problem:

 body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                Text("Hi")
              ],
            ),
          ),
          Expanded(
              child: Row(
            children: [
              TextField(
                style: TextStyle(
                  backgroundColor: Color.fromRGBO(118, 118, 128, 0.35),
                ),
                decoration: InputDecoration(
                  hintText: "Message",
                  filled: true,
                  fillColor: Color.fromRGBO(235, 235, 245, 0.6),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                ),
              ),
            ],
          )),
        ],
      ),

Upvotes: 2

Views: 7902

Answers (4)

Raghib Arshi
Raghib Arshi

Reputation: 765

USE 'suffixIcon'.

As 'prefixIcon' allows you to apply icon in the left side of TextField. You can use 'suffixIcon' for icon in the right side of TextField.

Happy Coding 😊.

Upvotes: 5

Mehrdad
Mehrdad

Reputation: 412

You can create your custom Textfield ,like below code:

Container(
          child: Row(
        children: [Flexible(child: TextField()), Icon(Icons.add)],
      )),

Upvotes: 4

BambinoUA
BambinoUA

Reputation: 7110

Do this:

Row(
  children: [
    Flexible(
      child: TextField(
        style: TextStyle(
          backgroundColor: Color.fromRGBO(118, 118, 128, 0.35),
        ),
        decoration: InputDecoration(
          hintText: "Message",
          filled: true,
          fillColor: Color.fromRGBO(235, 235, 245, 0.6),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(15),
          ),
        ),
      ),
    ),
    SizedBox(width: 10.0),
    Icon(Icons.settings),
  ],
),

It is required to limit the TextField with Flexible widget. Flexible acts for TextField like MainAxisSize.min for Column.

Upvotes: 0

devyl
devyl

Reputation: 121

Why do you need Expanded in the first place? But if it's a must, I think you can do it like this :

return Scaffold(
  body: Column(
    children: [
      Expanded(
        child: ListView(
          children: [
            Text("Hi")
          ],
        ),
      ),
      Expanded(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              width: MediaQuery.of(context).size.width - 50,
              height: 35,
              child: TextField(
                style: TextStyle(
                  backgroundColor: Color.fromRGBO(118, 118, 128, 0.35),
                ),
                decoration: InputDecoration(
                  hintText: "Message",
                  filled: true,
                  fillColor: Color.fromRGBO(235, 235, 245, 0.6),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                ),
              ),
            ),
            Icon(Icons.add_a_photo, size: 25)
          ],
        )
      ),
    ],
  ),
);

Your code gives an error because the Textfield needs sizes.

Upvotes: 1

Related Questions