Flutter Align 위젯으로 박스 배치하기(Alignment)

나를 위해 기록하는 Flutter 기초

Alignment로 박스를 배치하는 방법 아홉가지

먼저 나오는 단어는 화면의 세로 방향에 대한 정렬을,

뒤에 나오는 단어는 화면의 가로 방향에 대한 정렬을 나타낸다고 생각하면 쉽다.

 

Align 위젯을 사용해 Alignment로 박스 배치하기

1. center
2. centerLeft
3. centerRight
4. topCenter
5. topLeft
6. topRight
7. bottomCenter
8. bottomLeft
9. bottomRight

---

1. center

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(
        body: Align(
          alignment: Alignment.center,
          child: Container(
            width: 200, height: 200,
            color: Colors.amberAccent,
            ),
          ),
        ),
      );
  }
}

 

• 가로, 세로 방향 가운데 정렬

 

2. centerLeft

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(
        body: Align(
          alignment: Alignment.centerLeft,
          child: Container(
            width: 200, height: 200,
            color: Colors.amberAccent,
            ),
          ),
        ),
      );
  }
}

• 세로 방향 가운데 정렬, 가로 방향 좌측정렬

 

3. centerRight

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(
        body: Align(
          alignment: Alignment.centerRight,
          child: Container(
            width: 200, height: 200,
            color: Colors.amberAccent,
            ),
          ),
        ),
      );
  }
}

• 세로 방향 가운데 정렬, 가로 방향 우측정렬

 

4. topCenter

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(
        body: Align(
          alignment: Alignment.topCenter,
          child: Container(
            width: 200, height: 200,
            color: Colors.amberAccent,
            ),
          ),
        ),
      );
  }
}

• 세로 방향 위쪽 정렬, 가로 방향 가운데 정렬

 

5. topLeft

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(
        body: Align(
          alignment: Alignment.topLeft,
          child: Container(
            width: 200, height: 200,
            color: Colors.amberAccent,
            ),
          ),
        ),
      );
  }
}

• 세로 방향 위쪽정렬, 가로 방향 좌측정렬

 

6. topRight

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(
        body: Align(
          alignment: Alignment.topRight,
          child: Container(
            width: 200, height: 200,
            color: Colors.amberAccent,
            ),
          ),
        ),
      );
  }
}

• 세로 방향 위쪽 정렬, 가로 방향 우측정렬 

 

7. bottomCenter

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(
        body: Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            width: 200, height: 200,
            color: Colors.amberAccent,
            ),
          ),
        ),
      );
  }
}

• 세로 방향 아래쪽정렬, 가로 방향 가운데 정렬

 

8. bottomLeft

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(
        body: Align(
          alignment: Alignment.bottomLeft,
          child: Container(
            width: 200, height: 200,
            color: Colors.amberAccent,
            ),
          ),
        ),
      );
  }
}

• 세로 방향 아래쪽정렬, 가로 방향 좌측정렬

 

9. bottomRight

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(
        body: Align(
          alignment: Alignment.bottomRight,
          child: Container(
            width: 200, height: 200,
            color: Colors.amberAccent,
            ),
          ),
        ),
      );
  }
}

• 세로 방향 아래쪽정렬, 가로 방향 우측정렬