如何在Flutter中将投影添加到TextFormField

时间:2019-01-15 07:27:31

标签: flutter flutter-layout

我的文本形式混乱,我想在其中添加阴影。我该怎么做?

 final password = TextFormField(
    obscureText: true,
    autofocus: false,
    decoration: InputDecoration(
        icon: new Icon(Icons.lock, color: Color(0xff224597)),
        hintText: 'Password',
        fillColor: Colors.white,
        filled: true,
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        enabledBorder: OutlineInputBorder(borderRadius:BorderRadius.circular(5.0),
        borderSide: BorderSide(color: Colors.white, width: 3.0))
     ),
   );

2 个答案:

答案 0 :(得分:2)

您可以使用TextFormField小部件包装Material并编辑其属性,例如elevationshadowColor

示例:

Material(
              elevation: 20.0,
              shadowColor: Colors.blue,
                          child: TextFormField(
                obscureText: true,
                autofocus: false,
                decoration: InputDecoration(
                    icon: new Icon(Icons.lock, color: Color(0xff224597)),
                    hintText: 'Password',
                    fillColor: Colors.white,
                    filled: true,
                    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                    enabledBorder: OutlineInputBorder(borderRadius:BorderRadius.circular(5.0),
                    borderSide: BorderSide(color: Colors.white, width: 3.0))
                ),
              ),
            )  

您将获得类似于下图的内容。
enter image description here

答案 1 :(得分:0)

使用容器小部件的投影效果

我们可以传递颜色并设置偏移值,blurRadius 和 spreadRadius。看代码

Container(
  child: TextField(
    decoration: InputDecoration(
      fillColor: Colors.white,
      filled: true,
    ),
  ),
  
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black38,
        blurRadius: 25,
        offset: const Offset(0, 10),
      ),
    ],
  ),
);