Flutter widget test of elevated button color

Question

Widget test for elevated button background color test fails, My Build method of Button

    @override
  Widget build(BuildContext context) {
    return Container(
      margin: mMargin,
      child: ElevatedButton(
        key: widgetKey,
        style: ButtonStyle(
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20.0),
            ),
          ),
          minimumSize: MaterialStateProperty.all(Size(double.infinity, 40)),
          backgroundColor: onClick == null
              ? MaterialStateProperty.all(AppColors.button_disabled)
              : MaterialStateProperty.all(AppColors.pink_accent),
          shadowColor: MaterialStateProperty.all(Colors.transparent),
        ),
        onPressed: () => onClick(context),
        child: Padding(
          padding: const EdgeInsets.only(
            top: 10,
            bottom: 10,
          ),
          child: Container(
            child: isLoading == false
                ? Text(
                    btnName,
                    style: Theme.of(context)
                        .textTheme
                        .button
                        .copyWith(color: AppColors.white),
                  )
                : SizedBox(
                    height: 25,
                    width: 25,
                    child: CircularProgressIndicator(
                      color: Theme.of(context).indicatorColor,
                    ),
                  ),
          ),
        ),
      ),
    );
  }

Test class code

void main() {
  testWidgets('Login Screen Widget Test', (WidgetTester tester) async {
    await tester.pumpWidget(loginScreenWidget());
    await tester.pumpAndSettle(Duration(seconds: 2));
    expect(find.text('MyMedia'), findsOneWidget);
    expect(find.text('MyApp'), findsOneWidget);
    expect(find.byType(TextField), findsNWidgets(2));

    await tester.pumpAndSettle(Duration(seconds: 1));
    expect(find.byType(ElevatedButton), findsOneWidget);

    expect(
        ((tester.firstWidget(find.byType(ElevatedButton)) as ElevatedButton)
                .style)
            .backgroundColor,
        MaterialStateProperty.all(AppColors.button_disabled));

    expect(find.text('username'), findsOneWidget);
    var usernameField = find.byKey(Key('login_username'));
    await tester.enterText(usernameField, 'test name');
    expect(find.text('test name'), findsOneWidget);

    var passwordField = find.byKey(Key('login_password'));
    await tester.enterText(passwordField, 'password');
    expect(find.text('password'), findsOneWidget);

    expect(find.text('Login'), findsOneWidget);
  });
}

at this line

expect(
            ((tester.firstWidget(find.byType(ElevatedButton)) as ElevatedButton)
                    .style)
                .backgroundColor,
            MaterialStateProperty.all(AppColors.button_disabled));

i get error

The following TestFailure object was thrown running a test:

I/flutter (123):   Expected: _MaterialStatePropertyAll<Color>:<MaterialStateProperty.all(Color(0xff6e2443))>

I/flutter (123):   Actual: _MaterialStatePropertyAll<Color>:<MaterialStateProperty.all(Color(0xff6e2443))>

Answer 1

See my example, I think you can to adapt it:

final finder = find.widgetWithText(ElevatedButton, 'Problems');
final widget = tester.firstWidget(finder) as ElevatedButton;
final states = <MaterialState>{};
final bgColor = widget.style?.backgroundColor?.resolve(states);
expect(bgColor, const Color(0xFFc0c0c0));