플러터 기본 위젯 설명과 샘플 코드

플러터에서는 여러 가지 기본 위젯을 제공한다. 이러한 위젯은 보통 다른 위젯의 배치를 위해 사용되거나, 텍스트, 이미지 등 화면 표시에 쓰인다. 이번에는 플러터의 몇 가지 기본 위젯에 대한 설명과 샘플 코드를 알아보았다.

Text 위젯

`Text` 위젯은 화면에 문자열을 표시하는 기본 위젯이다.

Text(
  'Hello, World!',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

Container 위젯

`Container` 위젯은 하나의 자식 위젯에 대해 패딩, 마진, 테두리 등을 설정할 수 있다.

Container(
  width: 100,
  height: 100,
  color: Colors.red,
  child: Text('Hello'),
)

Column과 Row 위젯

`Column`과 `Row` 위젯은 여러 자식 위젯을 수직 또는 수평으로 배열한다.

Column(
  children: [
    Text('First Item'),
    Text('Second Item'),
    Text('Third Item'),
  ],
)

Scaffold 위젯

`Scaffold` 위젯은 기본적인 레이아웃을 제공한다. 앱 바, 바디, 플로팅 액션 버튼 등을 포함할 수 있다.

Scaffold(
  appBar: AppBar(title: Text('Scaffold Example')),
  body: Text('Hello, Scaffold'),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

Icon 위젯

아이콘을 표시하는 위젯입니다.

Icon(
  Icons.star,
  color: Colors.yellow,
)

샘플 코드

여기서는 여러 기본 위젯을 조합하여 간단한 앱을 만들어 보면 아래와 같다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Basic Widgets Example')),
        body: Column(
          children: [
            Container(
              padding: EdgeInsets.all(20),
              color: Colors.blue,
              child: Text(
                'I am in a Container',
                style: TextStyle(color: Colors.white),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text('Item 1'),
                Text('Item 2'),
                Text('Item 3'),
              ],
            ),
            Icon(
              Icons.star,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    );
  }
}

샘플 코드 결과화면

이 코드는 다음과 같은 구성을 가진다.

`Scaffold`를 이용해 기본 레이아웃을 설정한다.
`AppBar`에서 앱의 제목을 표시한다.
`Column`을 사용해 세 개의 자식 위젯을 수직으로 배열한다.

첫 번째는 `Container`에 들어 있는 `Text` 위젯이다.
두 번째는 `Row`에 들어 있는 세 개의 `Text` 위젯이다.
세 번째는 `Icon` 위젯이다.

각 위젯의 역할과 어떻게 화면에 배치되는지를 이해하면, 복잡한 UI도 쉽게 구성할 수 있다.

Stack 위젯 - 추가

`Stack` 위젯은 자식 위젯들을 덮어쓰는 형태로 배열할 수 있다. 예를 들어, 이미지 위에 텍스트를 올린다거나, 여러 요소를 중첩시키는 데 유용하게 사용된다.

기본적인 사용법은 다음과 같다.

Stack(
  alignment: Alignment.center,
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Text('On top of Container'),
  ],
)

이 코드에서는 `Stack` 내부에 `Container`와 `Text` 위젯이 있는데, `Text` 위젯이 `Container` 위에 놓이게 된다. `alignment: Alignment.center`로 설정했기 때문에, 두 위젯 모두 중앙에 위치하게 된다.

샘플 코드 - Stack 위젯 추가 버전

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stack Example')),
        body: Column(
          children: [
            Stack(
              alignment: Alignment.center,
              children: [
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
                Text(
                  'Stacked Text',
                  style: TextStyle(color: Colors.white),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text('Item 1'),
                Text('Item 2'),
                Text('Item 3'),
              ],
            ),
            Icon(
              Icons.star,
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    );
  }
}

샘플 코드 결과화면 - Stack 위젯 추가 버전

`Stack` 위젯은 중앙에 위치한 `Container` 위에 텍스트를 띄워서 표시한다. 여기서는 `Stack`의 `alignment` 속성을 이용해 두 위젯을 중앙에 위치시켰다.

`Stack`은 여러 위젯을 중첩시키고, 그 중첩된 위젯들 간의 위치를 지정하는 데 유용하게 사용된다. 이를 이해하면 복잡한 레이아웃도 쉽게 구현할 수 있다.