flutterbordertextfieldgradientflutter-design

How do I add a gradient to a TextField in Flutter?


I'm just learning flutter. Is it possible to do this in textField ? I can't find it. Example


Solution

  • Yes it is possible You need to use 2 Containers

    Container(
          child: Padding(
            padding: const EdgeInsets.all(
              1.0,
            ),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
              child: TextFormField(),
              decoration: AppColors.kInnerDecoration
                  .copyWith(borderRadius: BorderRadius.circular(8.0)),
            ),
          ),
          decoration: AppColors.kGradientBoxDecoration.copyWith(
            borderRadius: BorderRadius.circular(10),
          ),
        )
    
    static var kInnerDecoration = BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Colors.white),
        borderRadius: BorderRadius.circular(30),
      );
    
      static var kGradientBoxDecoration = BoxDecoration(
        gradient: themeGradient,
        border: Border.all(
          color: AppColors.whiteColor,
        ),
        borderRadius: BorderRadius.circular(30),
      );
    

    Output: OutPut Gradient TextField