Is there any way to elevate a widget in flutter without using material widget?

Question

I am creating a search widget and I want it to have a little bit of elevation, I can do that by using Material widget but Material has other properties like color as well and it creates weird edges when i wrap my container with material 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),
          ],
        ),
      ),
    ),
  );
}

here is how my widget looks like:

Solution

As a workaround, you may use a BoxShadow instead of Material elevation.

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

^ Replace colors from your theme provider.

Comments

[Dan Crisan]

You can further simplify your code there by removing the Row widget and adding to your InputDecoration of your TextField a suffixIcon and prefixIcon. As an example you can take a look here: stackoverflow.com/a/50123879/10544887 See if that also works for you.

[Mateen Kiani]

Thanks It does work but let's see if we can get a better solution.