Skip to main content

Flutter Set ElevatedButton Inside Text Alignment Center

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:
Flutter Set ElevatedButton Inside Text Alignment Center
Screenshot of ElevatedButton without applying Text Alignment:
Flutter ElevatedButton Inside Text Alignment
2. Complete source code for main.dart file:
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