Globally remove all drop shadows in Flutter app?

Question

Is there a way to globally remove all drop shadows in Flutter app? I would like to do that in single place instead of setting elevation: 0 for all MaterialButtons, ElevatedButtons, etc. I would like set theme, or do it another way, but globally in single palce.

I was looking for attributes in ThemeData, but can't find desired attributes, e.g. for MaterialButtons.

score 0 · Answer 1 · answered Oct 11 '21 at 21:08

You were on the right track, ThemeData has an attribute for ElevatedButtons, i have made a small example on what you need to remove shadows based on MaterialStateProperty:


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  //this is the function that deletes shadows
  double getElevation(Set<MaterialState> states) {
    return 0;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(
          //this is the property that affects elevated buttons
          elevatedButtonTheme: ElevatedButtonThemeData(
              style: ButtonStyle(
                  elevation: MaterialStateProperty.resolveWith(getElevation)))),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //this button doesn't have a shadow
    return ElevatedButton(
      child: const Text("HEY!"),
      onPressed: () {},
    );
  }
}

Thank you, I've just checked it and it works for `ElevatedButton`. However, it doesn't work for `MaterialButton` — jakub, Oct 12 '21 at 14:22
Yeah, MaterialButton is obsolete beacuse it used functions instead of properties so i suggest to migrate and use ElevatedButton instead of MaterialButton. The docs state that you should migrate as soon as possible https://api.flutter.dev/flutter/material/ButtonTheme-class.html — RegularGuy, Oct 12 '21 at 20:09

score 0 · Answer 2 · answered Oct 13 '21 at 20:40

0

The solution is pretty straightforward,

ThemeData(
   shadowColor: Colors.transparent,
);

gets the job done

answered Oct 13 '21 at 20:40

jakub

3,576
3
29
55

Globally remove all drop shadows in Flutter app?

2 Answers2