颤振如何在文本字段上添加阴影

Question

我需要在文本框上添加阴影

我的代码

TextField(
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.blueAccent,
                ),
                decoration: InputDecoration(
                    contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                    prefixIcon: Image.asset('assets/searchIcon@2x.png'),
                    hintText: "Search services",
                    border: OutlineInputBorder(
                        borderSide:
                        BorderSide(color: Colors.white, width: 32.0),
                        borderRadius: BorderRadius.circular(25.0),
                    ),
                    focusedBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Colors.white, width: 32.0),
                        borderRadius: BorderRadius.circular(25.0))))

我也想更改白色文本的内部颜色

想要实现这样的目标

Answer 1

您可以在下面尝试类似的操作，也可以将TextField用Container包装，然后使用BoxDecoration-> BoxShadow向其添加下拉阴影：< / p>

      Material(
              elevation: 20.0,
              shadowColor: Colors.blue,
                          child: TextField(
                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))
                ),
              ),
            )  

Answer 2

您可以使用Material包装TextField小部件。材质具有有关阴影的属性。您可以像这样使用它：

        Material(
          elevation: 3.0, // Set here what you wish!
          shadowColor: Colors.grey,
           child: TextField(
            style: TextStyle(
              fontSize: 25.0,
              color: Colors.blueAccent,
            ),
            decoration: InputDecoration(
                contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                prefixIcon: Image.asset('assets/searchIcon@2x.png'),
                hintText: "Search services",
                border: OutlineInputBorder(
                    borderSide:
                    BorderSide(color: Colors.white, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0),
                ),
                focusedBorder: OutlineInputBorder(
                    borderSide:
                        BorderSide(color: Colors.white, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0))))

Answer 3

我可以给你个主意。尝试这样的事情，

Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(25.0),
                boxShadow: [
                  BoxShadow(
                    offset: Offset(0,5),
                    blurRadius: 10.0,
                    color: Colors.black.withOpacity(0.5),
                  ),
                ],
              ),
              child: TextField(
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.blueAccent,
                ),
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                  prefixIcon: Image.asset('assets/searchIcon@2x.png'),
                  hintText: "Search services",
                  border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.white, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.white, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0),
                  ),
                ),
              ),
            ),

使用color和offset值，您将获得所需的输出！

希望能满足您的情况！