flutter-tutorial

Flutter Center Widget

Flutter includes a built-in Center widget that aligns its child widget to the centre of the available screen area. If the widthFactor and heightFactor parameters are set to null and the dimensions are limited, the size of this widget will be as large as possible. The Center widget will take the size of its child widget if the dimensions are not limited and the widthFactor and HeightFactor are set to null. Let’s look at some examples to help us comprehend.

Properties of Center Widget

  • widthFactor: This property takes a double number as a parameter and sets the width of the Center widget to the width of the child multiplied by this factor. When set to 3.0, for example, the Center widget will be three times the size of its child widget.
  • heightFactor: This property accepts a double number as a parameter and changes the height of the Center widget to the same as the child’s height multiplied by this factor.
  • child: This property accepts a widget as an argument, which will be displayed inside the screen’s Center widget.
  • alignment: is the parameter value for this property, which determines how the child widget will be aligned with respect to the parent widget.

Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Learn Code Zone',
      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('Learn Code Zone'),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: Container(
          color: Colors.blue,
          child: Text(
            'Center Widget',
            textScaleFactor: 3,
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.