在文本字段内添加阴影 Flutter

问题描述 投票:0回答:1

我有这样的设计,我想在我的应用程序中使用,但我不太清楚如何添加盒子的阴影。阴影是在TextField的内部......请谁能给我一些帮助,并指出我在正确的方向上如何做到这一点?

The design I'd like top replicate

(方框阴影在TextField的顶部)

干杯,杰克

flutter flutter-layout
1个回答
0
投票

你可以使用一个容器作为背景来实现,例如使用一个 线性梯度 你可以得到这样的东西。

enter image description here

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

你可以用 径向梯度, a 盒影 或者如@Jakk所说的新形态。

希望对你有帮助。

© www.soinside.com 2019 - 2024. All rights reserved.