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:

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: https://stackoverflow.com/a/50123879/10544887 See if that also works for you. — Dan Crisan, Aug 27 '20 at 09:55

score 4 · Answer 1 · answered Jan 23 '20 at 07:42

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.

Thanks It does work but let's see if we can get a better solution. — Mateen Kiani, Jan 23 '20 at 09:58

score 0 · Answer 2 · answered Aug 27 '20 at 09:41

You can still use Material to wrap your widget without having those unwanted edges. All you need to do is to specify the shape property for your Material widget, in your case with a RoundedRectangleBorder, like this:

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

You can do the same with a CircleBorder() for example if you want to wrap something like a CircleAvatar, or anything else.

Note: A shadow for this will be displayed only if you also have an elevation greater than 0 specified.

score 0 · Answer 3 · answered Aug 27 '20 at 09:49

If you really don't want to use Material widget then you can get rid of it and replace the Container with a Card widget. That way you can also specify an elevation as Card has that property and you will have to specify a shape as well if you do not like the default radius of the rounded corners.

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

3 Answers3