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

flutter prefix with background color

Hi here is my code i want to create a prefix like the image i attached

`class NumberFiled extends StatelessWidget {
  const NumberFiled({Key? key, required this.lebal}) : super(key: key);
  final String lebal;
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "$lebal*",
              style: const TextStyle(color: whiltetextcolor),
            ),
            const SizedBox(
              height: 15,
            ),
            TextField(
              style: const TextStyle(color: secondarycolor),
              keyboardType: TextInputType.number,
              cursorColor: secondarycolor,
              decoration: InputDecoration(
                prefix: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  color: secondarycolor,
                  child: const Text("+91"),
                ),
                focusedBorder: const OutlineInputBorder(
                    borderSide: BorderSide(color: whiltetextcolor)),
                enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide(color: whiltetextcolor, width: .2)),
              ),
            ),
          ],
        ));
  }
}`

enter image description here

Hi here is my code i want to create a prefix like the image i attached

Tags:

2

Answers


  1. 0

    Widget _CountryCodeLabel() is your Country Code where you can set the color to the widget container.

    Widget _NumberInput() is your TextField

    Row(crossAxisAlignment:CrossAxisAlignment.center,
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: [
                                        SizedBox(width: 6),
                                        _CountryCodeLabel(),
                                        VerticalDivider(
                                          color: Colors.grey,
                                          width: 1,
                                          thickness: 1,
                                        ),
                                        SizedBox(width: 8),
                                        Expanded(
                                          flex: 1,
                                          child: _NumberInput(),
                                        ),
                                      ],
                                    )
    Login or Signup to reply.
  2. 0 
    class NumberFiled extends StatelessWidget {
  const NumberFiled({Key? key, required this.lebal}) : super(key: key);
  final String lebal;
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              "$lebal*",
              style: const TextStyle(color: Colors.white),
            ),
            const SizedBox(
              height: 15,
            ),
            TextField(
              style: const TextStyle(color: Colors.amber),
              keyboardType: TextInputType.number,
              cursorColor: Colors.amber,
              decoration: InputDecoration(
                isDense: true,
                contentPadding: const EdgeInsets.all(0),
                prefixIcon: Container(
                  height: 50,
                  width: 50,
                  padding: const EdgeInsets.all(3),
                  margin: const EdgeInsets.all(1),
                  decoration: const BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(2),
                      bottomLeft: Radius.circular(2),
                    )
                  ),
                  child: const Center(child: Text("+91")),
                ),
                focusedBorder: const OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.white)),
                enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.white, width: .2)),
              ),)
          ],
        ));
  }
}

    Change you prefix to prefixIcon and give height and width of the Container in prefixIcon. Hope this will help you

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

Back To Top
Search