Center widget in Flutter

Center widget comes built-in with flutter, it aligns its child widget to the center of the available space on the screen. The size of this widget will be as big as possible if the widthFactor and heightFactor properties are set to null and the dimensions are constrained. And in case the dimensions are not constrained and the widthFactor and HeightFactor are set to null then the Center widget takes the size of its child widget. Let’s understand this with the help of examples.

Constructor:

Syntax:
Center({Key key, 
double widthFactor, 
double heightFactor, 
Widget child})

Properties of Center Widget:

  • widthFactor: This property takes a double value as a parameter and it sets the Center widget’s width as the same as the child’s width multiplied by this factor. For example, if it is set to 3.0 then the Center widget will take three times the size of its child widget.
  • heightFactor: This property also takes in a double value as a parameter and it sets the Center widget’s height as the same as the child’s height multiplied by this factor.
  • child: This property takes in a widget as a parameter to be displayed inside the Center widget on the screen.
  • alignment: This property takes in AlignmentGeometry as the parameter value to determine how the child widget will be aligned with respect to the Center widget.

Example:

The main.dart file.

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is
  //the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        // heightFactor: 3,
        // widthFactor: 0.8,
        child: Container(
          color: Colors.green,
          child: Text(
            'Center Widget',
            textScaleFactor: 3,
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

chevron_right


Output:



When the above code is executed, the output is shown below:

center align widget

If the properties are defined as below:

heightFactor: 3,





The following design changes can be observed:

center top align widget

If the properties are defined as below:

widthFactor: 1,





The following design changes can be observed:

If the properties are defined as below:

heightFactor: 3,
widthFactor: 0.8,





The following design changes can be observed:

Explanation:

  • Create Center widget with its child as Container.
  • Set heightFactor if needed.
  • Set widthFactor if needed.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ankit_kumar_