I'm seeing the warning using old buttons:
'RaisedButton' is deprecated and shouldn't be used.
'FlatButton' is deprecated and shouldn't be used.
'OutlineButton' is deprecated and shouldn't be used.
So, what's the difference between:
RaisedButton and ElevatedButtonFlatButton vs TextButtonOutlineButton vs OutlinedButtonHere I found the docs for Migrating to the New Material Buttons and their Themes
The following image says itself what are the difference between all.
Visually, the new buttons look a little different, because they match the current Material Design spec and because their colors are configured in terms of the overall Theme’s ColorScheme. There are other small differences in padding, rounded corner radii, and the hover/focus/pressed feedback.
You can check Changes Overview for more about changes.
First are obsolete classes.
Quotes from the Flutter documentation:
FlatButton, RaisedButton, and OutlineButton have been replaced by TextButton, ElevatedButton, and OutlinedButton respectively.
The original classes will be deprecated soon, please migrate code that uses them.
These are obsolete classes, so eventually your old code needs to go away. (and, this document will help you do exactly that.) However, that can be a lot of work, so to get things moving, I created some code to migrate the FlatButton and RaisedButton to the new TextButton and ElevatedButton 'in place'. They are analogous to each other, but they approach styling in different ways, which this code handled.
Here's a link to the the gist if you want to run it in dartpad.dev (I couldn't get it to link directly): https://gist.github.com/wterrill/7942b4bf5d74a8b2ace952ebf213fe5d
Here's the code itself:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final bool disableButton = true; // <-- Change this to see buttons disabled
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
child: Text("FlatButton"),
onPressed: disableButton
? null
: () {
print("FlatButton normal");
},
color: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(50),
),
side: BorderSide(color: Colors.purple, width: 3.0)),
disabledColor: Colors.grey,
disabledTextColor: Colors.pink),
SizedBox(height: 25),
FlatButtonX(
childx: Text("TextButton"),
onPressedx: disableButton
? null
: () {
print("FlatButtonX (TextButton)");
},
colorx: Colors.green,
textColorx: Colors.black,
shapex: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(50),
),
side: BorderSide(color: Colors.purple, width: 3.0)),
disabledColorx: Colors.grey,
disabledTextColorx: Colors.pink),
SizedBox(height: 100),
RaisedButton(
child: Text('RaisedButton'),
color: Colors.green,
textColor: Colors.black,
onPressed: disableButton
? null
: () {
print("RaisedButton normal");
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(50),
),
side: BorderSide(color: Colors.purple, width: 3.0)),
disabledColor: Colors.grey,
disabledTextColor: Colors.pink,
),
SizedBox(height: 25),
RaisedButtonX(
childx: Text('ElevatedButton'),
colorx: Colors.green,
textColorx: Colors.black,
onPressedx:disableButton
? null
: () {
print("RaisedButtonX (ElevatedButton)");
},
shapex: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(50),
),
side: BorderSide(color: Colors.purple, width: 3.0)),
disabledColorx: Colors.grey,
disabledTextColorx: Colors.pink,
)
],
),
),
),
);
}
}
Widget FlatButtonX(
{Color colorx,
@required Widget childx,
RoundedRectangleBorder shapex,
@required Function onPressedx,
Key keyx,
Color disabledColorx,
Color disabledTextColorx,
Color textColorx}) {
if (disabledTextColorx == null && textColorx == null) {
disabledTextColorx = colorx;
}
if (textColorx == null) {
textColorx = colorx;
}
return TextButton(
key: keyx,
style: ButtonStyle(
foregroundColor: MaterialStateProperty.resolveWith<Color>(
// text color
(Set<MaterialState> states) => states.contains(MaterialState.disabled)
? disabledTextColorx
: textColorx,
),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
// background color this is color:
(Set<MaterialState> states) =>
states.contains(MaterialState.disabled) ? disabledColorx : colorx,
),
shape: MaterialStateProperty.all(shapex),
),
onPressed: onPressedx as void Function(),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0), child: childx));
}
Widget RaisedButtonX(
{Color colorx,
@required Widget childx,
RoundedRectangleBorder shapex,
@required Function onPressedx,
Key keyx,
Color disabledColorx,
Color disabledTextColorx,
Color textColorx}) {
if (disabledTextColorx == null && textColorx == null) {
disabledTextColorx = colorx;
}
if (textColorx == null) {
textColorx = colorx;
}
return ElevatedButton(
key: keyx,
style: ButtonStyle(
foregroundColor: MaterialStateProperty.resolveWith<Color>(
// text color
(Set<MaterialState> states) => states.contains(MaterialState.disabled)
? disabledTextColorx
: textColorx,
),
backgroundColor: MaterialStateProperty.resolveWith<Color>(
// background color this is color:
(Set<MaterialState> states) =>
states.contains(MaterialState.disabled) ? disabledColorx : colorx,
),
shape: MaterialStateProperty.all(shapex),
),
onPressed: onPressedx as void Function(),
child: childx);
}
One of the advantages of ElevatedButton over RaisedButton is that it will actually pick up your main theme color by default.
So you don't even need to add that custom background color. You would only need to bring your own styling in ElevatedButton, if you want to deviate from your main theme or style other aspects of the button.
My understanding is that they are really equivalent. According to the Flutter 1.22 announcement, the main motivation was around styling. Prior to Flutter 1.22, there was only ONE ButtonTheme for 3 types of buttons, whereas now each type of button has its own theme.
The FlatButton, RaisedButton and OutlineButton widgets have been replaced by TextButton, ElevatedButton, and OutlinedButton respectively.
Link explaining changes:
https://flutter.dev/docs/release/breaking-changes/buttons
How to use the buttons:
you can't set borderSide nor shape either on OutlinedButton even though you could on OutlineButton
Alternative buttons such as TextButton, ElevatedButton, and OutlinedButton are not quite easy like before. We can still use those legacy buttons using the legacy_buttons package