CODEWITHSUNDEEP
flutterflutter-layout
Mrinal Jain
Mrinal Jain

Reputation: 927

Flutter - How to make a custom input field with custom prefix design?

How to make a custom input field with custom prefix design?e like the image below

custom Input

I tried a lot for it but I can't make the prefix part inside the input

Upvotes: 0

Views: 1278

Answers (2)

Diksha Pruthi
Diksha Pruthi

Reputation: 354

enter image description here

Add dependency for country code picker

enter image description here

 Row(
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        Container(
                            padding: EdgeInsets.symmetric(horizontal: 24),
                            width: MediaQuery.of(context).size.width - 127,
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(30),
                                    bottomLeft: Radius.circular(30))),
                            margin: EdgeInsets.only(top: 16),
                            child: TextFormField(
                                controller: _phoneNumberController,
                                keyboardType: TextInputType.phone,
                                decoration: InputDecoration(
                                    border: InputBorder.none,
                                    hintText: "Phone",
                                    hintStyle: TextStyle(
                                        color: CustomColors.LightGrey,
                                        fontWeight: FontWeight.w100)))),
                        VerticalDivider(
                          width: 0.2,
                          color: Colors.grey,
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 16),
                          decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.only(
                                  topRight: Radius.circular(30),
                                  bottomRight: Radius.circular(30))),
                          child: CountryCodePicker(
                            initialSelection: 'IN',
                            hideMainText: false,
                            showFlag: false,
                          ),
                        ),
                      ],
                    ),

Upvotes: 2

TheMisir
TheMisir

Reputation: 4279

You could use prefixIcon property of InputDecorator to display somethig.

TextField(
  decoration: InputDecoration(
    prefixIcon: SizedBox(
      width: 50,
      child: Center(
        child: Text(
          '+91',
          style: TextStyle(color: Colors.black),
        ),
      ),
    ),
  ),
),

You could also use prefix property but the text will disappear if text field is not focused.

If you want to add line after the prefix you could replace SizedBox with Container instead. And use border property.

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    prefixIcon: Container(
      width: 50,
      margin: EdgeInsets.only(right: 10),
      decoration: BoxDecoration(
        border: Border(
          right: BorderSide(
            color: Color(0xFF272727),
            width: 1,
          ),
        ),
      ),
      child: Center(
        child: Text(
          '+91',
          style: TextStyle(color: Colors.black),
        ),
      ),
    ),
  ),
),

Upvotes: 0

Related Questions