Flutter how to show text and image in text field

Question

I need to show fixed text and image on left side of text form field.

Like this

enter image description here

My code

                Container(
                  width: Width * 0.9,
                  height: Height * 0.08,
                  child: TextFormField(
                    style: TextStyle(
                        color: kPrimaryColor, fontFamily: 'UbuntuRegular'),
                    decoration: new InputDecoration(
                      border: new OutlineInputBorder(
                        borderSide: const BorderSide(
                            color: Colors.grey, width: 1.25),
                        borderRadius: const BorderRadius.all(
                          const Radius.circular(10.0),
                        ),
                      ),
                      filled: true,
                      hintStyle: new TextStyle(
                          color: Color(0xffbdbdbd),
                          fontFamily: 'UbuntuRegular'),
                      hintText: "3388 3388",
                      fillColor: Colors.white70,
                      enabledBorder: new OutlineInputBorder(
                        borderSide: const BorderSide(
                            color: Color(0xffbdbdbd), width: 1),
                        borderRadius: const BorderRadius.all(
                          const Radius.circular(10.0),
                        ),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                            color: kPrimaryColor, width: 1),
                        borderRadius: const BorderRadius.all(
                          const Radius.circular(10.0),
                        ),
                      ),
                    ),
                  ),
                ),

Its simple text field with placeholder but i am not abel to add this image and fixed label on right side

You can check it out pub.dev/packages/intl_phone_number_input — Pratik Butani
– Pratik Butani, Commented Mar 16, 2021 at 12:54

Harsh Chovatiya · Accepted Answer · 2021-03-16 12:37:19Z

3

You need to use prefix in InputDecoration. like this:

 TextFormField(
    InputDecoration(
      prefixIcon:Container(
/// Your code is here based on show your design.
    ),
  ),
),

I hope it's work And please let me know.

edited Mar 16, 2021 at 12:37

answered Mar 16, 2021 at 11:17

Harsh Chovatiya

3332 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andy Over a year ago

i hae added this but its only showing onfoucesd mean when i tap on textfield then icon is showing only otherwise its blank

Vinay Jain Over a year ago

Use prefixIcon instead of prefix . It would surely work.

Harsh Chovatiya Over a year ago

@Andy I have edited my code so please you can try prefixIcon and let me know.

Vinay Jain · Accepted Answer · 2021-03-16 10:52:21Z

1

You can use the prefix property in decoration of TextFields. It allows you to provide an widget in the starting of textField. Below is an example :

InputDecoration(
  prefix: Icon(Icons.add),
),

So as in your case you could use an Row in the prefix to give both icon and a text.

answered Mar 16, 2021 at 10:52

Vinay Jain

4283 silver badges6 bronze badges

1 Comment

Andy Over a year ago

i have added this but its only showing onfoucesd mean when i tap on textfield then icon is showing only otherwise its blan

Collectives™ on Stack Overflow

Flutter how to show text and image in text field

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related