TextButton and OutlinedButton
- Flutter course
- Beginner
- Lesson 63/99
- 4 min
Learn the TextButton and OutlinedButton variants.
TextButton and OutlinedButton
Besides ElevatedButton, Material offers two other common button variants. TextButton is a flat text button with no background or shadow. OutlinedButton draws a border around the text but has no fill. All three accept onPressed and child parameters.
TextButton(
onPressed: () {},
child: Text('Back'),
)
OutlinedButton(
onPressed: () {},
child: Text('Select'),
)Which button when?
ElevatedButton is used for the primary action on screen, such as submitting a form. TextButton is suitable for less important secondary actions, such as cancel or close. OutlinedButton is used for important but not primary actions, such as an alternative option.
Practice Make a back button with TextButton
Write a function back that prints Geri. In main call back. Add a TextButton; wire onPressed to back and child to Text('Geri').
Starter code
import 'package:flutter/material.dart';
// geri fonksiyonu yaz: "Geri" yazdirsin
void main() {
// geri'yi cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// TextButton ekle: onPressed ve child ver
child: SizedBox(),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void geri() {
print('Geri');
}
void main() {
geri();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: TextButton(
onPressed: geri,
child: Text('Geri'),
),
),
),
);
}
}Expected output
Geri
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which button only draws a border and makes no fill?
- Container
- OutlinedButton Correct answer
- ElevatedButton
- TextButton
Explanation: OutlinedButton draws a border around the text but leaves the background unfilled.
2 Add the TextButton widget
TextButton(
onPressed: () => print('Geri'),
child: Text('Geri'),
)
____(
onPressed: () => print('Iptal'),
child: Text('Iptal'),
)TextButton(
onPressed: () => print('Geri'),
child: Text('Geri'),
)
OutlinedButton(
onPressed: () => print('Iptal'),
child: Text('Iptal'),
)Explanation: When you want a border without fill, OutlinedButton is used; ElevatedButton is shadowed and IconButton is icon based.
3 Button variants
| Term | Meaning |
|---|---|
ElevatedButton |
Raised and shadowed |
TextButton |
Flat, text only |
OutlinedButton |
Bordered, no fill |
variant |
Button kind |