Flutter error - The specific widget that could not find a Material ancestor was:

Question

I am using the Align widget to place an Icon button at the bottom center of the screen.

However, I get the following error and I'm unable to resolve it:

The specific widget that could not find a Material ancestor was: IconButton

My code:

return Stack(
  children: <Widget>[
    Container(
      child: GoogleMap(
        initialCameraPosition:
        CameraPosition(target: LatLng(1,1), zoom: 15),
        onMapCreated: (map) {
          mapReady;
        },),
    ),
    Align(
      alignment:Alignment.bottomCenter,
      child: IconButton(
          icon: Icon(Icons.next_week), onPressed: (){}),
    )
  ],

If I replace the IconButton widget with for example a Text widget it works well.

Could you please explain why it doesn't work, why the IconButton needs a Material ancestor?

score 2 · Answer 1 · answered Nov 02 '19 at 18:03

If you wrap you stack (or the parent in general) with Scaffold you will n get this error.

In this case, if you wrap your IconButton with Material Widget,i believe it will fix the problem:

  Align(
    alignment: Alignment.bottomCenter,
    child: Material(
        child: IconButton(icon: Icon(Icons.next_week), onPressed: () {})),
  )

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Because as per documentation of IconButton (https://api.flutter.dev/flutter/material/IconButton-class.html)

An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).

[..]

Requires one of its ancestors to be a Material widget.

IconButton uses most likely ThemeData as well as other things which MaterialApp normally provides.

Is there a reason you dont use MaterialApp as ancestor?

Flutter error - The specific widget that could not find a Material ancestor was:

2 Answers2