[Flutter] 플러터의 Basic Widget 살펴보기

 

Flutter는 다양한 위젯을 제공하며, 이를 이해하고 활용하는 것이 효율적인 UI 개발의 핵심입니다.
이번 포스팅에서는 Flutter에서 자주 사용되는 Basic Widget에 대해 살펴보고,
예제 코드와 함께 실제 활용 방법을 소개하겠습니다.

 

1. Layout 위젯

Flutter에서 layout 위젯은 visible 위젯을 화면의 원하는 위치에 배치하는 데 사용됩니다. 가장 간단한 layout 위젯으로는 Container와 Center가 있으며, 더 많은 layout 위젯은 Flutter 공식 문서에서 확인할 수 있습니다.

2. Visible 위젯

Visible 위젯은 화면에 직접 표시되는 UI 요소입니다. Flutter에서는 다양한 visible 위젯을 제공합니다.

• Text 위젯 - 텍스트를 표시하는 기본 위젯
• Image 위젯 - 이미지를 표시하는 위젯으로, 로컬 또는 네트워크 이미지를 지원
• Icon 위젯 - Flutter에서 제공하는 아이콘을 쉽게 사용할 수 있음

Text('Hello World')  			// 텍스트 위젯
Image.asset('images/lake.jpg')  	// 이미지 위젯
Icon(Icons.home)  			// 아이콘 위젯

 

3. Visible 위젯을 Layout 위젯에 넣기

• 모든 layout 위젯은 하나의 자식을 가질 수 있는 위젯과 여러 자식을 가질 수 있는 위젯으로 나뉩니다.
  • 하나의 자식을 가질 수 있는 위젯은 child라는 property를 사용
  • 여러 자식을 가질 수 있는 위젯은 children이라는 property를 사용

//하나의 자식을 가질 수 있는 위젯
Center(
  child: Text(
    'Hello World', 
    textDirection: TextDirection.ltr,
  ),
)

// 여러 자식을 가질 수 있는 위젯
Column(
  children: [
    Text('Hello'),
    Text('Welcome'),
    Text('Greeting'),
  ],
)

💡 Tip : Flutter에서는 코드의 가독성을 높이기 위해 마지막 라인에 콤마(,)를 붙이는 것을 권장합니다.

4. Container 위젯

Container 위젯은 padding, margin, border, background color 등을 설정할 수 있는 강력한 layout 위젯입니다.

Margin / Padding

• 전체 적용: EdgeInsets.all(10)
• 특정 위치만 지정: EdgeInsets.only(top: 10, left: 10)
• 좌표 지정: EdgeInsets.fromLTRB(10, 20, 30, 40)
• 대칭 적용: EdgeInsets.symmetric(horizontal: 20, vertical: 50)

Container(
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  color: Colors.amber,
  child: Text('Hello World', textDirection: TextDirection.ltr),
)

Border

• Container 위젯에 테두리를 추가하려면 decoration 속성을 사용해야 합니다.

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    border: Border.all(
      color: Colors.amber,
      width: 5,
    ),
  ),
  child: Text('Hello World', textDirection: TextDirection.ltr),
)

Border Radius

• 모서리를 둥글게 설정할 수 있습니다.

borderRadius: BorderRadius.only(
  topLeft: Radius.circular(20),
  bottomRight: Radius.circular(20),
),

 

5. Row와 Column 위젯

• Row 위젯 - 자식 위젯을 수평으로 배치
• Column 위젯 - 자식 위젯을 수직으로 배치

두 위젯 모두 children 속성을 사용해 여러 자식을 가질 수 있습니다.

Column(
  children: [
    Container(
      color: Colors.red,
      width: 50,
      height: 50,
      margin: EdgeInsets.all(10),
    ),
    Container(
      color: Colors.blue,
      width: 50,
      height: 50,
      margin: EdgeInsets.all(10),
    ),
  ],
)

6. MainAxisAlignment

Row와 Column 위젯에서 자식 위젯의 정렬 방식을 설정합니다.

• start: 시작점에서 정렬
• end: 끝점에서 정렬
• center: 중앙에 정렬
• spaceBetween: 자식 위젯 사이를 균등하게 배치
• spaceAround: 양 끝에 절반의 공간을 두고 정렬
• spaceEvenly: 모든 공간을 균등하게 배치

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(color: Colors.red, width: 50, height: 50),
          Container(color: Colors.blue, width: 50, height: 50),
          Container(color: Colors.yellow, width: 50, height: 50),
        ],
      ),
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(color: Colors.red, width: 50, height: 50),
          Container(color: Colors.blue, width: 50, height: 50),
          Container(color: Colors.yellow, width: 50, height: 50),
        ],
      ),
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(color: Colors.red, width: 50, height: 50),
          Container(color: Colors.blue, width: 50, height: 50),
          Container(color: Colors.yellow, width: 50, height: 50),
        ],
      ),
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(color: Colors.red, width: 50, height: 50),
          Container(color: Colors.blue, width: 50, height: 50),
          Container(color: Colors.yellow, width: 50, height: 50),
        ],
      ),
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(color: Colors.red, width: 50, height: 50),
          Container(color: Colors.blue, width: 50, height: 50),
          Container(color: Colors.yellow, width: 50, height: 50),
        ],
      ),
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(color: Colors.red, width: 50, height: 50),
          Container(color: Colors.blue, width: 50, height: 50),
          Container(color: Colors.yellow, width: 50, height: 50),
        ],
      ),
    ]);
  }
}

 

Flutter의 기본 위젯을 활용하면 간단한 UI부터 복잡한 UI까지 손쉽게 구성할 수 있습니다.
이 포스팅에서 다룬 내용을 바탕으로 기본 위젯의 동작 원리와 활용법을 익혀보세요.
앞으로의 Flutter 개발이 훨씬 수월해질 것입니다.

 

❓ 플러터의 기본기에 대해서 알고 싶다면?

[Flutter] Everything is a Widget - 플러터 기본기 다지기

 

아래의 문헌을 참고하여 작성된 포스팅입니다.
최주호, 김근호, 이지원(공저) 『만들면서 배우는 플러터 앱 프로그래밍』, 앤써북, 2023.