Есть ли способ поднять виджет во флаттере без использования материального виджета?

Question

Я создаю виджет поиска и хочу, чтобы он немного приподнялся. Я могу сделать это с помощью виджета Материал, но у материала есть и другие свойства, такие как цвет, и он создает странные края, когда я оборачиваю свой контейнер виджетом материала.

Widget search(BuildContext context) {
  var theme = Provider.of<ThemeNotifier>(context);
  return Container(
    margin: EdgeInsets.only(top: 28, left: 10, right: 10),
    child: Material(
      elevation: 10,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: theme.getTheme().materialTheme.buttonColor,
        ),
        padding: EdgeInsets.all(10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            InkWell(onTap: () => print("Menu tapped"), child: Icon(Icons.menu)),
            Expanded(
              child: TextField(
                decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(left: 15, right: 15),
                    hintText: "Search City",
                    filled: false,
                    border: InputBorder.none),
              ),
            ),
            Icon(Icons.search),
          ],
        ),
      ),
    ),
  );
}

вот как выглядит мой виджет:

Answer 1

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

  Widget search(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 28, left: 10, right: 10),
      child: Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(blurRadius: 5.0, spreadRadius: 1.0, color: Colors.grey.shade400)
            ],
            borderRadius: BorderRadius.circular(20),
            color: Colors.grey.shade200,
          ),
          padding: EdgeInsets.all(10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              InkWell(onTap: () => print("Menu tapped"), child: Icon(Icons.menu)),
              Expanded(
                child: TextField(
                  decoration: InputDecoration(
                      contentPadding: EdgeInsets.only(left: 15, right: 15),
                      hintText: "Search City",
                      filled: false,
                      border: InputBorder.none),
                ),
              ),
              Icon(Icons.search),
            ],
          ),
        ),
    );
  }

^ Замените цвета из вашего поставщика темы.

Answer 2

Если вы действительно не хотите использовать виджет материала, вы можете избавиться от него и заменить контейнер на виджет карты. Таким образом, вы также можете указать высоту, так как Card имеет это свойство, и вам также придется указать форму, если вам не нравится радиус закругленных углов по умолчанию.

Answer 3

Вы все еще можете использовать Материал, чтобы обернуть виджет без этих нежелательных краев. Все, что вам нужно сделать, это указать свойство shape для вашего виджета Material, в вашем случае с RoundedRectangleBorder, например:

Widget search(BuildContext context) {
  var theme = Provider.of<ThemeNotifier>(context);
  return Container(
    margin: EdgeInsets.only(top: 28, left: 10, right: 10),
    child: Material(
      shape: RoundedRectangleBorder(  // Add these lines
                  borderRadius: BorderRadius.circular(22.0),), // change radius to whatever you want
      elevation: 10,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: theme.getTheme().materialTheme.buttonColor,
        ),
        padding: EdgeInsets.all(10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            InkWell(onTap: () => print("Menu tapped"), child: Icon(Icons.menu)),
            Expanded(
              child: TextField(
                decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(left: 15, right: 15),
                    hintText: "Search City",
                    filled: false,
                    border: InputBorder.none),
              ),
            ),
            Icon(Icons.search),
          ],
        ),
      ),
    ),
  );
}

Вы можете сделать то же самое с CircleBorder(), например, если вы хотите обернуть что-то вроде CircleAvatar или что-то еще.

Примечание. Тень для этого будет отображаться только в том случае, если у вас также указано значение высоты больше 0.