CODEWITHSUNDEEP
flutterdartflutter-layouticonbutton
Boron
Boron

Reputation: 129

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

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?

Upvotes: 1

Views: 2101

Answers (2)

lazos
lazos

Reputation: 1075

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: () {})),
  )

Upvotes: 2

Logemann
Logemann

Reputation: 2953

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?

Upvotes: 2

Related Questions