Flutter Center Widget Tutorial

The Centre widget in Flutter is an effective tool for positioning and aligning widgets inside of a parent widget. You can easily make sure that your widgets are exactly centred both horizontally and vertically by using the Centre widget.

This article will explain how to integrate the Flutter Centre widget into your app and walk you through a concrete example.

What is the Flutter Center Widget ?

The Center widget in Flutter is a layout widget that centers its child widget both horizontally and vertically. It takes a single child widget and positions it in the center of the available space within its parent widget.

The Center widget ensures that the child widget is perfectly aligned, regardless of the size of the parent widget.

Using the Center Widget

To use the Center widget in Flutter, follow these steps:

Import the material.dart package: Ensure that you have imported the material.dart package in your Flutter project.

import 'package:flutter/material.dart';

Wrap the desired widget with the Center widget: Wrap the widget you want to center with the Center widget. Check this Syntax of this Center Widget.

Center(
  child: YourWidget(),
),

In the above example, we wrap the YourWidget widget with the Center widget to ensure that it is perfectly centered within its parent widget.

Example Usage: Centering a Text Widget

Let’s consider a scenario where you want to center a Text widget within a parent Container widget. You can achieve this by using the Center widget as follows :

Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  child: Center(
    child: Text(
      'Hello, Flutter!',
      style: TextStyle(fontSize: 24, color: Colors.white),
    ),
  ),
),

In this example, the Text widget is centered within the Container widget. The Center widget ensures that the Text widget is positioned perfectly in the center, both horizontally and vertically.

Conclusion

To position and align widgets inside of a parent widget, use the Flutter Centre widget. Regardless of the size of the parent widget, you can simply make sure that your widgets are centred and visually balanced by using the Centre widget.

Play around with the Centre widget in your Flutter app to get the best alignment and raise the aesthetic quality overall. To create properly centred user interfaces and preserve consistency in your app’s layout, utilise the Centre widget.

Utilise the Flutter Centre widget in your app right away to simplify widget alignment!

Related Posts

Flutter BoxShadow Tutorial

Flutter Banner Location Tutorial

Flutter Banner Widget Tutorial

Passing Data Between Flutter Screens

Flutter App: Hide Keyboard on Tap

Prefix and Suffix Icon in TextField