CodeBlanks Logo Icon CodeBlanks
Login Register

EdgeInsets

Learn the difference between EdgeInsets.all, only and symmetric.

EdgeInsets

EdgeInsets is the object that defines the spacing amount for Padding and margin. It offers three main constructors: all gives the same value to all four sides, only gives values to specific sides, and symmetric takes separate values for horizontal and vertical.

// All four sides 16
EdgeInsets.all(16.0)

// Only left and right 8
EdgeInsets.only(left: 8, right: 8)

// Horizontal 12, vertical 6
EdgeInsets.symmetric(horizontal: 12, vertical: 6)

all, only, symmetric difference

all(d) gives d to all sides; the simplest option. only(left, top, right, bottom) gives values only to specified sides; unspecified ones stay 0. symmetric(horizontal, vertical) gives separate values for horizontal (left+right) and vertical (top+bottom).

Padding(
  padding: EdgeInsets.symmetric(
    horizontal: 20,
    vertical: 10,
  ),
  child: Text('Simetrik'),
)

Padding(
  padding: EdgeInsets.only(bottom: 30),
  child: Text('Alt boşluk'),
)

Practice Print EdgeInsets info

In main, print two lines with print: all dort kenar and symmetric yatay dikey.

Starter code

main.dart
void main() {
  // iki satır yazdır:
  // all dort kenar
  // symmetric yatay dikey

}

Sample solution

main.dart
void main() {
  print('all dort kenar');
  print('symmetric yatay dikey');
}

Expected output

all dort kenar
symmetric yatay dikey

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What does EdgeInsets.symmetric take?

  • An empty value
  • Separate values for horizontal and vertical Correct answer
  • A single value to all four sides
  • Values for specific sides

Explanation: symmetric takes separate values for horizontal (left+right) and vertical (top+bottom).

2 Separate horizontal and vertical

Question 
padding: EdgeInsets.____(horizontal: 20, vertical: 10),
Answer 
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),

Explanation: The symmetric constructor takes separate values for horizontal and vertical.

3 EdgeInsets concepts

Term Meaning
EdgeInsets.all Same value to all four sides
EdgeInsets.only Values to specific sides
EdgeInsets.symmetric Separate horizontal and vertical
kurucu seçimi Based on spacing pattern

All lessons in Beginner

1 Intro to Flutter

  1. What is Flutter?
  2. Dart and Flutter
  3. SDK and setup
  4. flutter doctor
  5. Summary - Flutter setup

2 First app

  1. flutter create
  2. Project structure
  3. main and runApp
  4. Hot reload
  5. Summary - First app

3 Widget basics

  1. What is a widget?
  2. Widget tree
  3. BuildContext
  4. Material and Cupertino
  5. Summary - Widget basics

4 StatelessWidget

  1. What is StatelessWidget?
  2. The build method
  3. Passing parameters
  4. const constructor
  5. Summary - StatelessWidget

5 StatefulWidget

  1. What is StatefulWidget?
  2. createState and State
  3. The setState method
  4. initState and dispose
  5. Summary - StatefulWidget

6 Text and Container

  1. The Text widget
  2. TextStyle
  3. Container
  4. BoxDecoration
  5. Summary - Text and Container

7 Column and Row

  1. Column
  2. Row
  3. MainAxisAlignment
  4. CrossAxisAlignment
  5. Summary - Column and Row

8 Padding and margin

  1. The Padding widget
  2. EdgeInsets
  3. Container margin
  4. Spacing strategy
  5. Summary - Padding and margin

9 SizedBox and Center

  1. SizedBox
  2. The Center widget
  3. SizedBox.expand
  4. The Align widget
  5. Summary - SizedBox and Center

10 ListView

  1. What is ListView?
  2. ListView.builder
  3. ListTile
  4. Separator
  5. Summary - ListView

11 GestureDetector

  1. What is GestureDetector?
  2. onTap and onDoubleTap
  3. onLongPress
  4. onHorizontalDragUpdate
  5. Summary - GestureDetector

12 InkWell

  1. What is InkWell?
  2. InkWell vs GestureDetector
  3. Material parent
  4. onTap callback
  5. Summary - InkWell

13 ElevatedButton

  1. What is ElevatedButton?
  2. onPressed and child
  3. TextButton and OutlinedButton
  4. Button style
  5. Summary - ElevatedButton

14 TextFormField

  1. What is TextFormField?
  2. TextEditingController
  3. decoration and label
  4. obscureText
  5. Summary - TextFormField

15 Todo app

  1. Project skeleton
  2. Add screen
  3. List and onTap
  4. Delete and divider
  5. Summary - Todo app

16 Images

  1. AssetImage
  2. Image.network
  3. Image.file
  4. fit and size
  5. Summary - Images

17 Scaffold and AppBar

  1. What is Scaffold?
  2. AppBar
  3. FloatingActionButton
  4. Drawer
  5. Summary - Scaffold and AppBar

18 Navigator

  1. What is Navigator?
  2. Navigator.push
  3. MaterialPageRoute
  4. Navigator.pop
  5. Summary - Navigator

19 Counter app

  1. Project skeleton
  2. State and counter
  3. Increment button
  4. Decrement button
  5. Summary - Counter app

20 Beginner final

  1. Challenge 1
  2. Challenge 2
  3. Challenge 3
  4. Challenge 4