Есть ли способ повысить виджет во флаттере без использования виджета материала? - PullRequest
Новая
       73

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

1 голос
/ 23 января 2020

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

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

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

enter image description here

1 Ответ

1 голос
/ 23 января 2020

В качестве обходного пути вы можете использовать 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),
            ],
          ),
        ),
    );
  }

^ Заменить цвета у провайдера тем.

...