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

Flutter – How to create a Textfield with filled color and different border?

I need to create a text file in Flutter with a filled color. However, it should have a border in the editing area and a white suffix icon. See the attached screenshot of the Figma design.

In the textfiled’s fillColor property it fill whole textfiled.

Someone, please help to achieve this in flutter

enter image description here

Tags:

2

Answers


  1. 0

    Try below code hope it helps to you.

    I have take Container and TextFormField widget and wrap my TextFormField inside Container and make some changes according to your provided UI.

    Code:

    Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Text('Add Batch Number'),
          SizedBox(height: 3),
          Container(
            padding: const EdgeInsets.all(3.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              border: Border.all(
                color: Colors.grey.shade400,
              ),
            ),
            child: TextFormField(
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.grey.shade200,
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide(color: Colors.transparent),
                ),
                contentPadding:
                    EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide(color: Colors.transparent),
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide(color: Colors.transparent),
                ),
              ),
            ),
          ),
        ],
      ),
    ),

    Result Screen

    Login or Signup to reply.
  2. 0

    As you required suffixIcon and Icon in same Row use Container like below

    Use FocusNode for change border color of Container while focus on TextField

    Color borderColorContainer = Colors.grey;
final FocusNode focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    focusNode.addListener(() {
      setState(() {
        borderColorContainer = Colors.red;
      });
    });
  }

  @override
  void dispose() {
    focusNode.dispose();
    super.dispose();
  }

    Here is the Container

              Container(
             decoration: BoxDecoration(
             color: Colors.white,
             border: Border.all(color: borderColorContainer, width: 0.5),
                        borderRadius: BorderRadius.circular(5)),
              child: Row(
                     children: [
                        Expanded(
                          child: Padding(
                            padding: const EdgeInsets.all(3.0),
                            child: TextField(
                              focusNode: focusNode,
                              decoration: InputDecoration(
                                suffixIcon: Icon(Icons.arrow_downward_outlined),
                                focusedBorder: OutlineInputBorder(
                                  borderSide:
                                      BorderSide(color: Color(0xfff8f8f8)),
                                  borderRadius: BorderRadius.circular(5),
                                ),
                                enabledBorder: OutlineInputBorder(
                                  borderSide:
                                      BorderSide(color: Color(0xfff8f8f8)),
                                  borderRadius: BorderRadius.circular(5),
                                ),
                                filled: true, // Enables filled color
                                fillColor: Color(0xfff8f8f8), // Background color

                                hintText: 'Enter text',
                              ),
                            ),
                          ),
                        ),
                        SizedBox(width: 10),
                        Container(
                          padding: EdgeInsets.all(12), // Add padding if needed

                          child: Icon(
                            Icons.add,
                            color: Colors.blue, // Color of the icon
                          ),
                        ),
                        SizedBox(width: 10),
                      ],
                    ),
                  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search