Home > Back-end >  How to add two or more icons to a textField?
How to add two or more icons to a textField?

Time:08-20

I have a text field with a value. But I ran into a problem that I need to add icons next to the value in addition to the value. I can add one icon using suffixIcon. But I will need to add 3 icons, sometimes add 2 icons but I don't know how to add more than one icon to the text field?

Widget _defaultTextfield(
    bool enabled,
    TextInputType? type,
    String hint,
    String val,
    BuildContext context,
  ) {
    final MycarsCubit cubit = BlocProvider.of<MycarsCubit>(context);
    return SizedBox(
      height: 58,
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        color: constants.Colors.greyMiddle,
        child: Row(
          children: [
            Flexible(
              child: TextField(
                style: constants.Styles.smallTextStyleWhite,
                keyboardType: type,
                controller: TextEditingController(text: '$val kW'),
                onChanged: (value) {
                  cubit.change(
                    carModelNew: cubit.carModel,
                    idText: cubit.id,
                    modelText: cubit.model,
                    numberText: value,
                    typeText: cubit.type,
                    yearText: cubit.year,
                    chargeSpeedText: cubit.chargeSpeed,
                    connectorText: cubit.connector,
                    batteryCapacityText: cubit.batteryCapacity,
                    mainNew: cubit.main,
                  );
                },
                decoration: InputDecoration(
                  border: InputBorder.none,
                  enabled: enabled,
                  contentPadding: const EdgeInsets.all(8),
                  labelText: hint,
                  labelStyle: constants.Styles.textFieldLabelLightGreyStyle,
                  suffixIcon: const Icon(Icons.bolt),
                  suffixIconConstraints: BoxConstraints(
                    maxHeight: 10
                  )
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Now I have

enter image description here

I need to add lightning icons

enter image description here

CodePudding user response:

You can do this:

TextField(
              decoration: InputDecoration(
                  suffixIcon: Row(
                children: [
                  Icon(Icons.bolt),
                  value == 10 ? Icon(Icons.bolt):SizedBox(),
                  
                ],
              )),
            )
  • Related