Mobile App Development Flutter With Dart

Center in Flutter

18-Sep-2024

Learn how to use the Center widget in Flutter to align your child widgets at the center of the screen

Center widget is used to center its child widget within the available space. The Center widget takes a single child and positions it at the center of its parent widget.

There Are Some Common Attributes for Center

Here's a basic example of how you can use the Center widget:

File open lib->main.dart file −


import 'package:flutter/material.dart';

void main() {
  runApp(
      MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: Text('Center Example',
              style:TextStyle(fontSize: 20,color: Colors.white)),
          ),
          body: MyApp(),
        ),
      )
  );
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return
        Center(
          child: Padding(
            padding: EdgeInsets.only(top: 10.0,bottom: 10.0,left: 10.0,right: 10.0),
           // padding: EdgeInsets.all(10),
            child: Container(
              alignment: Alignment.center,
              child: Text("Micro Tutorial",
              style:TextStyle(fontSize: 20,color: Colors.red),
            )
          )
        )
        );
  }
}