Styling specific background color for Elevated Button

Viewed 35

I'm trying to design a Flutter ElevatedButton in the context of an app that follows a specific color palette designed by me.
Is there a way to style this button with a specific, hex entered, non material color (i.e. using a color through MaterialStateProperty.all() but specifying Color(0x00170E04) instead of Colors.black)?
I'm asking this because I tried many solutions, and the button color did not change in any of them, it just reset to the default blue color of ElevatedButton. I've come to think that colors different from the material ones cannot be used?

Here's the code:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:gap/gap.dart';
import 'package:vudu_companion/dice_view.dart';

import '../blocs/dice_bloc.dart';

class DiceScreen extends StatelessWidget {
  const DiceScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0x00170E04),
      body: Column(
        children: [
          const Gap(100),
          const DiceView(),
          const Gap(20),
          // Buttons...
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                style: ElevatedButton.styleFrom(primary: const Color(0x00170E04)
                ),
                  onPressed:
                      () => Future.delayed(
                          const Duration(seconds: 1),
                              () => context.read<DiceBloc>().add(RollDice())
                      ),
                  child: const Text('Lancia i dadi')
              ),
              ElevatedButton(
                onPressed: () => context.read<DiceBloc>().add(ResetDice()),
                child: const Text('Nuovo turno'),
              )
            ],
          )
        ],
      ),
      );
  }
}

And this is my main.dart file:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:vudu_companion/blocs/dice_bloc.dart';

import 'screens/dice_screen.dart';

void main() => runApp(const VuduApp());

class VuduApp extends StatelessWidget {
  const VuduApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BlocProvider(
        create: (context) => DiceBloc()..add(RollDice()),
        child: const DiceScreen(),
      ),
    );
  }
}
2 Answers

First of all, your hex color format is wrong, you should use Color(0x00170E04) instead of Color(0x0x00170E04). Try this:

ElevatedButton(
              onPressed: () {},
              child: Text('click'),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Color(0x00170E04)),
              ),
            )

And Try to Change your scaffold background to Colors.white to see the changes, because your scaffold background color and your button color are the same.

enter image description here

Related