Button types in flutter

It should be button shapes or designs, since buttons in flutter all basically work the same way, except for DropDownButton, it is a bit different !

  • ElevatedButton
  • TextButton
  • IconButton: An icon is added to your text button !
  • FloatingActionButton: a circular icon button that hovers over content to promote a primary action in the application. (official Youtube)
  • OutlinedButton: a TextButton with an outlined border
  • DropDownButton: Allow the user to select from a list of values ! (Official Youtube)
  • CupertinoButton: A button in iOS style !

ButtonStyle IS DEPRECATED !, use WidgetStateProperty (Just replace this class name with that) to set (backgroundColor and foregroundColor) , everything else is identical….

ButtonStyle Class

style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.green),
foregroundColor:
MaterialStateProperty.all<Color>(Colors.white),
),

Instead, use

style: ButtonStyle(
backgroundColor:
WidgetStateProperty.all<Color>(Colors.green),
foregroundColor:
WidgetStateProperty.all<Color>(Colors.white),
),

styleFrom() method

ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green,
foregroundColor: Colors.white,
textStyle:
TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
)

Leave a Reply

Your email address will not be published. Required fields are marked *