How to add Text to TextField

Question

How to add Text to TextField widget. I have added the image so that you can understand easily what I am trying to say.

TextField(
    decoration: new InputDecoration(
        contentPadding: const EdgeInsets.only(bottom: 0.1),
        isDense: true,
        hintText: "اسمك (اسم صفحتك)",
        fillColor: Colors.black,
    ),
    keyboardType: TextInputType.text,
    style: new TextStyle(color: Colors.black),
),

user_11986710 · Answer

You can achieve this result with two different ways:

First, using hintText and suffixIcon, and then styling the hint:

TextField(
      decoration: InputDecoration(
        hintText: 'Hint Text',
        hintStyle: TextStyle(color: Colors.red),
        suffixIcon: Padding(      //suffixIcon, this way it don't disapear when the TextField is unfocused
          padding: EdgeInsets.only(top: 20), //padding to put closer to the line
          child: Text(
            'Right text',
            style: TextStyle(
              color: Colors.grey,
            ),
         ),
       ),
     ),
   ),

result:

Second way, using prefixIcon and suffixIcon:

TextField(
      decoration: InputDecoration(
        prefixIcon: Container(
          margin: EdgeInsets.only(bottom: 10),
          width: 50,
          height: 10,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Text('Text', style: TextStyle(color: Colors.white),),
        ),
        suffixIcon: Padding(
          padding: EdgeInsets.only(top: 20),
          child: Text(
            'Right text',
            style: TextStyle(
              color: Colors.grey,
            ),
          ),
        ),
      ),
    ),

result:

user_10156822 · Answer

Use an InputDecoration in the TextField

TextField(
  decoration: InputDecoration(
    hintText: 'Text in TextField',
  ),
),

How to add Text to TextField

2 Answers