CodeBlanks Logo Icon CodeBlanks
Login Register

The Align widget

Learn to position a child at a specific point with Align.

The Align widget

Align is a widget that places its child at a specific position. Its alignment parameter takes an Alignment object. Values like Alignment.topLeft, Alignment.centerRight, Alignment.bottomCenter determine where the child goes. Center is a special case of Align with alignment: Alignment.center.

Align(
  alignment: Alignment.topLeft,
  child: Text('Sol üst'),
)

Align(
  alignment: Alignment.bottomRight,
  child: Text('Sağ alt'),
)

Alignment values

The Alignment class offers many ready positions: topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight. You can also define custom positions with decimal values like Alignment(0.5, -0.3); (0, 0) is dead center, (-1, -1) the top-left corner.

Align(
  alignment: Alignment(0, -1),  // top center
  child: Text('Üst orta'),
)

Align(
  alignment: Alignment(-1, 0),  // left center
  child: Text('Sol orta'),
)

Practice Print Align info

In main, print two lines with print: align konum and alignment kose.

Starter code

main.dart
void main() {
  // iki satır yazdır:
  // align konum
  // alignment kose

}

Sample solution

main.dart
void main() {
  print('align konum');
  print('alignment kose');
}

Expected output

align konum
alignment kose

Questions and answers

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

1 What does the Align widget do?

  • Positions the child randomly
  • Sizes the child
  • Places the child at a specific position Correct answer
  • Colors the child

Explanation: Align places the child at a specific position via Alignment values; such as topLeft, bottomRight.

2 Place at bottom-right

Question 
Align(
  alignment: Alignment.____,
  child: Text('Sağ alt'),
)
Answer 
Align(
  alignment: Alignment.bottomRight,
  child: Text('Sağ alt'),
)

Explanation: bottomRight is the Alignment value that places the child in the bottom-right corner.

3 Align concepts

Term Meaning
Align Positions the child
Alignment Position object
Alignment.topLeft Top-left corner
Alignment.bottomRight Bottom-right corner

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