Skip to main content

Flutter Container widget



 The Container widget in Flutter is a versatile and commonly used widget that provides a way to create a rectangular box with various properties such as padding, margin, alignment, decoration, and constraints. It is essentially a combination widget that combines several commonly used features into one.

Here's a detailed breakdown of everything about the Container widget:

Basic Features

1. Dimensions

  • Width and Height: You can specify fixed or relative dimensions.
    Container(
  width: 100,
  height: 100,
)

2. Padding

  • Adds space inside the container between its child and the container’s boundaries.

    Container(
  padding: EdgeInsets.all(10), // uniform padding
)

3. Margin

  • Adds space outside the container between the container and other widgets.

    Container(
  margin: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
)

4. Color

  • Set a background color for the container.

    Container(
  color: Colors.blue,
)

Decoration

The decoration property allows for more advanced customization, like gradients, borders, and rounded corners. Note: If you use decoration, you cannot set the color property directly; include it in the BoxDecoration.


Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10), // Rounded corners
    border: Border.all(color: Colors.black, width: 2), // Border
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.green], // Gradient
    ),
  ),
)

Alignment

Aligns the child widget within the container.

  • Use Alignment or FractionalOffset to control the alignment.

    Container(
  alignment: Alignment.center,
  child: Text('Centered Text'),
)

Constraints

Define width and height constraints for flexibility.


Container(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
    minHeight: 50,
    maxHeight: 150,
  ),
)

Child Property

  • The child is any widget you want to display inside the container. If no child is specified, the container takes up as little space as possible.

    Container(
  child: Text('Hello, Flutter!'),
)

Transformations

Apply transformations like rotation or scaling.


Container(
  transform: Matrix4.rotationZ(0.1), // Rotates the container slightly
  child: Text('Transformed Text'),
)

Combining Properties

You can combine these properties to create sophisticated UI designs. For example:


Container(
  width: 150,
  height: 150,
  padding: EdgeInsets.all(20),
  margin: EdgeInsets.all(15),
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.orange,
    borderRadius: BorderRadius.circular(10),
    border: Border.all(color: Colors.black, width: 2),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // Shadow position
      ),
    ],
  ),
  child: Text(
    'Hello, Container!',
    style: TextStyle(color: Colors.white),
  ),
)

Key Points to Remember

  1. Efficiency: A Container with only one property (like color) will internally use the lighter ColoredBox or Padding widget for optimization.
  2. Null Values: Most properties (e.g., width, height, padding) are optional. If not set, the container adapts based on its child or parent constraints.
  3. Responsive Layouts: Combine Constraints and flexible widgets like Expanded for responsive designs.

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