Kanwarpreet Singh
Kanwarpreet Singh

Reputation: 2086

Attach two suffix icon with background on textfield in flutter?

I want the outcome to be like this,

enter image description here

but so far what I have achieved is

enter image description here

The 'From' tag is not an issue but the outline is.

here is code for my text field.

            TextField(
              enabled: false,
              decoration: InputDecoration(
                disabledBorder: OutlineInputBorder(
                  borderSide:
                      BorderSide(color: colorx.Colors.black, width: 0.7),
                ),
                hintText: 'YYYY-MM-DD',
                hintStyle: TextStyle(color: Colors.black12),
                suffixIcon: Container(

                  height: 58,
                  width: 80,
                  decoration:
                      BoxDecoration(color: colorx.Colors.paleGreyTwo,),


                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    // added line
                    mainAxisSize: MainAxisSize.min,
                    // added line

                    children: [
                      Image.asset(
                        "graphics/calender.png",
                      ),
                      Image.asset(
                        "graphics/refresh_date.png",
                      ),
                    ],
                  ),
                ),
              ),
              style: TextStyle(color: Colors.black),
            ),

Upvotes: 3

Views: 2086

Answers (1)

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14775

Try below code hope its help to you. just change my icons to your Images

   TextField(
                enabled: false,
                decoration: InputDecoration(
                  disabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.black, width: 0.7,),
                  ),
                  hintText: 'YYYY-MM-DD',
                  hintStyle: TextStyle(color: Colors.black12,),
                  suffixIcon: Container(
                    margin: EdgeInsets.all(1),
                    height: 58,
                    width: 100,
                    decoration: BoxDecoration(
                        color: Colors.grey,
                        border: Border(
                          left: BorderSide(
                             color: Colors.black,
                            width: 1.0,
                          ),
                        ),),
                    child: IntrinsicHeight(
                      child: Row(
                        mainAxisAlignment:
                            MainAxisAlignment.spaceEvenly,  
                        mainAxisSize: MainAxisSize.min,  
                        children: <Widget>[
                          Icon(Icons.date_range,),
                          VerticalDivider(
                            color: Colors.black,
                            thickness: 1,
                          ),
                          Icon(Icons.close,),
                        ],
                      ),
                    ),
                  ),
                ),
                style: TextStyle(
                  color: Colors.black,
                ),
              ),

Your result screen-> enter image description here

Upvotes: 3

Related Questions