Flutter

Center Vertically In Flutter


In this article, you will learn How To Vertically Center almost any Widget in Flutter.

Creating Widget

Sometimes a situation occurs where you only need to center a widget vertically. You can use the Center widget but it centers both horizontal and vertical. If you have a list of Widgets you can use Column widget and it has a property to center only vertically.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Home'),
          centerTitle: true,
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'code-source.tempurl.host',
              style: TextStyle(
                fontSize: 50,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Above you have a Column widget with one Text widget. To center a widget vertically you use

mainAxisAlignment with method MainAxisAlignment.center to center a widget vertically.

Result


Share on social media

//