Skip to main content

Center widget flutter

 


The Center widget in Flutter is a simple yet powerful widget that centers its child within the available space. It's often used to position a widget in the middle of its parent widget.

Key Features of Center

  1. Alignment: The Center widget by default centers its child both horizontally and vertically.
  2. Constraints: The child of a Center widget is allowed to have any size it wants unless constrained by its parent.
  3. Ease of Use: The Center widget is commonly used because of its simplicity and readability when designing UI.

    Parameters

    1. child:

      • The widget that you want to center.
      • If null, the Center widget will occupy all available space but won't display anything.

    2. widthFactor and heightFactor:

      • Multipliers for the size of the child.
      • These are optional parameters. If specified, the width and/or height of the Center widget will be the child’s size multiplied by the respective factor.
      • If null, the Center will expand to fit its parent.

    Basic Example

    dart
    import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    ),
  ));
}

    Output: The text Hello, Flutter! will be centered on the screen.

    Example with widthFactor and heightFactor

    dart
    Center(
  widthFactor: 2.0,
  heightFactor: 2.0,
  child: Container(
    color: Colors.blue,
    width: 50,
    height: 50,
  ),
)

    In this case:

    • The blue container's size is 50x50.
    • The Center widget's size will be 2 times the width and height of the container (i.e., 100x100).

    Why Use Center?

    • Quick and Clean: It eliminates the need for complex positioning logic for centralizing widgets.
    • Common in UIs: Many designs require elements to be centered, making Center a go-to widget.

    Alternatives

    • Align: Use Align if you need more control over the positioning, like aligning to a specific edge or corner.
    • Padding or Container: These can also be used in conjunction with alignment for similar effects.

    The Center widget is a fundamental building block in Flutter that simplifies centering tasks.

Comments

Post a Comment

Your Complete Flutter Roadmap: From Beginner to Pro

🌀 Flutter App Lifecycle – Easy Way to Understand

  When you build an app in Flutter , it goes through different states depending on how the user interacts with it (open, minimize, back button, etc). Think of it like a human day cycle – Wake up → Active → Sleep → Wake again . 🌱 1. main() – Birth of the App Every Flutter app starts from the main() function. void main() { runApp(MyApp()); } 👉 This is like turning ON the lights – your app is born. 🏗 2. Widgets Lifecycle In Flutter, everything is a Widget . There are two main types: StatelessWidget → UI that doesn’t change. StatefulWidget → UI that changes with user interaction. For StatefulWidget , the lifecycle looks like this: 🔹 When Widget is created createState() → Creates a State object (like preparing memory). initState() → First time setup (like waking up, stretching, preparing breakfast). Best place for API calls , animation controllers , initial values . 🔹 When Widget builds build() → Renders UI (like dressin...
Post a Comment
Read more

📱 Flutter ListTile and ListView: Explained with Easy Examples

Flutter ListTile and ListView: When you start learning Flutter, two widgets often confuse beginners: ListTile  &  ListView . Both are used to display items in a list, but their purpose is different. Let’s break them down in a simple way. 🔹 What is ListTile in Flutter? ListTile is a ready-made widget used to show a single row (one item). It usually contains: title (main text) subtitle (small text under the title) leading (icon/image on the left) trailing (icon/text on the right) 👉 Think of ListTile as a single row card inside a list. ✅ Example of ListTile: import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text("Flutter ListTile Example")), body: const ListTile( leading:...
Post a Comment
Read more

Text Widget In Flutter

  The Text widget in Flutter is used to display text on the screen. It's one of the most fundamental widgets and supports a wide range of customizations to style, align, and manage text. Here’s a detailed overview: Basic Syntax dart Copy code Text( 'Hello, Flutter!', style: TextStyle(fontSize: 24, color: Colors.blue), textAlign: TextAlign.center, ) Key Properties data : The text string to display. Example: 'Hello, World!' . style : Defines the appearance of the text. Uses the TextStyle class for customization. Example : dart Copy code Text( 'Styled Text', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.red, fontStyle: FontStyle.italic, letterSpacing: 2.0, wordSpacing: 5.0, decoration: TextDecoration.underline, ), ) textAlign : Aligns the text horizontally. Values: TextAlign.left , TextAlign.right , TextAlign.center , TextAlign.justify , etc. Example: dart Copy code textAlign: TextAlign.cente...
Post a Comment
Read more