Question 76120 in Flutter Question posted in
The official Flutter documentation can be found here.

How to design inline button in the text field using flutter

Good day! i’m trying to put an inline button on the text field for my "get a code" function but no success. i tried to search for some tutorials but never met or found what i’m looking for. i’m using vscode for my IDE.

[Get a Code button] [1]: https://i.stack.imgur.com/pPhiP.png

here’s my code for that particular text field:

const SizedBox(height: 10),
    TextField(
      decoration: InputDecoration(
          hintText: "Code",
          border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(30),
              borderSide: BorderSide.none),
          fillColor: Colors.grey.withOpacity(0.3),
          filled: true,
          prefixIcon: const Icon(Icons.code)),
      obscureText: true,
    ),
Tags:

2

Answers


  1. 0

    You could assign any widget to suffix property.
    You could use InkWell, Gesturedetector, TextButton()

    TextField(
              decoration: InputDecoration(
                hintText: "Code",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(30),
                  borderSide: BorderSide.none,
                ),
                fillColor: Colors.grey.withOpacity(0.3),
                filled: true,
                suffix: InkWell(
                  child: Container(                    
                    decoration: BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.circular(
                        30,
                      ),
                    ),
                    child: Text(
                      'Get a Code',
                      style: TextStyle(
                        color: Colors.red,
                      ),
                    ),
                  ),
                  onTap: () {
                    print('Code sent');
                  },
                ),
                prefixIcon: const Icon(
                  Icons.code,
                ),
              ),
              obscureText: true,
            ),
    Login or Signup to reply.
  2. 0

    I’m Try To solve Your Problem :

    Here is Code

          return Scaffold(
              backgroundColor: Colors.white,
              body: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
        
                
                  Container(
                    padding: EdgeInsets.symmetric(vertical: 0.0,horizontal: 10.0),
                    decoration: BoxDecoration(
                      color: Colors.grey[200],
                      borderRadius: BorderRadius.circular(25.0),
                    ),
                    child: Row(
                      children: [
        
                        Expanded(
                          child: Padding(
                            padding: const EdgeInsets.symmetric(
                              vertical: 0
                            ),
                            child: TextField(
                              decoration: InputDecoration(
                                hintText: "Code",
                                  border: InputBorder.none,
                                prefixIcon: const Icon(
                                  Icons.code,
                                ),
                              ),
                            ),
                          ),
                        ),
                        Container(
                          height: 50,
                          width: 110,
                          alignment: Alignment.center,
                          padding: const EdgeInsets.symmetric(
                            horizontal: 1,
                          ),
                          decoration: BoxDecoration(
        
                            color: Colors.green,
                            borderRadius: BorderRadius.circular(25.0),
                          ),
                          child: Text(
                            "Get A Code",
                            style: TextStyle(
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            )

;

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search