I have an elevated button in Flutter, generally the button works fine.
However, the setting of the primary: Colors.red in this example does not work, the button is transparent for some reason... All the other params of the ElevatedButton.styleFrom() are working as expected.
Any assistance would be appreciated!
Widget _btnGood() {
return SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
child: ElevatedButton(
onPressed: null,
style: ElevatedButton.styleFrom(
primary: Colors.purple,
side: const BorderSide(width: 8.0, color: Colors.white),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(32)),
padding: const EdgeInsets.all(25),
),
child: const Text(
"Im Feeling Good",
style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
),
);
}
Example of Button
Simply change on pressed to-
on_pressed: (){} instead of null.
Related
I've been updating a Flutter app and replaced a FlatButton with the new TextButton. But now the button doesn't display on the Card. I can click it and it works, and if I long press you can see the button and it's caption.
The card widget code is below.
Card otherSwapCard(
List<FSRows?> data, int index, context, Function circularprogress) {
String? shiftDate = formatJsonDate(data[index]!.shiftDate!, 'dd/MM/yyyy');
//calculate time value string
String shiftTimes =
'${formatJsonTime24To12(data[index]!.startTime!)} - ${formatJsonTime24To12(data[index]!.finishTime!)}';
return Card(
color: Colors.white,
elevation: 3,
margin: EdgeInsets.fromLTRB(16, 4, 16, 12),
child: Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(
width: 2.0,
color: kMainColor40,
),
),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Expanded(
flex: 72,
child: Column(
children: <Widget>[
DataKeyRow(dkLabel: 'Job:', dkValue: data[index]!.jobName!),
SizedBox(height: 2),
DataKeyRow(dkLabel: 'Date:', dkValue: shiftDate!),
SizedBox(height: 2),
DataKeyRow(
dkLabel: 'Time:', dkValue: shiftTimes.toLowerCase()),
],
),
),
Expanded(
flex: 28,
child: Center(
child: TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
),
child: Text('Fill', style: TextStyle(color: Colors.white)),
onPressed: () { },
),
),
),
],
),
),
),
);
}
Card, TextButton, and Text three are in white color. So trying changing the color of the Button or Text.
To change the TextButton color
TextButton(
onPressed: () {},
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.black, // Background Color
),
child: const Text(
'Text Button ',
style: TextStyle(fontSize: 24),
),
)
The backgroundColor will change the TextButton background color to black and the primary will change the font color to white, you can customize it accordingly.
Both your Card color and TextButton Text color are White, you just need to change one of them.
I copied your code and change the color and everything went fine.
Card(
color: Colors.white,
TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
),
child: Text('Fill', style: TextStyle(color: Colors.**white**)),
onPressed: () { },
),
Card and TextButton both are in white color , so try changing your code.
Change
child: Text('Fill', style: TextStyle(color: Colors.white)),
to
child: Text('Fill', style: TextStyle(color: Colors.black)),
I have the problem that the Raised Button is no longer a usable Button in Flutter so I have to replace it with a elevated Button for example.
But when I try to convert it to an elevated Button it gives me an error with the color and shape Property. They seem to belong to the: style Button Style() but I can't convert them. Can someone help me with that.
The code for the Raised Button was:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 40.0),
child: RaisedButton(
child: Text(
"Gruppen Id kopieren",
style: TextStyle(
color: Colors.white,
),
),
onPressed: () => _copyGroupId(context),
color: Color.fromRGBO(245, 168, 0, 1),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(
color: Theme.of(context).secondaryHeaderColor,
width: 2,
),
),
),
),
You can set ButtonStyle for ElevatedButton which uses MaterialStateProperty. Now you can set color (or other properties) by checking the state, for example if button is disabled, use
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return Colors.grey.shade600;
}
return Color.fromRGBO(245, 168, 0, 1);
},
),
or you can set a color for all the states like this:
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.resolveWith(
(states) => RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(
color: Theme.of(context)
.secondaryHeaderColor,
width: 2,
),
),
),
backgroundColor: MaterialStateProperty.all(
const Color.fromRGBO(245, 168, 0, 1),
),
),
onPressed: () => _copyGroupId(context),
child: const Text(
"Gruppen Id kopieren",
style: TextStyle(
color: Colors.white,
),
),
),
You can check the buttons#context
So now instead of RaisedButton we need to useElevatedButton
Similarly, to make an ElevatedButton look like a default RaisedButton:
final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
onPrimary: Colors.black87,
primary: Colors.grey[300],
minimumSize: Size(88, 36),
padding: EdgeInsets.symmetric(horizontal: 16),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(2)),
),
);
ElevatedButton(
style: raisedButtonStyle,
onPressed: () { },
child: Text('Looks like a RaisedButton'),
)
Ref and from restoring-the-original-button-visuals
I am learning flutter. How can I have to make the following design? ignore the container border have to make a chip buttons
This is the button design as you mentioned
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.white),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
),
child: Text(
'data',
style: TextStyle(color: Colors.black),
),
);
try to follow this article and you will find your answer
chip-widgets
Widget _buildChip(String label, Color color) {
return Chip(
labelPadding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.white70,
child: Text(label[0].toUpperCase()),
),
label: Text(
label,
style: TextStyle(
color: Colors.white,
),
),
backgroundColor: color,
elevation: 6.0,
shadowColor: Colors.grey[60],
padding: EdgeInsets.all(8.0),
);
}
}
chipList() {
return Wrap(
spacing: 6.0,
runSpacing: 6.0,
children: <Widget>[
_buildChip('Gamer', Color(0xFFff6666)),
_buildChip('Hacker', Color(0xFF007f5c)),
_buildChip('Developer', Color(0xFF5f65d3)),
_buildChip('Racer', Color(0xFF19ca21)),
_buildChip('Traveller', Color(0xFF60230b)),
],
);
}
I'm working on my first Flutter project and my goal is to make my app work on all platforms (Android, iOS, Web).
My forehead is slowly becoming more red as I'm working with the ElevatedButton. I can't make it work on the Web.
This is how it looks in Android: (correct)
This is how it looks on the Web: (incorrect)
This is my theme:
theme: ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: Colors.black,
onPrimary: Colors.yellowAccent,
side: BorderSide(width: 2.5, color: Colors.yellowAccent),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
textStyle: TextStyle(
fontSize: 15, fontWeight: FontWeight.w600
),
elevation: 6,
shadowColor: Colors.yellowAccent,
padding: EdgeInsets.all(8.0),
),
),
),
This is my button:
Container(
padding: EdgeInsets.all(8.0),
child: ElevatedButton(
child: Text("MY BUTTON"),
onPressed: () => setState(() {
_launched = _launchInBrowser('https://www.mywonderfulsite.com');
}),
)),
Is this a "feature" of ElevatedButton or can it be solved using it?
Appreciate suggestions.
The only solution I've found is to put a fixed width and height of the Container. Something like this:
Container(
width: 124.0, // <-- Added this...
height: 48.0, // <--- ...and this.
padding: EdgeInsets.all(8.0),
child: ElevatedButton(
child: Text("MY BUTTON"),
onPressed: () => setState(() {
_launched = _launchInBrowser('https://www.mywonderfulsite.com');
}),
)),
Hopefully it works for all platforms and versions. I've tested the most basic ones.
I am having some issue changing the icon in a Filter chip in Flutter.
I would like to add a "+" when displaying the widget. Then, if the user selects the chip, then change the icon to a checkmark.
As you can see from the first picture, the icon is changed to a "check", but there is a white checkmark underneath.
How can I remove this extra checkmark?
Code Snippet
FilterChip(
avatar: selected.contains(ms.items[i].text)
? Icon(Icons.check, color: Palette.BLUE)
: Icon(Icons.add, color: Palette.GREY),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(
color: Palette.BLUE,
),
),
backgroundColor: Palette.WHITE,
padding: const EdgeInsets.all(8.0),
label: Text(
ms.items[i].text,
style: TextStyle(
fontSize: 16.0,
height: 1.4,
fontWeight: FontWeight.normal,
color: Palette.GREY,
),
),
Current Display
Desired Display
Initial display
You need to set showCheckmark to false. Also, change the border and text color according to the selection state.
FilterChip(
showCheckmark: false,
avatar: selected.contains(ms.items[i].text)
? Icon(Icons.check, color: Palette.BLUE)
: Icon(Icons.add, color: Palette.GREY),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(
color: selected.contains(ms.items[i].text)
? Palette.BLUE
: Palette.GREY,
),
),
backgroundColor: Palette.WHITE,
padding: const EdgeInsets.all(8.0),
label: Text(
ms.items[i].text,
style: TextStyle(
fontSize: 16.0,
height: 1.4,
fontWeight: FontWeight.normal,
color: selected.contains(ms.items[i].text)
? Palette.BLUE
: Palette.GREY,
),
),
selectedColor: Palette.WHITE,
onSelected: ...