Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Styling specific background color for Elevated Button

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

try this

ElevatedButton(
 style: ElevatedButton.styleFrom(primary: const Color(0xff032423)),
 child: const Text("OK"))

i think , maybe your problem is you use 0x00... which is , you set opacity to 0%
try to use 0xFF... instead

https://gist.github.com/creativecreatorormaybenot/8710f6f752f6a0f2cae13abb538f0e8e#hex-opacity-values

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading