CODEWITHSUNDEEP
fluttertextformfield
abc
abc

Reputation: 126

Alignment vertically suffixIcon/prefixIcon in textformfield and textform in flutter

I have tried to change TextFormField prefix icon alignment, but flutter don't have a property for this. enter image description here

My code:

TextFormField(
      keyboardType: TextInputType.multiline,
      style: typography.titleMedium,
      validator: (value) {
        if (value.isNullOrEmpty) {
          _shakeDescKey.currentState?.shake();
          return "";
        }
        bloc.onChangeDescription(value!);
        return null;
      },
      decoration: InputDecoration(
        hintText: intl.descMsg,
        hintStyle: typography.titleMedium!
            .apply(color: AppColors.black.withOpacity(0.5)),
        prefixIcon: Icon(FontAwesomeIcons.pen),
      cursorColor: Colors.black,
      maxLines: 6,
 );

I need a property to align vertically prefix icon

Upvotes: 0

Views: 81

Answers (3)

anas taha
anas taha

Reputation: 11

Align(
                  alignment: (widget.maxLines ?? 1) <= 1 ? Alignment.center : Alignment.topCenter,
                  widthFactor: 1,
                  heightFactor: (widget.maxLines ?? 1) <= 1 ? 1 : 1 + ((widget.maxLines ?? 1) - 1) * 0.8333,
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(10.sp, 0.sp, 10.sp, 0),
                    child: CustomImage(
                      assetImg: widget.customPreIcon!,
                      color: AppColors.mainColor,
                      height: 25.h,
                    ),
                  ),
                )

you can check result here

Upvotes: 1

ahmed elkhyary
ahmed elkhyary

Reputation: 1341

This is a solution will help you , If you find another better solution, you can add it here

you will give to prefixIcon widget like const SizedBox()

and then wrap TextFormField with a Stack

and use icon as widget like below code

    Positioned(
          top: 21,
          right:14,
          left: 14,
             child:  SvgPicture.asset(
             your icon,
             height: 17,
             width: 17,
               ),
                  )

THIS OUTPUT

Upvotes: 1

Thabet Alsaleh
Thabet Alsaleh

Reputation: 149

Wrap Icon widget in Column:

prefixIcon: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
               Icon(FontAwesomeIcons.pen),
          ),

Upvotes: 2

Related Questions