[011] 플러터 (Flutter) 배우기 - Align (정렬하기)

안녕하세요~ totally 개발자입니다.

 

Align

 

오늘 다뤄볼 위젯은 Align이며 이 위젯은 이름 그대로 정렬을 도와주는 위젯입니다. 

 

topLeft와 topRight 정렬 적용 모습

Align 위젯의 사용법은 상당히 간단합니다. alignment: Alignment.topLeft 형태로만 사용하면 바로 적용되며 Alignment에는 topLeft, topRight, topCenter, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight이 사용됩니다.

 

9가지 정렬을 사용한 모습

이렇게 9가지의 정렬을 표시할 수 있기 때문에 정렬할 때 반드시 알고 있어야 하는 위젯 중 하나입니다. 아래에 전체 소스 코드를 첨부하였으니 참고하시면 될 것 같습니다. 감사합니다.

 

[전체 소스 코드]

 

	import 'package:flutter/material.dart';
	class TestView extends StatefulWidget {
	@override
	State<TestView> createState() => _TestViewState();
	}
	class _TestViewState extends State<TestView> {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text("Test Title"),
	),
	drawer: Drawer(
	child: ListView(
	padding: EdgeInsets.zero,
	children: [
	const DrawerHeader(
	decoration: BoxDecoration(
	color: Colors.blue,
	),
	child: Text("Drawer Header Part"),
	),
	ListTile(
	title: Text("Menu 1"),
	),
	],
	),
	),
	body: Container(
	child: Stack(
	children: [
	Align(
	alignment: Alignment.topLeft,
	child: Container(
	width: 100,
	height: 100,
	color: Colors.blue,
	),
	),
	Align(
	alignment: Alignment.topCenter,
	child: Container(
	width: 100,
	height: 100,
	color: Colors.orange,
	),
	),
	Align(
	alignment: Alignment.topRight,
	child: Container(
	width: 100,
	height: 100,
	color: Colors.green,
	),
	),
	Align(
	alignment: Alignment.centerLeft,
	child: Container(
	width: 100,
	height: 100,
	color: Colors.amber,
	),
	),
	Align(
	alignment: Alignment.center,
	child: Container(
	width: 100,
	height: 100,
	color: Colors.purpleAccent,
	),
	),
	Align(
	alignment: Alignment.centerRight,
	child: Container(
	width: 100,
	height: 100,
	color: Colors.brown,
	),
	),
	Align(
	alignment: Alignment.bottomLeft,
	child: Container(
	width: 100,
	height: 100,
	color: Colors.indigoAccent,
	),
	),
	Align(
	alignment: Alignment.bottomCenter,
	child: Container(
	width: 100,
	height: 100,
	color: Colors.yellowAccent,
	),
	),
	Align(
	alignment: Alignment.bottomRight,
	child: Container(
	width: 100,
	height: 100,
	color: Colors.redAccent,
	),
	),
	],
	),
	),
	);
	}
	}

view raw 011.dart hosted with ❤ by GitHub

[유튜브 강좌 영상]

 

https://youtu.be/oLxOWJiH-tg