Flutter 如何在文本输入字段上添加 box-shadow 或 drop-shadow？

Question

我认为这是不可能的，但我想我会问，看看是否有人对此有解决方案我想在文本输入字段中添加 box-shadow 或 drop-shadow，但我不希望它得到使用错误文本或提示文本时搞砸了。附上显示问题的屏幕截图。我尝试了材质，物理模式，容器仍然一团糟

Answer 1

也许你可以试试这个

Padding(
          padding: const EdgeInsets.only(
              left: 16, right: 16, bottom: 16, top: 8),
          child: Container(
            height: 48,
            decoration: BoxDecoration(
              color: Colors.red.shade300,
              borderRadius: const BorderRadius.all(Radius.circular(24.0)),
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.grey.withOpacity(0.6),
                  blurRadius: 8,
                  offset: const Offset(4, 4),
                ),
              ],
            ),
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                borderRadius: const BorderRadius.all(Radius.circular(24.0)),
                highlightColor: Colors.transparent,
                onTap: () {
                  yourfunction();
                },
                child: Center(
                  child: loadingButton
                      ? SizedBox(
                          height: 30.0,
                          width: 30.0,
                          child: CircularProgressIndicator(
                            valueColor:
                                AlwaysStoppedAnimation(Colors.white),
                          ),
                        )
                      : Text(
                          'Apply',
                          style: TextStyle(
                              fontWeight: FontWeight.w500,
                              fontSize: 18,
                              color: Colors.white),
                        ),
                ),
              ),
            ),
          ),
        )

Answer 2

这可能不是最优雅的方式，但你可以修改如下：

Stack(
  children: [
    Container(
      height: 40.0,
      width: 200.0,
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
              color: Colors.black.withOpacity(0.3),
              spreadRadius: 4,
              blurRadius: 12,
              offset: Offset(0, 8),
          ),
        ],
      ),
    ),
    Container(
      width: 200.0,
      child: TextFormField(
        decoration: InputDecoration(
          filled: true,
          fillColor: Colors.white,
          hintText: 'Name',
          errorText: 'Field cannot be empty',
        ),
      ),
    ),
  ],
);