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

How to make a textformfield circular in flutter?

I’m making a circular textformfield, but the text ends up leaving the circle, I wanted it to stay inside the circle but it ends up leaving

enter image description here

Container(
    height: 300,
    width: 300,
    padding: const EdgeInsets.all(5),
    decoration: BoxDecoration(
      color: Colors.amber,
        shape: BoxShape.circle,
    ),
   child:TextFormField(
       expands: true,
       maxLines: null,
       textAlign: TextAlign.center,
       textAlignVertical: TextAlignVertical.center,
       keyboardType: TextInputType.multiline,
       decoration: InputDecoration(
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(500)),
        filled: false,
        ),
   );
),
Tags:

2

Answers


  1. 0

    Simply wrap the TextFormField with an ClipRRect

    Container(
                            height: 300,
                            width: 300,
                            padding: const EdgeInsets.all(5),
                            decoration: BoxDecoration(
                              color: Colors.amber,
                              shape: BoxShape.circle,
                            ),
                            child:ClipRRect(
                              child: TextFormField(
                                expands: true,
                                maxLines: null,
                                textAlign: TextAlign.center,
                                textAlignVertical: TextAlignVertical.center,
                                keyboardType: TextInputType.multiline,
                                decoration: InputDecoration(
                                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(500)),
                                  filled: false,
                                ),
                              ),
                            )

    ) )

    Login or Signup to reply.
  2. 0

    Just wrap TextFormField with Container and give border radius to Container and apply InputBorder.none in decoration of TextFormFiels

    Ex :-

    Container(

        decoration: BoxDecoration(
        color: Color.fromRGBO(173, 239, 209, 1),
        border: Border.all(color: Colors.grey, width: 2),
        borderRadius: BorderRadius.circular(28)),
    child: TextFormField(
      decoration: InputDecoration(
          hintText: "Enter a number", border: InputBorder.none),
    ),

    ),

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

Back To Top
Search