Button style
- Flutter course
- Beginner
- Lesson 64/99
- 4 min
Customize button color and shape with ButtonStyle.
ButtonStyle and styleFrom
ButtonStyle is the object that customizes a button's appearance. Instead of constructing it directly, it is easier to use the ElevatedButton.styleFrom() helper. The primary parameter of this method sets the button's background color.
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
onPressed: () {},
child: Text('Red'),
)primary and shape
Inside styleFrom, primary sets the background color and shape sets the corner shape of the button. For example, with RoundedRectangleBorder you can make rounded corners. The style parameter exists on ElevatedButton, TextButton and OutlinedButton alike.
Practice Make a red ElevatedButton
Write a function select that prints Secildi. In main call select. Add an ElevatedButton; give a red background via style, wire onPressed to select and child to Text('Sec').
Starter code
import 'package:flutter/material.dart';
// sec fonksiyonu yaz: "Secildi" yazdirsin
void main() {
// sec'i cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// ElevatedButton ekle: style, onPressed, child ver
// style ile kirmizi arka planli bir buton yap
child: SizedBox(),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void sec() {
print('Secildi');
}
void main() {
sec();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
onPressed: sec,
child: Text('Sec'),
),
),
),
);
}
}Expected output
Secildi
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which method is used to easily create a ButtonStyle?
- ElevatedButton.create()
- ElevatedButton.new()
- ElevatedButton.styleFrom() Correct answer
- ElevatedButton.build()
Explanation: The ElevatedButton.styleFrom() helper creates a ButtonStyle easily; there is no method named create, new or build.
2 Add the primary parameter
ElevatedButton(
style: ElevatedButton.styleFrom(
____: Colors.red,
),
onPressed: () {},
child: Text('Kirmizi'),
)ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
onPressed: () {},
child: Text('Kirmizi'),
)Explanation: Inside styleFrom the background color is given with the primary parameter; color, bgColor or mainColor are not valid parameter names.
3 Style parts
| Term | Meaning |
|---|---|
ButtonStyle |
Style object |
styleFrom |
Easy style builder |
primary |
Background color |
shape |
Corner shape of the button |