如何在focused上用textFormField實現漸變邊框

Question

OutlinedInputBorder 不能接受其顏色的線性漸變。 當用戶點擊它時，我希望 textFormField 的邊框是漸變的。

這是我的嘗試。 邊界不會改變。

                      GestureDetector(
                        onTap: () {
                          setState(() {
                            borderFocused = true;
                          });
                        },
                        child: Container(
                          decoration: borderFocused
                              ? const BoxDecoration(
                                  border: GradientBoxBorder(
                                      gradient: LinearGradient(
                                  colors: [
                                    Color(0xff45a7f5),
                                    Color(0xff76c479)
                                  ],
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                )))
                              : BoxDecoration(
                                  border: Border(
                                      bottom: BorderSide(
                                          color: Color.fromARGB(
                                              30, 192, 192, 192)))),
                          child: TextFormField(
                            cursorColor: Color.fromARGB(255, 192, 192, 192),
                            style: const TextStyle(
                                color: Color.fromARGB(255, 192, 192, 192)),
                            decoration: textInputDecoration.copyWith(
                                labelStyle: const TextStyle(
                                    color: Color.fromARGB(255, 192, 192, 192)),
                                hintText: "Email",
                                prefixIcon: Icon(
                                  Icons.email,
                                  color: Theme.of(context).primaryColor,
                                )),

Answer 1

您可以使用ShaderMask完成大部分工作：

Scaffold(                                                                            
  body: Center(                                                                      
    child: ShaderMask(                                                               
      shaderCallback: (bounds) {                                                     
        return LinearGradient(colors: [Colors.red,Colors.blue]).createShader(bounds);
      },                                                                             
      child: Padding(                                                                
        padding: const EdgeInsets.all(8.0),                                          
        child: TextFormField(                                                        
          cursorColor: Color.fromARGB(255, 192, 192, 192),                           
          style: const TextStyle(color: Color.fromARGB(255, 192, 192, 192)),         
          decoration: InputDecoration(                                               
            border: OutlineInputBorder(borderSide: BorderSide(                       
            )),                                                                       
              hintText: "Email",                                                     
              prefixIcon: Icon(                                                      
                Icons.email,                                                         
                color: Theme.of(context).primaryColor,                               
              )),                                                                     
        ),                                                                            
      ),                                                                              
    ),                                                                                
  ),                                                                                  
);