dart 我想在Flutter中的TextFormField小部件中加入一个内部阴影效果,它位于顶部

jdzmm42g  于 2023-03-27  发布在  Flutter
关注(0)|答案(2)|浏览(119)

我想在Flutter中的TextFormField小部件中加入一个内部阴影效果,位于顶部。

  • 以下是我想要达到的目标

下面是我的输入widget代码:

TextFormField(
          style: TextStyle(color: Colors.white),
          //initialValue: initialValue,
          decoration: const InputDecoration(
            filled: true,
            fillColor:Color(0xFF28B4D2),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(96.0)),
              borderSide: BorderSide.none,
            ),
            labelText: "Name",
            // color from hex code.
            focusColor:Color(0x28B4D2),
            labelStyle: TextStyle(color: Colors.white),
            
        ),
        ),

我已经尝试使用inner_shadow_widget插件如下

Container(
      child: 
        InnerShadow(
        blur: 9,
        offset: const Offset(2, 2),
        color: const Color(0xFFFFFFFF).withOpacity(1),

        child: TextFormField(
          style: TextStyle(color: Colors.white),
          //initialValue: initialValue,
          decoration: const InputDecoration(
            filled: true,
            fillColor:Color(0xFF28B4D2),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(96.0)),
              borderSide: BorderSide.none,
            ),
            labelText: "Name",
            // color from hex code.
            focusColor:Color(0x28B4D2),
            labelStyle: TextStyle(color: Colors.white),
            
        ),
        ),
          
        ),
      ),

但它不起作用。
P.S帮助我实现这一点。

p5fdfcr1

p5fdfcr11#

TextFormField隐藏了InnerShadow,您可以使用Padding将TextFormField向下移动一点,以在其顶部显示InnerShadow。

Container(
      child: 
        InnerShadow(
        blur: 9,
        offset: const Offset(2, 2),
        color: const Color(0xFFFFFFFF).withOpacity(1),

        child: Padding(
           padding: const EdgeInsets.only(top: 4.0),
           child: TextFormField(

希望这个有用。

0yg35tkg

0yg35tkg2#

您可以使用LinearGradient实现,而无需使用任何包。

Container(
        width: 200,
        height: 45.0,
        decoration: GradientButtonDecoration(),
        // ignore: deprecated_member_use
        child: ElevatedButton(
          onPressed: () {},
          style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                borderRadius:
                    BorderRadius.circular(96.0), // Set border radius here
              ),
            ),
            backgroundColor: MaterialStateProperty.all<Color>(
              Colors.transparent,
            ),
          ),
          child: Center(
            child: Text(
              "Company Name",
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),

这是一个GradientButtonDecoration类,你可以根据自己的意愿选择颜色。

class GradientButtonDecoration extends BoxDecoration {
  static Map<int, Color> accentSwatch = {
    50: Color.fromRGBO(31, 142, 165, 0.10196078431372549),
    100: Color.fromRGBO(92, 181, 201, .2),
    200: Color.fromRGBO(36, 100, 212, .3),
    300: Color.fromRGBO(36, 165, 193, .4),
    400: Color.fromRGBO(44, 180, 212, .5),
    500: Color.fromRGBO(36, 180, 212, .6),
    600: Color.fromRGBO(64, 184, 228, .7),
    700: Color.fromRGBO(154, 212, 224, .8),
    800: Color.fromRGBO(82, 196, 219, .9),
  };
  GradientButtonDecoration()
      : super(
    borderRadius: BorderRadius.all(Radius.circular(96.0)),
    gradient: LinearGradient(
      begin: Alignment.bottomLeft,
      colors: [
        accentSwatch[300]!,
        accentSwatch[500]!,
        accentSwatch[600]!,
        accentSwatch[800]!,
      ],
    ),
  );
}

相关问题