Home > Software design >  Styling specific background color for Elevated Button
Styling specific background color for Elevated Button

Time:09-07

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

CodePudding user response:

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

enter image description here

  • Related