Skip to main content

Flutter Align Text Vertically Horizontally Center of Screen

Hello guys, In today's article we would discuss about Flutter Align Text Vertically Horizontally Center of Screen. By default when we add Text widget in our body area of flutter code then it will show at the top left side of screen. But in may cases we want to show the Text widget at the center of screen. This will be possible via Center widget of flutter. Center widget aligns its inner child vertically and horizontally center in given space.

Flutter Align Text Vertically Horizontally Center of Screen:

1. Open your flutter project's main.dart file and import material.dart package.
import 'package:flutter/material.dart';
2. Defining our class void main function. Here we would call App class.
void main() => runApp(App());
3. Defining App class with State less widget. We are using state less widget here because we are not using State in our current program. Now in the body section of Material App we will be defining Center widget and put the Text widget as its child.
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: Center(child: Text('Home Screen'))),
    );
  }
}
4. Complete Source Code for main.dart file:
import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: Center(child: Text('Home Screen'))),
    );
  }
}
Screenshot of App:
Flutter Align Text Vertically Horizontally Center of Screen

Comments