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

ymzxtsji  于 2023-02-09  发布在  Flutter
关注(0)|答案(4)|浏览(218)

我需要在文本域中添加阴影
我的代码

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))))

我还想改变白色文本的内部颜色
想要实现这样的目标

sgtfey8w

sgtfey8w1#

你可以尝试类似下面这样的东西,或者你可以用Container Package 你的TextField,并使用BoxDecoration--〉BoxShadow添加下拉阴影到它:

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))
                ),
              ),
            )
9rnv2umw

9rnv2umw2#

你可以用Material Package 你的TextField小部件。Material有关于阴影的属性。你可以像这样使用它:

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))))
m528fe3b

m528fe3b3#

我可以给予你个主意。试试这样,

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),
                  ),
                ),
              ),
            ),

玩弄coloroffset的值,你会得到所需的输出!
希望这适合你的情况!

gdx19jrr

gdx19jrr4#

Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(6),
                      boxShadow: const [
                        BoxShadow(
                          color: Colors.grey,
                          blurRadius: 10.0, // soften the shadow
                          spreadRadius: 1.0, //extend the shadow
                          offset: Offset(
                            1.0, // Move to right 5  horizontally
                            1.0, // Move to bottom 5 Vertically
                          ),
                        )
                      ]),
                  child: Row(
                    children: [
                      Expanded(
                        child: TextField(
                            decoration: InputDecoration(
                                focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(6),
                                    borderSide: const BorderSide(
                                      color: Colors.transparent,
                                    )),
                                disabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(6),
                                    borderSide: const BorderSide(
                                      color: Colors.transparent,
                                    )),
                                enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(6),
                                    borderSide: const BorderSide(
                                      color: Colors.transparent,
                                    )),
                                fillColor: Colors.white,
                                filled: true,
                                hintText: "Search by Jewelers Name",
                                border: InputBorder.none,
                                hintStyle:
                                    const TextStyle(color: Colors.grey))),
                      ),
                    ],
                  ),
                ),

相关问题