Now that FlatButton is deprecated, it can be replaced by a TextButton. Though, the default TextButton is slightly rounded. How can I define non rounded TextButton's in order to obtain the same layout than using FlatButton's?
Here's the code and its result:
import 'package:flutter/material.dart';
void main() => runApp(XylophoneApp());
class XylophoneApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.red,
),
onPressed: () {
print('note1.wav');
},
),
),
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.orange,
),
onPressed: () {
print('note2.wav');
},
),
),
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.yellow,
),
onPressed: () {
print('note3.wav');
},
),
),
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.green,
),
onPressed: () {
print('note4.wav');
},
),
),
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.teal,
),
onPressed: () {
print('note5.wav');
},
),
),
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.blue,
),
onPressed: () {
print('note6.wav');
},
),
),
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.purple,
),
onPressed: () {
print('note7.wav');
},
),
),
],
),
),
),
);
}
}
Here's the solution: you add
shape: const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
to the TextButton style.
Full code:
import 'package:flutter/material.dart';
void main() => runApp(XylophoneApp());
class XylophoneApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.red,
shape:
const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
),
onPressed: () {
print('note1.wav');
},
),
),
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.orange,
shape:
const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
),
onPressed: () {
print('note2.wav');
},
),
),
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.yellow,
shape:
const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
),
onPressed: () {
print('note3.wav');
},
),
),
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.green,
shape:
const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
),
onPressed: () {
print('note4.wav');
},
),
),
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.teal,
shape:
const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
),
onPressed: () {
print('note5.wav');
},
),
),
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.blue,
shape:
const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
),
onPressed: () {
print('note6.wav');
},
),
),
Expanded(
child: TextButton(
child: const Text(''),
style: TextButton.styleFrom(
backgroundColor: Colors.purple,
shape:
const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
),
onPressed: () {
print('note7.wav');
},
),
),
],
),
),
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.