Flutter에서 위젯 스타일링은 UI를 더 깔끔하고 사용자 친화적으로 만드는 데 중요한 부분입니다.
특히 Flutter는 다양한 속성을 제공해 배경, 간격, 정렬, 테두리 둥글기 등을 세부적으로 설정할 수 있어요.
이번 포스팅에서는 위젯 스타일링에 자주 쓰이는 핵심 속성들과 코드 예제를 통해 개념을 쉽게 이해할 수 있도록 정리해보겠습니다.
1. Flutter 위젯 스타일링의 핵심 속성들
borderRadius
테두리를 둥글게 만들 때 사용합니다. BoxDecoration이나 RoundedRectangleBorder에서 활용되며, 모든 모서리 또는 특정 모서리만 둥글게 설정할 수 있습니다.
- 전체 모서리를 둥글게
borderRadius: BorderRadius.circular(16)- 특정 모서리만 둥글게
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16),
bottomRight: Radius.circular(16),
)decoration
위젯의 배경, 테두리, 그림자 등을 설정할 수 있는 속성입니다. BoxDecoration과 함께 사용하며, 아래와 같은 기능을 제공합니다:
- 배경 색상: color: Colors.blue
- 테두리 설정: border: Border.all(color: Colors.black, width: 2)
- 그림자 추가:
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(2, 2),
blurRadius: 8,
),
]crossAxisAlignment
Row와 Column에서 교차 축(cross-axis) 정렬을 설정합니다. 예를 들어, Row에서는 세로 정렬, Column에서는 가로 정렬을 담당합니다.
- 주요 값:
- CrossAxisAlignment.start: 시작점 정렬
- CrossAxisAlignment.center: 중앙 정렬
- CrossAxisAlignment.end: 끝점 정렬
- CrossAxisAlignment.stretch: 부모 크기만큼 위젯 늘리기
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Hello'),
Text('Flutter'),
],
)
SizedBox
간격을 만들거나, 고정된 크기를 설정할 때 사용합니다. 간단한 공백 추가나 레이아웃 구성에 필수적인 속성입니다.
- 간격 추가
SizedBox(width: 10, height: 5)
- 고정된 크기
SizedBox(width: 100, height: 50)ThemeData
앱 전체 스타일(색상, 텍스트 스타일, 버튼 모양 등)을 통일할 수 있는 속성입니다. 한 번 설정해두면 앱 전체에서 일관된 디자인을 유지할 수 있습니다.
- 테마 설정 예제
MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(
bodyText1: TextStyle(fontSize: 18, color: Colors.black),
),
),
)
- 다크 모드 지원
themeMode: ThemeMode.dark,
darkTheme: ThemeData(
brightness: Brightness.dark,
)2. 실전 코드: 위젯 스타일링 종합 예제
아래 코드는 Container를 사용해 간단한 카드 모양을 만들면서 위에서 배운 스타일링 속성들을 활용한 예제입니다:
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('Flutter 위젯 스타일링')),
body: Center(
child: Container(
padding: EdgeInsets.symmetric(vertical: 14), // 내부 여백
margin: EdgeInsets.zero, // 외부 여백 없음
decoration: BoxDecoration(
color: Colors.blue, // 배경 색상
borderRadius: BorderRadius.circular(16), // 둥근 모서리
boxShadow: [
BoxShadow(
color: Colors.black26, // 그림자 색상
offset: Offset(2, 2), // 그림자 위치
blurRadius: 8, // 그림자 흐림 효과
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min, // Row 크기 최소화
crossAxisAlignment: CrossAxisAlignment.center, // 중앙 정렬
children: [
Icon(Icons.favorite, color: Colors.white, size: 40), // 아이콘 스타일
SizedBox(width: 16), // 간격
Text(
'Flutter',
style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold), // 텍스트 스타일
),
],
),
),
),
),
);
}
}3. 코드 해석
- Container
- padding: 위젯 안쪽에 14픽셀 여백 추가.
- decoration: 배경 색상, 둥근 모서리, 그림자 적용.
- Row
- crossAxisAlignment: Row 안의 아이템을 세로 중앙에 정렬.
- SizedBox: 아이콘과 텍스트 사이에 간격 추가.
- Icon과 Text
- 아이콘과 텍스트 각각 스타일을 따로 지정.
- 기본기를 단단히: padding, margin, decoration과 같은 속성은 Flutter 스타일링의 기본입니다.
- 반복 스타일은 테마로 관리: ThemeData를 활용해 코드 중복을 줄이고, 전역적으로 통일된 디자인을 유지하세요.
- 작은 테스트부터 시작: 처음에는 단순히 간격이나 배경색을 바꿔보는 작은 실험부터 시작하세요.