如何在文本欄位Flutter中創建內陰影？-有解無憂

我想創建應該在圖片上看起來像這樣的文本欄位。正如我所理解的，它通過內部陰影創建以達到圖片上的效果。我怎樣才能重新創建這個？我試圖撰寫這樣的代碼，但它看起來也不像我想要的那樣。

如何在文本欄位 Flutter 中創建內陰影？

我試過的代碼：

 Container(
                            width: 450,
                            height: 50,
                            decoration: BoxDecoration(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(5))),
                            padding: EdgeInsets.all(10),
                            child: Container(
                              padding: EdgeInsets.zero,
                              decoration: BoxDecoration(
                                  color: Colors.indigoAccent,
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(8)),
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.blue,
                                        blurRadius: 2,
                                        spreadRadius: 2)
                                  ]),
                              width: double.infinity,
                              height: 20,
                              child: Center(
                                child: Text("Content goes here"),
                              ),
                            ))

uj5u.com熱心網友回復：

你可以試試：

Container(
      decoration: ShapeDecoration(
        gradient: LinearGradient(
          colors: [Color(0xFFe6dfd8), Color(0xFFf7f5ec)],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          stops: [0.0, 0.4],
          tileMode: TileMode.clamp,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(32.0)),
        ),
      ),
      child: TextField(
          expands: false, 
            style: TextStyle(fontSize: 20.0, color: Colors.black54),
            decoration: InputDecoration(
              contentPadding: EdgeInsets.all(12.0),
              prefixIcon: Icon(
                Icons.email,
                color: Colors.black54,
              ),
              hintText: 'email',
              hintStyle: TextStyle(color: Colors.black54),
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.white),
                borderRadius: BorderRadius.circular(32.0),
              ),
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.white),
                borderRadius: BorderRadius.circular(32.0),
              ),
            ),
          ),
    );

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/494750.html

標籤：扑镖

上一篇：顫振：在位置使用索引，堆疊父級

下一篇：如何防止序列化為Json空值？