Getting This Error When Trying To Animate An ElevatedButton

I am currently trying to animate an elevatedButton, nothing too fancy just trying to animate the elevated property. So I’ve scaffolded a new flutter starter app in VS code and added in the relevant code for the animations and animation controller, however I keep getting this error : type ‘double’ is not a subtype of type ‘MaterialStateProperty<double?>?’ I don’t understand why, here’s my code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

  AnimationController animationController;
  Animation animation;

  @override void initState() {      
      super.initState();

      animationController = AnimationController(
        vsync: this,
        duration: Duration(seconds: 5),
      );

      animation = Tween(begin: 50.0, end: 150.0).animate(
        CurvedAnimation(
          parent: animationController, 
          curve: Interval(0.0, 1.0, curve: Curves.easeInOut),
        ),
      );
  }

  @override void dispose() {
      animationController.dispose();

      super.dispose();
    }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: (){
                animationController.forward();
              }, 
              child: Text("Button Text"),
              style: ButtonStyle(
                elevation: animation.value,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Looks like it’s a type mismatch. Can you share the exact line this error is coming on?

Yes figured that much but how do I rectify it, it’s coming from this line

elevation: animation.value,

Hi @akashh I researched online about how to set the MaterialStateProperty and came across this documentation. I tried using the code to set the elevation property and it’s working fine, I have tested it on DartPad. Try the following code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  createState() {
    return MyWidgetState();
  }
}

class MyWidgetState extends State<MyWidget> {
  @override
  initState() {
    super.initState();
  }

  double? getValue(Set<MaterialState> states) {
// Flutter code sample for MaterialStateProperty
//
// This example shows how you can override the default text and icon
// color (the "foreground color") of a [TextButton] with a
// [MaterialStateProperty]. In this example, the button's text color
// will be `Colors.blue` when the button is being pressed, hovered,
// or focused. Otherwise, the text color will be `Colors.red`.

    const Set<MaterialState> interactiveStates = <MaterialState>{
      MaterialState.pressed,
      MaterialState.hovered,
      MaterialState.focused,
    };
    if (states.any(interactiveStates.contains)) {
      return 12.0;
    }
    return 4.0;
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: Text("Button Text"),
      style: ButtonStyle(
        elevation: MaterialStateProperty.resolveWith(getValue),
      ),
    );
  }
}

Hi Sakina,

Thanks so much, I’ve also researched it and you sort of cast it using the MaterialState property, so in my case I just used MaterialStateProperty.all(I pass the double value in here) and it works

1 Like