How to show a text along textfield data like this in flutter-CodePudding

How to show a constant text in textfield in Flutter along with typed data like in this picture.

CodePudding user response：

you can use like this:

class TextFieldExample extends StatelessWidget {
  const TextFieldExample({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    TextEditingController? controller;
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(20),
        child: TextField(
          controller: controller,
          decoration: InputDecoration(
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(15.0),
            ),
            filled: true,
            hintText: '1(qty)',
            prefixIcon: Icon(Icons.watch),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

You can use String Interpolation. Using $ to access variable in Text Widget.

  @override
  Widget build(BuildContext context) {
    double quantity = 1;
    return Row(
      children: [
        Icon(Icons.production_quantity_limits_outlined),
        SizedBox(
          width: 20,
        ),
        Text("$quantity (qty)"),
      ],
    );
  }

CodePudding user response：

Use hintText if you want when user click and type this disappear and use prefixIcon

TextField(
  decoration: InputDecoration(
    hintText: '1(qty)' // this can be data just pass string here with $
    prefixIcon: Icon...
  ),
),

CodePudding user response：

 class Example extends StatelessWidget {
 const Example({super.key});
 @override
 Widget build(BuildContext context) {
   double quantity = 1;
   return TextField(
     decoration: InputDecoration(
       label: Text("$quantity (qty)"),
       border: OutlineInputBorder()
     ),
   );
 }
}