Удалить горизонтальную тень виджета Материал во флаттере

Question

После добавления elevation в Material виджет я хочу сохранить только нижнюю тень. Не хочу левой и правой стороны тени. Как этого добиться?

Вот мой код:

        // searchbar
        child: Material(
          color: Colors.transparent,
          elevation: 5.0,
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 10.0),
            color: AppColors.searchBoxColor,
            child: Row(
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.arrow_back),
                  onPressed: () {},
                ),
                // searchfield
                Expanded(
                  child: Container(
                    alignment: Alignment.center,
                    height: AppBar().preferredSize.height,
                    child: TextField(
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "Hint Text",
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),

Answer 1

Вы не можете сделать это с elevation, потому что это неизбежно отбрасывает тени, как будто лист бумаги поднимается в воздух.

Что вы можете сделать, это добавить собственную тень, используя BoxShadow , Например, если вы используете RaisedButton, вы можете перейти на FlatButton с Container с BoxDecoration. Вот пример этого:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              RaisedButton(
                child: Text('Button With Elevation'),
                textColor: Colors.white,
                color: Colors.red,
                onPressed: () {},
                elevation: 12.0,
              ),
              SizedBox(
                height: 32.0,
              ),
              Container(
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      offset: Offset(0.0, 6.0),
                      color: Colors.grey.withOpacity(0.3),
                      blurRadius: 5.0,
                    ),
                  ]
                ),
                child: FlatButton(
                  child: Text('Button With Custom Shadow'),
                  textColor: Colors.white,
                  color: Colors.red,
                  onPressed: () {},
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

И вот результат:

Указав значения вашего Offset Вы можете изменить направление, куда будет отбрасываться тень.

ОБНОВЛЕНИЕ:

Я видел ваш код позже. Вот как вы реализуете BoxShadow с вашим кодом:

child: Material(
  color: Colors.transparent,
  elevation: 0.0,
  child: Container(
    decoration: BoxDecoration(
      color: AppColors.searchBoxColor,
      boxShadow: [
        BoxShadow(
          offset: Offset(0.0, 12.0),
          color: Colors.grey.withOpacity(0.3),
          blurRadius: 5.0,
        ),
      ],
    ),
    margin: EdgeInsets.symmetric(horizontal: 10.0),
    child: Row(
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {},
        ),
        Expanded(
          child: Container(
            alignment: Alignment.center,
            height: AppBar().preferredSize.height,
            child: TextField(
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: "Hint Text",
              ),
            ),
          ),
        ),
      ],
    ),
  ),
),

Answer 2

Вы можете настроить тень, используя свойство контейнера BoxShadow, вот пример:

Container(
    decoration: BoxDecoration(
      color: Colors.white,
      boxShadow: [
        BoxShadow(
          offset: Offset(0, 5),
          blurRadius: 5,
          color: Colors.grey,
        ),
     ],
   ),
 ),