I'm building a shopping app where the user can type the barcode number in the TextFormField or click on the icon/image to scan the barcode to get its number.

Is there any chance of making it like this image?

enter image description here

CodePudding user response：

I think you can use something like that;

TextFormField(
                  decoration: InputDecoration(
                      prefix: IconButton(
                        onPressed: () {
                          print("test");
                        },
                        icon: Icon(FontAwesomeIcons.searchengin),
                      ),
                      suffix: IconButton(
                        onPressed: () {
                          print("object");
                        },
                        icon: Icon(FontAwesomeIcons.searchengin),
                      )),
                )

you may add some padding and style in it.

output

CodePudding user response：

Try the following code:

TextFormField(
  decoration: InputDecoration(
    border: const OutlineInputBorder(),
    labelText: "What are you looking for?",
    hintText: "What are you looking for?",
    prefixIcon: IconButton(
      onPressed: () {
        print("Icons.search");
      },
      icon: const FaIcon(FontAwesomeIcons.magnifyingGlass),
    ),
    suffixIcon: IconButton(
      onPressed: () {
        print("Icons.qr_code_scanner");
      },
      icon: const FaIcon(FontAwesomeIcons.barcode),
    ),
  ),
),

You need to install the package font_awesome_flutter.