Mobile App Development Flutter With Dart

Flutter Container widget

18-Sep-2024

Learn how to use the Container widget in Flutter to control layout, color, and size

Container widgets in Flutter are versatile and commonly used widgets that allow you to create box models with specific dimensions, spacing, borders, and decorations.
This is the basic building block for designing layouts in Flutter applications.

Here's a quick overview of some of the main features of container widgets.


  Container(
      child: Text("Micro Tutorial")
  );

Container Hight , Weight , color properties Example:


Container(
  width: 500,
  height: 100,
  color: Colors.red,
    child: Text("Micro Tutorial")
);

Container Hight , Weight, margin, paddin, alainment, BoxDecoration properties Example:


import 'package:flutter/material.dart';

void main() {
  runApp(
      MaterialApp(
        home: Scaffold(
          body: MyApp(),
        ),
      )
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
      Container(
          width: 500,
          height: 100,
          //color: Colors.red,
          padding: EdgeInsets.all(10),
          margin: EdgeInsets.all(10),
          alignment: Alignment.center,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.blue),
            borderRadius: BorderRadius.circular(8.0),
            color: Colors.red
          ),
          child: Text("Micro Tutorial")
      );
  }
}