Default text alignment in ElevatedButton widget is left. If we pass only one line text then it always shows at vertically & horizontally middle of screen. But when we pass text which renders in two or more lines then text moves to the left side of button. Now we need to set its alignment Center to show the text in middle of screen.
Flutter Set ElevatedButton Inside Text Alignment Center:
1. Applying textAlign: TextAlign.center on Child Text widget of ElevatedButton button.
ElevatedButton(
style: ElevatedButton.styleFrom(
fixedSize: const Size(250, 120),
backgroundColor: Colors.teal,
textStyle: const TextStyle(
fontSize: 24,
),
),
onPressed: temp,
child: const Text(
'Sample ElevatedButton ',
textAlign: TextAlign.center,
),
),
Screenshot of ElevatedButton with applying text alignment Center:
import 'package:flutter/material.dart';
void main() => runApp(const App());
class App extends StatelessWidget {
const App({super.key});
void temp() {
print('onPress Called...');
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
fixedSize: const Size(250, 120),
backgroundColor: Colors.teal,
textStyle: const TextStyle(
fontSize: 24,
),
),
onPressed: temp,
child: const Text(
'Sample ElevatedButton ',
textAlign: TextAlign.center,
),
),
)));
}
}
Comments
Post a Comment