FlutterFlutter · Chapterبەش 6 · Lectureوانە 6.5

Container: Size, Padding, Margin and AlignmentContainer: قەبارە، بۆشایی ناوەوە، پەراوێز و ڕێکخستنی شوێن

What a Container is (one child, like a <div>), the box model of margin, border, padding and child, EdgeInsets, the properties table and today's constructor, the rules that decide a Container's size (worked through the course's six examples), ConstrainedBox and Alignment.

Container چییە (یەک منداڵ، وەک ⁦<div>⁩)، ، ، و منداڵ، EdgeInsets، خشتەی و ئەمڕۆ، ئەو ڕێسایانەی قەبارەی Container دیاری دەکەن (بە شەش نموونەکەی وانەکە)، ConstrainedBox و Alignment.

23 min read22 خولەک خوێندنەوە · 18 stepsهەنگاو

What you will learnچی فێر دەبیت

Explain what a Container is and why it has exactly one child.
Describe the box model (margin, border, padding, child) and give padding and margin with EdgeInsets.
Predict a Container's size from its child, width/height, alignment and parent.
Place a child with Alignment and limit a box with constraints or ConstrainedBox.

ڕوونی بکەیتەوە Container چییە و بۆچی تەنها یەک منداڵی هەیە.
(، ، ، منداڵ) وەسف بکەیت و بە EdgeInsets و بدەیت.
قەبارەی Container لە منداڵەکەی، ⁦width/height⁩، alignment و باوکەکەیەوە پێشبینی بکەیت.
منداڵێک بە Alignment دابنێیت و سندووقێک بە constraints یان ConstrainedBox سنووردار بکەیت.

What is a Container?Container چییە؟

A Container is a box around one child widget. On its own a Text or a button has no size of its own choosing, no colour behind it and no space around it. Wrap it in a Container, and with a few properties you can give it a size, empty space inside and outside, a background colour, a border and a position.

Container سندووقێکە بە دەوری یەک منداڵدا. Textـێک یان دوگمەیەک بە تەنها نە قەبارەیەکی دیاریکراوی خۆی هەیە، نە ڕەنگێک لە پشتیەوە و نە بۆشایی بە دەوریدا. بیخە ناو Containerـێکەوە و بە چەند دەتوانیت قەبارە، بۆشایی لە ناوەوە و دەرەوە، ڕەنگی پاشبنەما، و شوێنی پێ بدەیت.

One child onlyتەنها یەک منداڵ

The course says a Container "can contain multiple child widgets". It cannot: it has exactly one child. To put several widgets together, use a widget with children, such as Row, Column or Stack (Row and Column), and put that inside the Container if you need a box around the group. The course's own Lec4 list puts Container among the single-child widgets (Layout Widgets).

وانەکە دەڵێت Container "دەتوانێت چەند منداڵ لە خۆ بگرێت". ناتوانێت: تەنها یەک childـی هەیە. بۆ کۆکردنەوەی چەند پێکەوە، بەکار بهێنە کە childrenـی هەیە، وەک Row، Column یان Stack (Row و Column). ئەگەر سندووقێکت بە دەوری گرووپەکەدا دەوێت، ئەوە بخە ناو Containerـەکەوە. لیستەکەی ⁦Lec4⁩ـی خودی وانەکە Container لە نێوان ئەو دادەنێت کە یەک منداڵیان هەیە (ویجێتەکانی ڕێکخستنی ڕووکار).

Quick checkپشکنینی خێراYou want a red, padded box around two texts placed one above the other. What do you write?سندووقێکی سووری خاوەن دەوێت بە دەوری دوو دەقدا کە یەکێکیان لە سەرووی ئەوی ترەوەیە. چی دەنووسیت؟A Container whose child is a Column with the two textsContainerـێک کە childـەکەی Columnـێکە و دوو دەقەکەی تێدایەTwo Containers inside each other, one text eachدوو Container لە ناو یەکتردا، هەریەکە یەک دەقA Container with child: Text(...), child: Text(...)Containerـێک بە child: Text(...), child: Text(...)

What is a Container?Container چییە؟

A box like an HTML `<div>`سندووقێک وەک `<div>`ـی HTML

The course compares a Container with the <div> tag in HTML (HTML elements). The idea is the same: a general-purpose box that you style and place. The difference: a <div> can hold many elements, a Container holds one child.

وانەکە Container بە تاگی <div> لە HTMLـدا بەراورد دەکات (توخمەکانی HTML). بیرۆکەکە هەمانە: سندووقێکی گشتی کە شێوازی دەدەیتێ و شوێنی دیاری دەکەیت. جیاوازییەکە: <div> دەتوانێت چەندین لە خۆ بگرێت، بەڵام Container تەنها یەک منداڵ.

A framed picture in a shop windowتابلۆیەکی چوارچێوەدار لە جامخانەی دووکانێکدا

Think of a photo hanging in a shop in the bazaar. The photo is the child. Around it is a white card (the padding), then the wooden frame (the border), and between this frame and the next one on the wall there is empty wall (the margin). The shopkeeper can choose how big the frame is, what colour the card is and where the photo sits on the card — exactly the jobs of a Container's properties.

وێنەیەک بهێنە بەرچاوت کە لە دووکانێکی بازاڕدا هەڵواسراوە. وێنەکە منداڵەکەیە. بە دەوریدا کارتێکی سپی هەیە ()، پاشان چوارچێوە دارینەکە () و لە نێوان ئەم چوارچێوەیە و چوارچێوەکەی تەنیشتیدا دیوارێکی بەتاڵ هەیە (). دووکاندار دەتوانێت هەڵبژێرێت چوارچێوەکە چەند گەورە بێت، کارتەکە چ ڕەنگێک بێت و وێنەکە لە کوێی کارتەکە دابنرێت — ڕێک ئەو کارانەی Container دەیکەن.

Where the analogy stops workingسنووری ئەم نموونەیە

A real frame always has a picture in it. A Container can be empty — and then, as you will see, it behaves very differently.

چوارچێوەی ڕاستەقینە هەمیشە وێنەیەکی تێدایە. Container دەتوانێت بەتاڵ بێت — و ئەو کاتە، وەک دەیبینیت، زۆر بە جیاوازی ڕەفتار دەکات.

Quick checkپشکنینی خێراIn the picture-frame comparison, which part is the margin?لە بەراوردی تابلۆ چوارچێوەدارەکەدا، کام بەش ـە؟The white card around the photoکارتە سپییەکەی دەوری وێنەکەThe wooden frameچوارچێوە دارینەکەThe empty wall between this frame and the next oneدیوارە بەتاڵەکەی نێوان ئەم چوارچێوەیە و چوارچێوەکەی تەنیشتی

A first Containerیەکەم Container

Here is the course's first example: a green box 200 wide and 100 high as the body of a screen, with a text inside.

ئەمە یەکەم نموونەی وانەکەیە: سندووقێکی سەوز بە پانیی ٢٠٠ و بەرزیی ١٠٠ وەک bodyـی شاشەیەک، کە دەقێکی تێدایە.

A 200 × 100 green ContainerContainerـێکی سەوزی ٢٠٠ × ١٠٠DARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: FirstContainer()));

class FirstContainer extends StatelessWidget {
  const FirstContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Flutter Application'),
      ),
      body: Container(
        width: 200.0,
        height: 100.0,
        color: Colors.green,
        child: const Text('Hello! Students', style: TextStyle(fontSize: 25)),
      ),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 14

The Container is the whole body of the Scaffold.

Containerـەکە هەموو bodyـی Scaffoldـەکەیە.

Lineدێڕی 15-16

Width and height in logical pixels.

پانی و بەرزی بە لۆجیکی.

Lineدێڕی 17

color paints the whole box, not only behind the letters.

color هەموو سندووقەکە ڕەنگ دەکات، نەک تەنها پشتی پیتەکان.

Lineدێڕی 18

The one child. const because the text never changes.

تاکە منداڵەکە. constـە چونکە دەقەکە هەرگیز ناگۆڕێت.

Without any alignment, the box and its text start at the top-start corner.بەبێ alignment، سندووقەکە و دەقەکەی لە گۆشەی سەرەوەی سەرەتاوە دەست پێدەکەن.CêIT

Sizes in Flutter are in logical pixels, not the phone's real screen dots. A phone with a pixel ratio of 3 draws this 200-wide box with 600 real pixels, so it looks about the same size on every phone.

قەبارەکان لە Flutterـدا بە لۆجیکین، نەک خاڵە ڕاستەقینەکانی شاشەی مۆبایلەکە. مۆبایلێک کە ڕێژەی ٣ـە ئەم سندووقە ٢٠٠ پانە بە ٦٠٠ ڕاستەقینە دەکێشێت، بۆیە لە هەموو مۆبایلێکدا نزیکەی هەمان قەبارە دەردەکەوێت.

Where a Container can liveContainer لە کوێ دەژی

The course says a Container "cannot render directly without any parent widget" and must sit in a Scaffold, Center, Padding, Row or Column. More exactly: every widget on a screen has a parent in the widget tree, and a Container that shows text needs the text direction and styles that MaterialApp and Scaffold provide. So put your Container somewhere inside your screen's widget tree — as the body, or inside a Center, Padding, Row or Column.

وانەکە دەڵێت Container "ناتوانێت بەبێ باوک ڕاستەوخۆ پیشان بدرێت" و دەبێت لە ناو Scaffold، Center، Padding، Row یان Columnـدا بێت. وردتر: هەموو لەسەر شاشە باوکێکی لە هەیە و Containerـێک کە دەق پیشان دەدات پێویستی بە ئاڕاستەی نووسین و ئەو شێوازانەیە کە MaterialApp و Scaffold دابینی دەکەن. بۆیە Containerـەکەت لە شوێنێک لە ناو شاشەکەتدا دابنێ — وەک body، یان لە ناو Center، Padding، Row یان Columnـدا.

Quick checkپشکنینی خێراIn the example above, where does the green box appear in an English app?لە نموونەکەی سەرەوەدا، سندووقە سەوزەکە لە ئینگلیزیدا لە کوێ دەردەکەوێت؟In the top-left corner of the bodyلە گۆشەی سەرەوەی چەپی bodyIt fills the whole bodyهەموو body پڕ دەکاتەوەIn the centre of the screenلە ناوەڕاستی شاشەکەدا

بنەماکانی فلاتەر: فێرکاری بۆ ئاستی دەستپێک (1.5 کاتژمێر) | Flutter Fundamentals: Beginner (1.5-Hour)Flutter Kurd Code · Kurdish (Sorani)کوردی (سۆرانی) · 5.3K viewsبینین · 183 likesلایک · Partبەشی 1:05:48–1:09:39 (ofلە 1:30:00)
A Kurdish beginner course: what Flutter is, making an Android emulator, creating and running a project in VS Code, Hello World and hot reload.
کۆرسێکی کوردی بۆ سەرەتاییەکان: چییە، دروستکردنی Android، دروستکردن و کارپێکردنی پرۆژەیەک لە ⁦VS Code⁩ـدا، ⁦Hello World⁩ و .
In Kurdish. Watch 1:05:48-1:09:39 ('Container widget'): a first Container with a size and a colour.
بە کوردی. لە ⁦1:05:48⁩ تا ⁦1:09:39⁩ سەیر بکە (Container widget): یەکەم `Container` بە قەبارە و ڕەنگێکەوە.

The box model: margin, border, padding, childمۆدێلی سندووق: پەراوێز، سنوور، بۆشایی ناوەوە، child

Every Container is built in rings, from the inside out:

هەموو Containerـێک بە ئەڵقە دروست دەبێت، لە ناوەوە بۆ دەرەوە:

child — the content: one widget.
padding — empty space inside the box, between the child and the border. The box's colour fills it.
border — an optional line around the box (it is part of decoration, see Decorating a Container).
margin — empty space outside the border. It is always transparent and keeps the neighbours away.

child — ناوەڕۆکەکە: یەک .
— بۆشایی بەتاڵ لە ناو سندووقەکەدا، لە نێوان منداڵەکە و . ڕەنگی سندووقەکە پڕی دەکاتەوە.
— هێڵێکی ئارەزوومەندانە بە دەوری سندووقەکەدا (بەشێکە لە decoration، بڕوانە ڕازاندنەوەی Container).
— بۆشایی بەتاڵ لە دەرەوەی . هەمیشە ڕوونە و دراوسێکان دوور دەخاتەوە.

margin → border → padding → child. width and height count the padding and the border, never the margin. ← ← ← ⁦child. width⁩ و height و دەژمێرن، بەڵام هەرگیز ناژمێرن.CêIT

If you set width and height, they are the size of the coloured box: the child, the padding and the border together. The margin is added outside that size. So a Container with width: 200 and margin: EdgeInsets.all(10) takes 220 pixels of its parent's width, and its child gets 200 minus the padding.

ئەگەر width و height دابنێیت، ئەوانە قەبارەی سندووقە ڕەنگکراوەکەن: منداڵەکە، و پێکەوە. لە دەرەوەی ئەو قەبارەیە زیاد دەکرێت. بۆیە Containerـێک بە width: 200 و margin: EdgeInsets.all(10) ٢٢٠ لە پانیی باوکەکەی دەگرێت و منداڵەکەی ٢٠٠ کەم وەردەگرێت.

The Container's propertiesتایبەتمەندییەکانی Container

The course lists the Container properties you will use most. Here they are, with what each one really does:

وانەکە ئەو Container دەژمێرێت کە زۆرتر بەکاریان دەهێنیت. ئەمانەن، لەگەڵ ئەوەی هەریەکەیان بەڕاستی دەیکات:

Container properties (the first seven are the course's list) Container (حەوتی یەکەم لیستەکەی وانەکەن)
Property	What it doesچی دەکات
`child`	The one widget inside the box.ئەو یەک لە ناو سندووقەکەدایە.
`color`	Paints the whole box (child area and padding) with one colour.هەموو سندووقەکە (شوێنی منداڵ و ) بە یەک ڕەنگ ڕەنگ دەکات.
`width`, `height`	A fixed size for the box (padding and border included, margin not).قەبارەیەکی جێگیر بۆ سندووقەکە ( و دەژمێردرێن، نا).
`margin`	Empty space outside the box.بۆشایی بەتاڵ لە دەرەوەی سندووقەکە.
`padding`	Empty space between the box's edge (border) and its child, on all four sides.بۆشایی بەتاڵ لە نێوان لێواری سندووقەکە () و منداڵەکەیدا، لە هەر چوار لاوە.
`alignment`	Where the child sits inside the box (and it makes the box expand).منداڵەکە لە کوێی سندووقەکەدا دادەنیشێت (و سندووقەکە گەورە دەکات).
`decoration`	A painted background: colour, border, rounded corners, shadow, gradient, image.پاشبنەمایەکی کێشراو: ڕەنگ، ، گۆشەی خڕ، سێبەر، ، وێنە.
`constraints`	Minimum and maximum width and height.کەمترین و زۆرترین پانی و بەرزی.
`transform`	Turns, moves or scales the box when it is painted.سندووقەکە دەسووڕێنێت، دەجووڵێنێت یان گەورە و بچووکی دەکات لە کاتی کێشاندا.

decoration, borders, shadows and transform have their own lesson: Decorating a Container.

decoration، ، سێبەر و transform وانەی تایبەتی خۆیان هەیە: ڕازاندنەوەی Container.

Quick checkپشکنینی خێراA Container has padding: EdgeInsets.all(20), color: Colors.yellow and a Text child. Which area is yellow?Containerـێک padding: EdgeInsets.all(20)، color: Colors.yellow و منداڵێکی Textـی هەیە. کام ناوچە زەردە؟Only behind the lettersتەنها پشتی پیتەکانThe margin around the boxپەراوێزەکە بە دەوری سندووقەکەداThe text and the 20-pixel padding around itدەقەکە و بۆشایی ناوەوەی ٢٠ پیکسڵی بە دەوریدا

The Container's propertiesتایبەتمەندییەکانی Container

The Container constructor todayدروستکەری Container لە ئەمڕۆدا

The course shows the Container constructor from before null safety. Here it is as it is in Flutter 3.44:

وانەکە Container لە پێش پیشان دەدات. ئەمە شێوەکەیەتی لە ⁦Flutter 3.44⁩ـدا:

Container's constructor in Flutter 3.44دروستکەری Container لە ⁦Flutter 3.44⁩ـداDART

Container({
  super.key,
  this.alignment,            // AlignmentGeometry?
  this.padding,              // EdgeInsetsGeometry?
  this.color,                // Color?
  this.isAntiAlias = true,
  this.decoration,           // Decoration?
  this.foregroundDecoration, // Decoration?
  double? width,
  double? height,
  BoxConstraints? constraints,
  this.margin,               // EdgeInsetsGeometry?
  this.transform,            // Matrix4?
  this.transformAlignment,   // AlignmentGeometry?
  this.child,                // Widget?
  this.clipBehavior = Clip.none,
})

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 2

super.key replaces the old Key key.

super.key جێگەی Key keyـی کۆن دەگرێتەوە.

Lineدێڕی 3-6

? means "may be null": every property is optional.

? واتە "دەکرێت بێنرخ بێت": هەموو ئارەزوومەندانەن.

Lineدێڕی 14

transformAlignment is new: the point the box turns around.

transformAlignment نوێیە: ئەو خاڵەی سندووقەکە بە دەوریدا دەسووڕێتەوە.

Lineدێڕی 16

clipBehavior = Clip.none keeps its default from the course.

clipBehavior = Clip.none بنەڕەتەکەی وانەکە دەپارێزێت.

Giving padding and margin a size: EdgeInsetsقەبارە دان بە بۆشایی ناوەوە و پەراوێز: EdgeInsets

padding and margin take an EdgeInsets value: four numbers, one for each side. There are several ways to build one:

padding و margin نرخێکی EdgeInsets وەردەگرن: چوار ژمارە، بۆ هەر لایەک یەکێک. چەند ڕێگەیەک هەیە بۆ دروستکردنی:

Ways to build EdgeInsetsڕێگەکانی دروستکردنی EdgeInsets
Constructor	Meaningواتا
`EdgeInsets.all(16)`	16 on all four sides.١٦ لە هەر چوار لاوە.
`EdgeInsets.symmetric(horizontal: 24, vertical: 8)`	24 left and right, 8 top and bottom.٢٤ چەپ و ڕاست، ٨ سەرەوە و خوارەوە.
`EdgeInsets.only(top: 20)`	Only the sides you name; the others are 0.تەنها ئەو لایانەی ناویان دەبەیت؛ ئەوانی تر 0ـن.
`EdgeInsets.fromLTRB(10, 5, 50, 5)`	Left, Top, Right, Bottom — in this order (the course uses this one).چەپ، سەرەوە، ڕاست، خوارەوە — بەم ڕیزبەندییە (وانەکە ئەمە بەکار دەهێنێت).
`EdgeInsetsDirectional.only(start: 40, end: 8)`	start and end follow the reading direction: start is the right side in a Kurdish app.start و end بەدوای ئاڕاستەی خوێندنەوەدا دەڕۆن: لە کوردیدا start لای ڕاستە.

Four ways to give spaceچوار ڕێگە بۆ دانی بۆشاییDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class EdgeInsetsDemo extends StatelessWidget {
  const EdgeInsetsDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.all(16), // 16 on every side
          color: Colors.amber,
          child: const Text('all'),
        ),
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
          color: Colors.lightBlue,
          child: const Text('symmetric'),
        ),
        Container(
          margin: const EdgeInsets.only(top: 20),
          padding: const EdgeInsets.fromLTRB(10, 5, 50, 5), // left, top, right, bottom
          color: Colors.lightGreen,
          child: const Text('only + fromLTRB'),
        ),
        Container(
          // start/end follow the text direction: in a Kurdish (RTL) app
          // start is the right side.
          padding: const EdgeInsetsDirectional.only(start: 40, end: 8),
          color: Colors.pink[100],
          child: const Text('directional'),
        ),
      ],
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 11

const: the numbers never change, so Flutter builds the value once.

const: ژمارەکان هەرگیز ناگۆڕێن، بۆیە Flutter نرخەکە تەنها یەک جار دروست دەکات.

Lineدێڕی 22

L-T-R-B: the right side gets 50.

⁦L-T-R-B⁩: لای ڕاست ٥٠ وەردەگرێت.

Lineدێڕی 29

40 on the left in English, on the right in Kurdish.

٤٠ لە چەپ لە ئینگلیزیدا، لە ڕاست لە کوردیدا.

Five frames. Left, the code of a grey bar and a green Container with the text 'Hi' inside a Column; one new line is highlighted in each frame. Right, the result. 1: the green box hugs 'Hi'. 2: padding 16 — the green box grows around the text. 3: padding 32 — it grows more. 4: margin 16 — a dashed space appears outside the green box and pushes it away from the grey bar. 5: margin 32 — the green box keeps its size and only moves further away. — Padding grows the box from inside; margin moves it from outside. سندووقەکە لە ناوەوە گەورە دەکات؛ لە دەرەوە دەیجووڵێنێت.CêIT

Quick checkپشکنینی خێراEdgeInsets.fromLTRB(10, 5, 50, 5) — on which side is the space largest?EdgeInsets.fromLTRB(10, 5, 50, 5) — بۆشایی لە کام لا لە هەموویان گەورەترە؟LeftچەپRightڕاستTopسەرەوە

How big is a Container?Container چەند گەورەیە؟

The course's examples show something surprising: the same green Container is sometimes a thin strip, sometimes as big as the screen, sometimes just big enough for a button. A Container decides its size from four things: its child, its width/height/constraints, its alignment, and how much room its parent gives it. Flutter's documentation lists the rules (the general idea of constraints is in Layout Widgets):

نموونەکانی وانەکە شتێکی سەیر پیشان دەدەن: هەمان Containerـی سەوز هەندێک جار پارچەیەکی باریکە، هەندێک جار بە قەد شاشەکە گەورەیە، هەندێک جار تەنها هێندەی دوگمەیەک گەورەیە. Container قەبارەکەی لە چوار شتەوە دیاری دەکات: childـەکەی، width/height/constraintsـەکەی، alignmentـەکەی و ئەو شوێنەی باوکەکەی پێی دەدات. بەڵگەنامەکانی Flutter ڕێساکان دەژمێرن (بیرۆکە گشتییەکەی لە ویجێتەکانی ڕێکخستنی ڕووکارـدایە):

The Container sizing rules (Flutter API: Container, Layout behavior)ڕێساکانی دیاریکردنی قەبارەی ⁦Container (Flutter API: Container⁩، ⁦Layout behavior⁩)
The Container has…Containerـەکە…	Its sizeقەبارەکەی
no child, no size, no alignmentنە منداڵی هەیە، نە قەبارە، نە alignment	as big as the parent allows (as small as possible if the parent has no limit)هێندەی ڕێگەی باوکەکەی گەورە دەبێت (ئەگەر باوکەکە سنووری نەبێت تا بتوانێت بچووک)
`width` / `height` (or `constraints`)`width` / `height` (یان `constraints`)	that size, as far as the parent allowsئەو قەبارەیە، هێندەی باوکەکەی ڕێگە بدات
a child, no size, no alignmentمنداڵێک، بەبێ قەبارە و alignment	shrinks around the child (+ padding)بە دەوری منداڵەکەدا بچووک دەبێتەوە (⁦+⁩ )
`alignment` (and a child)`alignment` (و منداڵێک)	expands to fill the parent, then places the childگەورە دەبێت تا باوکەکە پڕ بکاتەوە، پاشان منداڵەکە دادەنێت

Five frames of a phone 'Flutter Container Example' with the same light-green Container (padding fromLTRB(50, 30, 50, 30), margin fromLTRB(30, 55, 50, 70)). 1: in a Center with no child, the green area fills the body minus the margin. 2: in a Row with no child, only a 100-pixel-wide strip. 3: with a button child, the green box wraps the button plus 100 across and 60 down. 4: with alignment bottomRight, the box fills again and the button sits 50 from the right and 30 from the bottom. 5: inside a ConstrainedBox of at most 300 × 200 (dashed), the button is squeezed to 15 pixels high. — The same Container, five sizes: the child, the alignment and the parent decide.هەمان Container، پێنج قەبارە: منداڵ، alignment و باوک بڕیار دەدەن.CêIT

Quick checkپشکنینی خێراAn empty Container with no width, height or alignment is the body's child (inside a Center). How big is it?Containerـێکی بەتاڵ بەبێ width، height یان alignment منداڵی bodyـیە (لە ناو Centerـێکدا). چەند گەورەیە؟100 × 100 by defaultبە بنەڕەت ١٠٠ × ١٠٠0 × 0, so it is invisible⁦0 × 0⁩، بۆیە نابینرێتAs big as the body allowsهێندەی ڕێگەی body گەورە

How big is a Container?Container چەند گەورەیە؟

Example 1: a fixed sizeنموونەی ١: قەبارەی جێگیر

The course's first example gives the Container a width and a height of 200 and a padding, but no child:

یەکەم نموونەی وانەکە width و heightـی ٢٠٠ و دەدات بە Container، بەڵام منداڵی نییە:

Center > Container 200 × 200⁦Center > Container⁩ ٢٠٠ × ٢٠٠DART

Center(
  child: Container(
    color: Colors.greenAccent[100],
    padding: const EdgeInsets.fromLTRB(10, 5, 50, 5),
    width: 200,
    height: 200,
  ),
)

The size is exactly 200 × 200, because width and height win. The padding changes nothing you can see: it only says how much room a child would get. With fromLTRB(10, 5, 50, 5) a child would get:

قەبارەکە ڕێک ٢٠٠ × ٢٠٠ـە، چونکە width و height دەیبەنەوە. هیچ شتێکی دیار ناگۆڕێت: تەنها دەڵێت منداڵێک ئەگەر هەبووایە چەند شوێنی دەبوو. بە fromLTRB(10, 5, 50, 5) منداڵێک ئەمە وەردەگرێت:

\begin{aligned} \text{width} &= 200 - 10 - 50 = 140 \\ \text{height} &= 200 - 5 - 5 = 190 \end{aligned}

Quick checkپشکنینی خێراA Container has width: 200, height: 200 and padding: EdgeInsets.all(30), with no child. How big is the green square?Containerـێک width: 200, height: 200 و padding: EdgeInsets.all(30)ـی هەیە و منداڵی نییە. چوارگۆشە سەوزەکە چەند گەورەیە؟200 × 200٢٠٠ × ٢٠٠260 × 260٢٦٠ × ٢٦٠140 × 140١٤٠ × ١٤٠

How big is a Container?Container چەند گەورەیە؟

Examples 2 and 3: no child, two parentsنموونەی ٢ و ٣: بێ منداڵ، دوو باوک

The next two examples use the same empty Container with padding and margin. Only the parent changes: first a Row, then a Center.

دوو نموونەکەی دواتر هەمان Containerـی بەتاڵ بە و بەکار دەهێنن. تەنها باوکەکە دەگۆڕێت: یەکەم Row، پاشان Center.

Example 2: inside a Rowنموونەی ٢: لە ناو RowDART

Row(
  children: [
    Container(
      color: Colors.greenAccent[100],
      padding: const EdgeInsets.fromLTRB(50, 30, 50, 30),
      margin: const EdgeInsets.fromLTRB(30, 55, 50, 70),
    ),
  ],
)

Example 3: inside a Centerنموونەی ٣: لە ناو CenterDART

Center(
  child: Container(
    color: Colors.greenAccent[100],
    padding: const EdgeInsets.fromLTRB(50, 30, 50, 30),
    margin: const EdgeInsets.fromLTRB(30, 55, 50, 70),
  ),
)

In a Row, a child may be as wide as it likes (a Row has no width limit for its children). An empty Container then takes the smallest width it can: just its padding, $50 + 50 = 100$ . Down the screen the Row has a limit, so the Container fills the body's height minus the margin: $744 - 55 - 70 = 619$ .
In a Center, the limits are the whole body in both directions, so the empty Container fills it: $400 - 30 - 50 = 320$ wide and 619 high.

لە ناو Rowـدا، منداڵ دەتوانێت هێندەی بیەوێت پان بێت (Row سنووری پانی بۆ منداڵەکانی دانانێت). ئەو کاتە Containerـی بەتاڵ کەمترین پانی دەگرێت کە دەتوانێت: تەنها : $50 + 50 = 100$ . بە درێژایی شاشەکە Row سنووری هەیە، بۆیە Containerـەکە بەرزیی body پڕ دەکاتەوە جگە لە : $744 - 55 - 70 = 619$ .
لە ناو Centerـدا، سنوورەکان لە هەردوو ئاڕاستەدا هەموو bodyـن، بۆیە Containerـی بەتاڵ پڕی دەکاتەوە: $400 - 30 - 50 = 320$ پان و ٦١٩ بەرز.

Measured with Flutter 3.44 on a 400 × 800 screen (logical pixels) with a 56-pixel app bar, so the body is 400 × 744.

بە ⁦Flutter 3.44⁩ لەسەر شاشەیەکی ٤٠٠ × ٨٠٠ ( لۆجیکی) پێوراوە کە ٥٦ ، بۆیە body ٤٠٠ × ٧٤٤ـە.

Quick checkپشکنینی خێراWhy is the empty Container only 100 pixels wide inside the Row?بۆچی Containerـی بەتاڵ لە ناو Rowـدا تەنها ١٠٠ پانە؟A Row always makes children 100 pixels wideRow هەمیشە منداڵەکانی ١٠٠ پیکسڵ پان دەکاتThe margin is 100 pixelsپەراوێز ١٠٠ پیکسڵەThe Row sets no width limit, so the box takes the smallest width it can: its paddingRow هیچ سنوورێکی پانی دانانێت، بۆیە سندووقەکە کەمترین پانی دەگرێت کە دەتوانێت: بۆشایی ناوەوەکەی

How big is a Container?Container چەند گەورەیە؟

Example 4: a child makes the box shrinkنموونەی ٤: منداڵ سندووقەکە بچووک دەکاتەوە

Now the Container gets a child, a button. The same box shrinks around it:

ئێستا Containerـەکە منداڵێک وەردەگرێت، دوگمەیەک. هەمان سندووق بە دەوریدا بچووک دەبێتەوە:

Example 4: a button inside the boxنموونەی ٤: دوگمەیەک لە ناو سندووقەکەداDART

Center(
  child: Container(
    color: Colors.greenAccent[100],
    padding: const EdgeInsets.fromLTRB(50, 30, 50, 30),
    margin: const EdgeInsets.fromLTRB(30, 55, 50, 70),
    child: ElevatedButton(
      onPressed: () {},
      child: const Text('Button'),
    ),
  ),
)

The green box is now the button's size plus the padding: $50 + 50 = 100$ pixels wider and $30 + 30 = 60$ pixels taller than the button. Because the parent is a Center, the box sits in the middle; the margin is still there, outside the green, but you cannot see it.

سندووقە سەوزەکە ئێستا قەبارەی دوگمەکەیە لەگەڵ : $50 + 50 = 100$ پانتر و $30 + 30 = 60$ بەرزتر لە دوگمەکە. چونکە باوکەکە Centerـە، سندووقەکە لە ناوەڕاستدا دادەنیشێت؛ هێشتا لەوێیە، لە دەرەوەی سەوزەکە، بەڵام نابینرێت.

How big is a Container?Container چەند گەورەیە؟

Example 5: ConstrainedBox sets a maximumنموونەی ٥: ConstrainedBox زۆرترین قەبارە دادەنێت

ConstrainedBox is a widget that passes limits (constraints) to its child: here, at most 300 wide and at most 200 high. The whole Container — margin included — must fit inside those limits.

ConstrainedBox کە دەدات بە منداڵەکەی: لێرەدا زۆرترین ٣٠٠ پان و زۆرترین ٢٠٠ بەرز. هەموو Containerـەکە — — دەبێت لە ناو ئەو سنوورانەدا جێی ببێتەوە.

Example 5: the box inside a ConstrainedBoxنموونەی ٥: سندووقەکە لە ناو ConstrainedBoxDART

ConstrainedBox(
  constraints: const BoxConstraints(
    maxWidth: 300,
    maxHeight: 200,
  ),
  child: Container(
    color: Colors.greenAccent[100],
    padding: const EdgeInsets.fromLTRB(50, 30, 50, 30),
    margin: const EdgeInsets.fromLTRB(30, 55, 50, 70),
    child: ElevatedButton(
      onPressed: () {},
      child: const Text('Button'),
    ),
  ),
)

Down the screen there is no room left for the button. The 200 pixels must hold the margin and the padding first:

بە بەرزی هیچ شوێنێک بۆ دوگمەکە نامێنێتەوە. ٢٠٠ دەبێت سەرەتا و بگرێتە خۆ:

200 - \underbrace{(55 + 70)}_{\text{margin}} - \underbrace{(30 + 30)}_{\text{padding}} = 15

A Container also has its own constraints property, so you often do not need a separate ConstrainedBox. This box grows with its text but never becomes wider than 250:

Container خۆی constraintsـی هەیە، بۆیە زۆر جار پێویستت بە ConstrainedBoxـی جیا نییە. ئەم سندووقە لەگەڵ دەقەکەیدا گەورە دەبێت بەڵام هەرگیز لە ٢٥٠ پانتر نابێت:

Container's own constraintsconstraintsـی خودی ContainerDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class ConstraintsDemo extends StatelessWidget {
  const ConstraintsDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        constraints: const BoxConstraints(
          minWidth: 100,
          maxWidth: 250,
          minHeight: 50,
        ),
        color: Colors.orange[200],
        padding: const EdgeInsets.all(8),
        child: const Text('I grow with my text, but never wider than 250'),
      ),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 10-14

At least 100 × 50, at most 250 wide.

لانیکەم ١٠٠ × ٥٠، زۆرترین ٢٥٠ پان.

Quick checkپشکنینی خێراA ConstrainedBox allows at most 100 pixels of height. Its Container has margin: EdgeInsets.all(20) and padding: EdgeInsets.all(20). How much height is left for the child?ConstrainedBoxـێک زۆرترین ١٠٠ بەرزی ڕێگە دەدات. Containerـەکەی margin: EdgeInsets.all(20) و padding: EdgeInsets.all(20)ـی هەیە. چەند بەرزی بۆ منداڵەکە دەمێنێتەوە؟20٢٠60٦٠100١٠٠

How big is a Container?Container چەند گەورەیە؟

Example 6: alignment makes the box expandنموونەی ٦: alignment سندووقەکە گەورە دەکات

The last example adds alignment: Alignment.bottomRight. With an alignment, the Container expands to fill its parent again, and then puts the child in the chosen place inside its padding:

دوایین نموونە alignment: Alignment.bottomRight زیاد دەکات. بە بوونی alignment، Container دووبارە گەورە دەبێت تا باوکەکەی پڕ بکاتەوە، پاشان منداڵەکە لە شوێنی هەڵبژێردراو لە ناو دادەنێت:

Example 6: alignment bottomRightنموونەی ٦: ⁦alignment bottomRight⁩DART

Center(
  child: Container(
    alignment: Alignment.bottomRight,
    color: Colors.greenAccent[100],
    padding: const EdgeInsets.fromLTRB(50, 30, 50, 30),
    margin: const EdgeInsets.fromLTRB(30, 55, 50, 70),
    child: ElevatedButton(
      onPressed: () {},
      child: const Text('Button'),
    ),
  ),
)

Compare with example 4: the only new line is alignment, and the box jumps from button-size to almost screen-size. That is the fourth sizing rule. (The course's code has no Center around this Container, but its picture is labelled Center; the result is the same, because an expanding box fills the body either way.)

بەراوردی بکە لەگەڵ نموونەی ٤: تاکە دێڕی نوێ alignmentـە و سندووقەکە لە قەبارەی دوگمەیەکەوە باز دەدات بۆ نزیکەی قەبارەی شاشە. ئەمە ڕێسای چوارەمی قەبارەیە. (کۆدەکەی وانەکە هیچ Centerـێکی بە دەوری ئەم Containerـەدا نییە، بەڵام وێنەکەی ناوی Centerـی لەسەرە؛ ئەنجامەکە هەمانە، چونکە سندووقێکی گەورەبوو بە هەردوو شێوەکە body پڕ دەکاتەوە.)

Quick checkپشکنینی خێراYou add alignment: Alignment.center to a Container that wraps a small text. What happens?alignment: Alignment.center زیاد دەکەیت بۆ Containerـێک کە دەقێکی بچووکی تێدایە. چی ڕوو دەدات؟The box grows to fill its parent and the text sits in its middleسندووقەکە گەورە دەبێت تا باوکەکەی پڕ بکاتەوە و دەقەکە لە ناوەڕاستیدا دادەنیشێتNothing: the box still hugs the textهیچ: سندووقەکە هێشتا بە دەقەکەوە نووساوەThe text grows biggerدەقەکە گەورەتر دەبێت

Alignment: a point between −1 and 1Alignment: خاڵێک لە نێوان ⁦−1⁩ و 1

An Alignment is a point inside the box given by two numbers, x across and y down, each from −1 to 1. (0, 0) is the centre, (−1, −1) the top-left corner and (1, 1) the bottom-right. The named values such as Alignment.topCenter are just short names for these points; you can also give any point yourself, for example Alignment(0.5, 0.5).

Alignment خاڵێکە لە ناو سندووقەکەدا کە بە دوو ژمارە دیاری دەکرێت، x بە پانی و y بە بەرزی، هەریەکەیان لە ⁦−1⁩ بۆ ⁦1. (0, 0)⁩ ناوەڕاستە، ⁦(−1, −1)⁩ گۆشەی سەرەوەی چەپ و ⁦(1, 1)⁩ گۆشەی خوارەوەی ڕاست. نرخە ناودارەکانی وەک Alignment.topCenter تەنها ناوی کورتن بۆ ئەم خاڵانە؛ دەتوانیت هەر خاڵێکیش خۆت بدەیت، بۆ نموونە Alignment(0.5, 0.5).

x and y run from −1 to 1; on a screen y grows downwards.x و y لە ⁦−1⁩ بۆ 1 دەڕۆن؛ لەسەر شاشە y بەرەو خوارەوە زیاد دەبێت.CêIT

Three alignmentsسێ جۆری ڕێکخستنی شوێنDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class AlignmentDemo extends StatelessWidget {
  const AlignmentDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 120,
          color: Colors.grey[300],
          alignment: Alignment.topCenter, // the same as Alignment(0.0, -1.0)
          child: const Text('top centre'),
        ),
        Container(
          height: 120,
          color: Colors.grey[200],
          alignment: const Alignment(0.5, 0.5), // between the centre and the bottom-right
          child: const Text('(0.5, 0.5)'),
        ),
        Container(
          height: 120,
          color: Colors.grey[300],
          alignment: AlignmentDirectional.centerEnd, // right in LTR, left in RTL
          child: const Text('centre end'),
        ),
      ],
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 13

A named point: the middle of the top edge.

خاڵێکی ناودار: ناوەڕاستی لێواری سەرەوە.

Lineدێڕی 19

Any point you like.

هەر خاڵێک کە بتەوێت.

Lineدێڕی 25

AlignmentDirectional uses start/end, so it mirrors in Kurdish apps.

AlignmentDirectional ⁦start/end⁩ بەکار دەهێنێت، بۆیە لە کوردییەکاندا پێچەوانە دەبێتەوە.

Common mistakesهەڵە باوەکان

Mistakeهەڵە	What happensچی ڕوو دەدات	Fixچاککردن
Two `child:` arguments, or `children:` on a Containerدوو `child:`، یان `children:` لەسەر Container	Compile error	One child: put a `Column`, `Row` or `Stack` insideیەک منداڵ: `Column`، `Row` یان `Stack`ـێک بخە ناوەوە
`const Container(...)const Container(...)`	Compile error: no const constructor: const نییە	Drop `const` before `Container`; keep it on the arguments`const` لە پێش `Container` لابە؛ لەسەر بیهێڵەوە
`onPressed() {}` inside a button`onPressed() {}` لە ناو دوگمەیەکدا	Syntax errorهەڵەی	`onPressed: () {}onPressed: () {}`
Expecting an empty Container to be smallچاوەڕوانی ئەوە کە Containerـی بەتاڵ بچووک بێت	It fills its parentباوکەکەی پڕ دەکاتەوە	Give it a size or a childقەبارە یان منداڵێکی پێ بدە
Adding `alignment` and expecting the box to stay smallزیادکردنی `alignment` و چاوەڕوانی ئەوە کە سندووقەکە بچووک بمێنێتەوە	The box expandsسندووقەکە گەورە دەبێت	Use a fixed size, or put the Container in a `Center` without `alignment`قەبارەیەکی جێگیر بەکار بهێنە، یان Container بخە ناو `Center` بەبێ `alignment`
Forgetting that margin is outside `width`لەبیرکردنی ئەوەی لە دەرەوەی `width`ـە	The layout is wider than planned لە پلانەکە پانترە	Total = width + left margin + right marginکۆی گشتی = ⁦width +⁩ چەپ + ڕاست
`EdgeInsets.only(left: 16)` in a Kurdish app`EdgeInsets.only(left: 16)` لە کوردیدا	The space is on the wrong sideبۆشاییەکە لە لای هەڵەدایە	`EdgeInsetsDirectional.only(start: 16)EdgeInsetsDirectional.only(start: 16)`
Using `color` and `decoration` togetherبەکارهێنانی `color` و `decoration` پێکەوە	An error in debug modeهەڵەیەک لە دۆخی debugـدا	Put the colour inside `BoxDecoration` (the colour rule)ڕەنگەکە بخە ناو `BoxDecoration` (ڕێسای ڕەنگ)

Exercisesڕاهێنانەکان

Exerciseڕاهێنان1. Count the pixels١. پیکسڵەکان بژمێرە

A Container has width: 200, height: 100, padding: EdgeInsets.all(20) and margin: EdgeInsets.all(10). (a) How much room does its child get? (b) How much room does the whole Container take inside its parent?

Containerـێک width: 200، height: 100، padding: EdgeInsets.all(20) و margin: EdgeInsets.all(10)ـی هەیە. (أ) منداڵەکەی چەند شوێن وەردەگرێت؟ (ب) هەموو Containerـەکە چەند شوێن لە ناو باوکەکەیدا دەگرێت؟

Show answerوەڵامەکە پیشان بدە

\begin{aligned} \text{(a) child} &: (200 - 2 \cdot 20) \times (100 - 2 \cdot 20) = 160 \times 60 \\ \text{(b) total} &: (200 + 2 \cdot 10) \times (100 + 2 \cdot 10) = 220 \times 120 \end{aligned}

Exerciseڕاهێنان2. Predict the course's boxes٢. سندووقەکانی وانەکە پێشبینی بکە

Without running the code, say how big the green Container (padding fromLTRB(50, 30, 50, 30)) is in each case, on a body of 400 × 744: (a) in a Center with no child; (b) in a Center with a 90 × 40 button as its child; (c) as (b), plus alignment: Alignment.bottomRight.

بەبێ جێبەجێکردنی کۆدەکە، بڵێ Containerـە سەوزەکە (padding fromLTRB(50, 30, 50, 30)) لە هەر حاڵەتێکدا چەند گەورەیە، لەسەر bodyـێکی ٤٠٠ × ٧٤٤: (أ) لە ناو Center بەبێ منداڵ؛ (ب) لە ناو Center بە منداڵێکی دوگمەی ٩٠ × ٤٠؛ (ج) وەک (ب)، لەگەڵ alignment: Alignment.bottomRight.

Show answerوەڵامەکە پیشان بدە

(a) It fills the body minus the margin fromLTRB(30, 55, 50, 70): 320 × 619.
(b) It wraps the button plus the padding: 190 × 100, in the middle.
(c) The alignment makes it expand again to 320 × 619; the button sits in the bottom-right corner, 50 from the green's right edge and 30 from its bottom.

(أ) body پڕ دەکاتەوە جگە لە fromLTRB(30, 55, 50, 70): ٣٢٠ × ٦١٩.
(ب) دوگمەکە و دەگرێتە خۆی: ١٩٠ × ١٠٠، لە ناوەڕاستدا.
(ج) دووبارە گەورەی دەکاتەوە بۆ ٣٢٠ × ٦١٩؛ دوگمەکە لە گۆشەی خوارەوەی ڕاستدا دادەنیشێت، ٥٠ لە لێواری ڕاستی سەوزەکە و ٣٠ لە خوارەوەی.

Exerciseڕاهێنان3. A price tag٣. نرخنامەیەک

Build a price tag for a bazaar app: an amber box 160 pixels wide, with 16 pixels of space left and right of the text and 8 above and below it, 12 pixels of space all round outside the box, and the text '2,000 IQD' (font size 20) in its centre.

نرخنامەیەک بۆ بازاڕ دروست بکە: سندووقێکی زەرد بە پانیی ١٦٠ ، ١٦ بۆشایی لە چەپ و ڕاستی دەقەکە و ٨ لە سەرەوە و خوارەوەی، ١٢ بۆشایی لە هەموو لایەکی دەرەوەی سندووقەکە و دەقی '⁦2,000 IQD⁩' (قەبارەی فۆنت ٢٠) لە ناوەڕاستیدا.

Hintئاماژە

You need width, margin, padding (symmetric) and color. To centre the text, think twice before using alignment (remember the fourth sizing rule).

پێویستت بە width، margin، padding ⁦(symmetric)⁩ و color هەیە. بۆ ناوەڕاستکردنی دەقەکە، پێش بەکارهێنانی alignment باش بیر بکەرەوە (ڕێسای چوارەمی قەبارە لەبیر بێت).

Show answerوەڵامەکە پیشان بدە

One possible answerوەڵامێکی گونجاوDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class PriceTag extends StatelessWidget {
  const PriceTag({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 160,
      margin: const EdgeInsets.all(12),
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      color: Colors.amber,
      child: const Text(
        '2,000 IQD',
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 20),
      ),
    );
  }
}

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 10

Space outside the box.

بۆشایی لە دەرەوەی سندووقەکە.

Lineدێڕی 11

Space inside, around the text.

بۆشایی لە ناوەوە، بە دەوری دەقەکەدا.

Lineدێڕی 15

The fixed width gives the text exactly 128 pixels (160 − 32), so textAlign can centre it.

پانییە جێگیرەکە ڕێک ١٢٨ دەدات بە دەقەکە ( $160 - 32$ )، بۆیە textAlign دەتوانێت بیخاتە ناوەڕاست.

Why not alignment: Alignment.center? An alignment makes a Container expand to fill its parent (the fourth sizing rule). In a Column the tag would stay small, but as the body of a screen it would become as tall as the whole screen. textAlign centres the text without changing the box's size.

بۆچی alignment: Alignment.center نا؟ Container گەورە دەکات تا باوکەکەی پڕ بکاتەوە (ڕێسای چوارەمی قەبارە). لە ناو Columnـدا نرخنامەکە بچووک دەمێنێتەوە، بەڵام وەک bodyـی شاشەیەک بە قەد هەموو شاشەکە بەرز دەبێت. textAlign دەقەکە دەخاتە ناوەڕاست بەبێ ئەوەی قەبارەی سندووقەکە بگۆڕێت.

Exerciseڕاهێنان4. Fix the course's code٤. کۆدەکەی وانەکە چاک بکەرەوە

This is the course's Container with a button, as written in the notes. Find the mistakes and write a version that compiles:

ئەمە Containerـەکەی وانەکەیە کە دوگمەیەکی تێدایە، وەک لە تێبینییەکاندا نووسراوە. هەڵەکان بدۆزەوە و وەشانێک بنووسە کە کۆمپایل ببێت:

The course's version (does not compile)وەشانەکەی وانەکە (کۆمپایل نابێت)DART

Center(
  child: Container(
    color: Colors.greenAccent[100],
    padding: EdgeInsets.fromLTRB(50, 30, 50, 30),
    margin: EdgeInsets.fromLTRB(30, 55, 50, 70),
    child: ElevatedButton(
      child: Text("Button"),
      onPressed() {},
    )
  )
)

Show answerوەڵامەکە پیشان بدە

onPressed() {} must be the named argument onPressed: () {},.
The brackets of Center(...) and Container(...) are closed correctly; Dart only needs trailing commas for good formatting. Inside a build method the whole widget is returned: return Center(...);.
Good style: const on the EdgeInsets and the Text, and child last.

onPressed() {} دەبێت onPressed: () {}, بێت.
کەوانەکانی Center(...) و Container(...) بە دروستی داخراون؛ فاریزەی کۆتایی تەنها بۆ ڕێکخستنی جوانی کۆدەکەیە. لە ناو میتۆدی buildـدا هەموو دەگەڕێنرێتەوە: return Center(...);.
شێوازی باش: const لەسەر EdgeInsets و Text؛ هەروەها child لە کۆتاییدا.

A version that compilesوەشانێک کە کۆمپایل دەبێتDARTRuns on a phone (or an emulator)لەسەر مۆبایل کار دەکات

import 'package:flutter/material.dart';

class ButtonBox extends StatelessWidget {
  const ButtonBox({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.greenAccent[100],
        padding: const EdgeInsets.fromLTRB(50, 30, 50, 30),
        margin: const EdgeInsets.fromLTRB(30, 55, 50, 70),
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('Button'),
        ),
      ),
    );
  }
}

Quick checkپشکنینی خێراWhich change makes a Container expand to fill its parent even though it has a child?کام گۆڕانکاری Containerـێک گەورە دەکات تا باوکەکەی پڕ بکاتەوە هەرچەندە منداڵیشی هەیە؟Adding alignmentزیادکردنی alignmentAdding paddingزیادکردنی paddingAdding colorزیادکردنی color

Summaryپوختە

A Container is a box around one child. It is like an HTML <div>, but with a single child.
The box model, from the inside out: child → padding → border → margin. width/height include padding and border, not margin.
color paints the whole box. Padding and margin take EdgeInsets (all, symmetric, only, fromLTRB) or EdgeInsetsDirectional for start/end.
Size rules: no child → as big as allowed; size given → that size; child → shrinks around it; alignment → expands. Parents such as Row, Center and ConstrainedBox set the limits.
Alignment(x, y) places the child with x and y from −1 to 1; AlignmentDirectional mirrors in Kurdish apps.

Container سندووقێکە بە دەوری یەک منداڵدا. وەک <div>ـی HTML وایە، بەڵام تەنها یەک منداڵی هەیە.
، لە ناوەوە بۆ دەرەوە: child ← ← ← . width/height و دەگرنە خۆ، نا.
color هەموو سندووقەکە ڕەنگ دەکات. و EdgeInsets وەردەگرن (all، symmetric، only، fromLTRB) یان EdgeInsetsDirectional بۆ ⁦start/end⁩.
ڕێساکانی دیاریکردنی قەبارە: بێ منداڵ ← هێندەی ڕێگەپێدراو گەورە؛ قەبارەی دراو ← ئەو قەبارەیە؛ منداڵ ← بە دەوریدا بچووک دەبێتەوە؛ alignment ← گەورە دەبێت. باوکەکانی وەک Row، Center و ConstrainedBox دادەنێن.
Alignment(x, y) منداڵەکە بە x و y لە ⁦−1⁩ بۆ 1 دادەنێت؛ AlignmentDirectional لە کوردییەکاندا پێچەوانە دەبێتەوە.

Review questionsپرسیارەکانی پێداچوونەوە

What is the difference between padding and margin?جیاوازیی بۆشایی ناوەوە و پەراوێز چییە؟

Padding is space inside the box, between the border and the child, and it takes the box's colour. Margin is space outside the border; it is transparent and keeps neighbours away.

بۆشایی لە ناو سندووقەکەدایە، لە نێوان و منداڵەکەدا. ڕەنگی سندووقەکە وەردەگرێت. بۆشایی لە دەرەوەی ؛ ڕوونە و دراوسێکان دوور دەخاتەوە.

Why is an empty Container in a Row thin, but in a Center large?بۆچی Containerـی بەتاڵ لە ناو Rowـدا باریکە، بەڵام لە ناو Centerـدا گەورەیە؟

A Row gives no width limit, so the empty box takes the smallest width (its padding). A Center gives the whole body as the limit, so the box fills it.

Row سنووری پانی نادات، بۆیە سندووقە بەتاڵەکە کەمترین پانی دەگرێت (). Center هەموو body وەک سنوور دەدات، بۆیە سندووقەکە پڕی دەکاتەوە.

How many children can a Container have?Container دەتوانێت چەند منداڵی هەبێت؟

Exactly one, in child. For several, put a Row, Column or Stack inside it.

تەنها یەک، لە childـدا. بۆ زیاتر، Row، Column یان Stackـێک بخە ناوییەوە.

Videoڤیدیۆ

Watch a videoسەیری ڤیدیۆیەک بکە

A video that viewers liked a lot and praised in their comments, chosen for this lesson.ڤیدیۆیەک کە بینەران زۆریان پێ خۆش بووە و لە کۆمێنتەکانیاندا ستایشیان کردووە، بۆ ئەم وانەیە هەڵبژێردراوە.

📱 FULL Flutter Beginner Course • Programming Basics / Widgets / Navigation / User Input / UIMitch Koko · Englishئینگلیزی · 1.6M viewsبینین · 46K likesلایک · Partبەشی 31:42–34:22 (ofلە 2:23:25)
Mitch Koko's calm beginner course in Dart and Flutter: variables, operators, if/else, switch, loops, functions, collections, a first screen and a counter.
کۆرسە ئارامەکەی ⁦Mitch Koko⁩ بۆ سەرەتاییەکان لە و : ، ، `if/else`، `switch`، ، ، `List`/`Set`/`Map`، یەکەم شاشە و .
Watch 31:42-34:22 ('CONTAINER'): a box with a height, width and colour around one child, padding with EdgeInsets.all, symmetric and only, then a BoxDecoration.
لە ⁦31:42⁩ تا ⁦34:22⁩ سەیر بکە (CONTAINER): سندووقێک بە بەرزی، پانی و ڕەنگ بە دەوری یەک `child`ـدا، بە `EdgeInsets.all` و `symmetric` و `only`، پاشان `BoxDecoration`.

Lesson complete!وانەکە تەواو بوو!

Well done. Review the key terms, then go on to the next lesson.دەستخۆش. سەیرێکی زاراوە سەرەکییەکان بکەرەوە، پاشان بڕۆ بۆ وانەی داهاتوو.

Key termsزاراوە سەرەکییەکان

Next lessonوانەی داهاتوو

Decorating a Container: Border, Radius, Shadow, Transformڕازاندنەوەی Container: سنوور، گۆشەی خڕ، سێبەر، transform

Related lecturesوانە پەیوەندیدارەکان

References and further readingسەرچاوەکان و خوێندنەوەی زیاتر

This lecture is a first edition. The Kurdish text and terminology are waiting for review by Kurdish IT teachers.ئەم وانەیە چاپی یەکەمە. دەقە کوردییەکە و زاراوەکانی چاوەڕێی پێداچوونەوەی مامۆستایانی کوردی بواری IT ن.

Container: Size, Padding, Margin and AlignmentContainer: قەبارە، بۆشایی ناوەوە، پەراوێز و ڕێکخستنی شوێن

What you will learnچی فێر دەبیت

What is a Container?Container چییە؟

A box like an HTML <div>سندووقێک وەک <div>ـی HTML

A first Containerیەکەم Container

The box model: margin, border, padding, childمۆدێلی سندووق: پەراوێز، سنوور، بۆشایی ناوەوە، child

The Container's propertiesتایبەتمەندییەکانی Container

The Container constructor todayدروستکەری Container لە ئەمڕۆدا

Giving padding and margin a size: EdgeInsetsقەبارە دان بە بۆشایی ناوەوە و پەراوێز: EdgeInsets

How big is a Container?Container چەند گەورەیە؟

Example 1: a fixed sizeنموونەی ١: قەبارەی جێگیر

Examples 2 and 3: no child, two parentsنموونەی ٢ و ٣: بێ منداڵ، دوو باوک

Example 4: a child makes the box shrinkنموونەی ٤: منداڵ سندووقەکە بچووک دەکاتەوە

Example 5: ConstrainedBox sets a maximumنموونەی ٥: ConstrainedBox زۆرترین قەبارە دادەنێت

Example 6: alignment makes the box expandنموونەی ٦: alignment سندووقەکە گەورە دەکات

Alignment: a point between −1 and 1Alignment: خاڵێک لە نێوان ⁦−1⁩ و 1

Common mistakesهەڵە باوەکان

Exercisesڕاهێنانەکان

Summaryپوختە

Watch a videoسەیری ڤیدیۆیەک بکە

Lesson complete!وانەکە تەواو بوو!

Key termsزاراوە سەرەکییەکان

Related lecturesوانە پەیوەندیدارەکان

A box like an HTML `<div>`سندووقێک وەک `<div>`ـی HTML