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