[flutter] 플러터 Column을 이용한 반응형 UI 디자인

20 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 모바일 애플리케이션 개발 프레임워크로, 균일한 모양과 느낌의 화면을 생성하기 위해 ‘위젯’이라 불리는 재사용 가능한 UI 요소를 사용합니다. 이번 글에서는 플러터의 Column 위젯을 사용하여 반응형 UI 디자인을 어떻게 만드는지 알아보겠습니다.

1. Column 위젯 소개

Column은 세로 방향으로 위젯을 배치하는 데 사용되며, 자식 위젯들을 위에서 아래로 쌓을 수 있습니다. 이를 통해 반응형 디자인을 효과적으로 구현할 수 있습니다.

2. Column 사용 방법

아래는 Column 위젯을 사용하여 반응형 UI를 구현하는 간단한 예시입니다.

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('반응형 UI'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '상단 위젯',
              style: TextStyle(fontSize: 20),
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.blue,
            ),
            Text(
              '하단 위젯',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

위 예시에서는 Column 위젯을 사용하여 ‘상단 위젯’, 파란색의 정사각형 위젯, ‘하단 위젯’을 세로로 배치하였습니다. 또한 MainAxisAlignment 속성을 사용하여 가로 정렬을 조정하였습니다.

3. 반응형 UI 구현

Column을 사용하면 스크린 크기에 관계없이 자식 위젯을 세로로 쌓을 수 있기 때문에 화면 크기가 변경되어도 UI가 균일하게 유지됩니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.

4. 결론

플러터의 Column을 사용하여 반응형 UI 디자인을 쉽게 구현할 수 있습니다. Column을 활용하여 다양한 화면 크기와 방향에 대응하는 애플리케이션을 개발해보세요.