Flutter - 如何在焦点上的 TextFormField 中添加阴影答案

【问题标题】：Flutter - How to add shadow in TextFormField on focusFlutter - 如何在焦点上的 TextFormField 中添加阴影
【发布时间】：2020-06-18 02:38:01
【问题描述】：

在 Flutter 中对焦时如何在 TextFormField 中添加阴影？我希望该字段具有这种外观：

到目前为止，我在对焦时设法应用了边框，但我没有看到任何应用阴影的选项：

TextFormField(
  decoration: InputDecoration(
      fillColor: Colors.white,
      hoverColor: Colors.white,
      filled: true,
      enabledBorder: OutlineInputBorder(borderSide: BorderSide.none),
      focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.grey, width: 1))),
);

关于如何获得这种效果的任何想法？

【问题讨论】：

您可以尝试将TextFormField 包裹在Material 中并更改Material 的高度
@Ovidiu 这种方法的问题是，即使小部件没有聚焦并且我不希望那样，我也会得到阴影。仅在聚焦输入时应用阴影。无论如何，谢谢。
可以通过Material的elevation来控制Material的影子。 0 的 elevation 将不会产生阴影。使用TextFormField 的FocusNode 上的侦听器来更改字段聚焦时Material 的高度 - 我猜您已经在使用相同的机制来更改边框。

标签： flutter flutter-widget

【解决方案1】：

重要：用Form 小部件包装您的TextField 并分配_formKey 它有助于防止在setState()之后关闭键盘

完整示例：

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Home(),
      ),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  static GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
  FocusNode focusNode;

  @override
  void initState() {
    super.initState();
    focusNode = FocusNode();
    focusNode.addListener(() => setState(() {}));
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(seconds: 5),
      margin: const EdgeInsets.all(16),
      decoration: focusNode.hasFocus ? BoxDecoration(boxShadow: [BoxShadow(blurRadius: 6)]) : null,
      child: Form(
        key: _formKey,
        child: TextFormField(
          focusNode: focusNode,
          decoration: InputDecoration(
              fillColor: Colors.white,
              hoverColor: Colors.white,
              filled: true,
              enabledBorder: OutlineInputBorder(borderSide: BorderSide.none),
              focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey, width: 1))),
        ),
      ),
    );
  }
}

https://imgur.com/a/9vcdvoM

【讨论】：

但是当出现错误时，boxshadow 也会显示在 errortext 后面。那么你能给出任何解决方案吗？谢谢

【解决方案2】：

试试这个：

 Container(
            decoration: BoxDecoration(
              boxShadow:  [new BoxShadow(
                color: Colors.black,
                blurRadius: 5.0, // You can set this blurRadius as per your requirement
              ),]
            ),
            child: TextFormField(
              decoration: InputDecoration(
                  fillColor: Colors.white,
                  hoverColor: Colors.white,
                  filled: true,
                  enabledBorder: OutlineInputBorder(borderSide: BorderSide.none),
                  focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.grey, width: 1))),
            ),
          ),

【讨论】：

感谢您的回答。问题是，即使输入没有聚焦，阴影仍然存在，只有当它获得焦点时我才需要它。
@JuanCarlosMendoza 检查这个stackoverflow.com/a/59376873/11404883