모바일 UI 구성에서는 Flutter를 통해 Dart를 사용하여 UI를 개발하는 방법을 중점적으로 다룬다. Flutter는 모바일 애플리케이션 개발에서 널리 사용되며, UI 구성 요소를 다루기 위한 다양한 위젯 시스템과 상태 관리를 제공한다. 이를 기반으로 모바일 UI의 주요 구성 요소와 개발 방법을 세부적으로 설명한다.
Flutter UI 구조의 기본 개념
Flutter에서 UI는 Widget이라는 개념을 중심으로 구성된다. 모든 Flutter 애플리케이션은 여러 Widget들로 이루어져 있으며, StatelessWidget과 StatefulWidget 두 가지 유형이 있다.
StatelessWidget: 상태 변화가 없는 정적인 UI 구성에 사용된다. 예를 들어, 단순한 텍스트나 아이콘 등을 표시할 때 사용된다.StatefulWidget: 상태 변화가 필요한 동적인 UI 구성에 사용된다. 사용자 입력이나 애니메이션 등의 변화를 처리하는 UI에 적합한다.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter UI Example'),
),
body: Center(
child: Text('Hello, Flutter!'),
),
),
);
}
}
이 코드는 기본적인 Flutter UI 구조로, MaterialApp을 사용하여 앱의 전반적인 디자인을 설정하고, Scaffold를 통해 기본적인 화면 구조를 생성한다.
레이아웃 시스템
Flutter는 레이아웃을 구성하기 위한 강력한 위젯 시스템을 제공한다. 일반적으로 사용되는 위젯은 Column, Row, Container 등이 있으며, 이러한 위젯을 사용하여 화면의 배치를 제어할 수 있다.
Column: 세로 방향으로 위젯을 나열할 때 사용된다.Row: 가로 방향으로 위젯을 나열할 때 사용된다.Container: 여백, 경계선, 크기 등을 설정하여 하나의 위젯을 감싸는 용도로 사용된다.
body: Column(
children: <Widget>[
Text('First line'),
Text('Second line'),
],
),
이와 같이 Column을 사용하여 여러 텍스트 위젯을 세로로 나열할 수 있다.
위젯 트리 구조
Flutter에서 UI는 위젯 트리 구조로 이루어진다. 모든 UI 요소는 위젯으로 구성되며, 부모-자식 관계를 통해 위젯들이 서로 결합된다. 이 위젯 트리는 build() 메서드를 통해 재구성되며, 트리 구조는 매우 유연하게 설계될 수 있다.
위젯 트리의 재구성
Flutter의 핵심은 상태 변화에 따라 위젯 트리가 재구성된다는 것이다. 상태가 변경될 때마다 Flutter는 build() 메서드를 다시 호출하여 UI를 새롭게 렌더링한다. 이 과정에서 성능 최적화를 위해 최적의 재구성 방식이 적용된다.
이 다이어그램은 상태 변화에 따른 위젯 트리의 재구성 과정을 보여준다. StatefulWidget에서 상태 변화가 발생하면, Flutter는 해당 부분의 위젯 트리를 재구성한다.
위젯 배치와 정렬
Flutter에서는 위젯의 배치와 정렬을 간단하게 제어할 수 있는 다양한 속성을 제공한다. 이를 통해 사용자 인터페이스의 구성 요소들이 화면에서 어떻게 배치될지 세부적으로 제어할 수 있다.
주축 및 교차축 정렬
Column이나 Row 위젯을 사용할 때, 각 위젯의 배치 방향에 따라 두 가지 축을 고려할 수 있다:
- 주축(main axis): Column에서는 세로 축, Row에서는 가로 축이다.
- 교차축(cross axis): 주축에 수직인 축으로, Column에서는 가로 축, Row에서는 세로 축이다.
이 두 축을 기준으로 위젯을 정렬할 수 있는 속성들이 존재한다.
- mainAxisAlignment: 주축에서 위젯을 정렬하는 방식이다. 예를 들어, MainAxisAlignment.center는 모든 위젯을 중앙에 배치한다.
- crossAxisAlignment: 교차축에서 위젯을 정렬하는 방식이다. CrossAxisAlignment.stretch는 위젯을 교차축에 맞게 늘려준다.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('First'),
Text('Second'),
Text('Third'),
],
)
이 예시에서는 mainAxisAlignment를 center로 설정하여 위젯들이 세로 중앙에 배치되고, crossAxisAlignment를 start로 설정하여 위젯들이 가로 방향의 시작점에 정렬된다.
Flexible과 Expanded
화면 공간을 보다 효율적으로 활용하기 위해 Flexible과 Expanded 위젯을 사용할 수 있다. 이러한 위젯들은 부모 위젯 내에서 자식 위젯들이 차지하는 공간을 동적으로 조절할 수 있게 해준다.
Flexible: 위젯이 남은 공간을 일정 비율로 차지하도록 설정할 수 있다.Expanded: 부모 위젯 내의 모든 공간을 자식 위젯이 차지하도록 강제한다.
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Text('Expanded'),
),
),
Flexible(
flex: 2,
child: Container(
color: Colors.blue,
child: Text('Flexible'),
),
),
],
)
이 코드에서는 Expanded 위젯이 주어진 공간을 모두 차지하고, Flexible 위젯은 남은 공간 중 일부만 차지하게 된다. flex 속성을 통해 비율을 조정할 수 있다.
Flutter의 반응형 디자인
모바일 애플리케이션에서는 다양한 화면 크기에 맞추어 UI가 적절하게 동작하도록 해야 한다. Flutter는 반응형 디자인을 쉽게 구현할 수 있도록 도와주는 다양한 도구를 제공한다.
MediaQuery
MediaQuery를 사용하면 현재 장치의 화면 크기, 픽셀 밀도 등을 쉽게 얻을 수 있다. 이를 통해 특정 화면 크기에 맞추어 UI 요소의 크기나 레이아웃을 조정할 수 있다.
@override
Widget build(BuildContext context) {
var screenWidth = MediaQuery.of(context).size.width;
return Container(
width: screenWidth * 0.5,
color: Colors.green,
child: Text('반응형 UI'),
);
}
이 예시에서는 MediaQuery를 통해 화면 너비의 절반을 차지하는 컨테이너를 생성한다. 화면 크기에 따라 자동으로 조정된다.
LayoutBuilder
LayoutBuilder 위젯은 부모 위젯의 크기에 따라 자식 위젯의 레이아웃을 결정할 수 있도록 도와준다. 이 위젯을 사용하면 UI가 다양한 화면 크기에서 유연하게 동작할 수 있다.
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth < 600) {
return Text('Small Screen');
} else {
return Text('Large Screen');
}
},
)
이 코드는 화면 크기에 따라 다른 텍스트를 표시하는 반응형 레이아웃을 구현한다.
상태 관리
모바일 애플리케이션에서 중요한 부분은 상태 관리이다. Flutter는 다양한 상태 관리 방법을 제공하며, 그 중 기본적으로 사용하는 방식은 StatefulWidget에서 상태를 처리하는 것이다.
setState() 메서드
setState() 메서드는 상태가 변경되었을 때 UI를 업데이트하는 가장 간단한 방법이다. 상태가 변경될 때마다 build() 메서드가 호출되어 위젯 트리가 재구성된다.
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('State Management'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
위 코드는 버튼을 누를 때마다 setState()가 호출되어 _counter 변수의 값을 증가시키고, 이 값에 따라 UI가 업데이트된다.
상태 관리의 고급 방법
Flutter에서는 더 복잡한 상태 관리를 필요로 할 때, Provider, Bloc 패턴, 또는 Riverpod 등의 상태 관리 도구를 사용할 수 있다. 이 도구들은 상태를 보다 효율적이고 확장 가능하게 관리할 수 있도록 도와준다. 간단한 setState() 방식은 소규모 애플리케이션에서는 충분할 수 있지만, 상태가 여러 위젯 간에 공유되거나, 대규모 애플리케이션에서는 관리가 어려워질 수 있기 때문이다.
Provider 패턴
Provider는 Flutter에서 널리 사용되는 상태 관리 도구로, 상태를 트리 구조에서 하위 위젯에 쉽게 전달할 수 있도록 해준다. Provider를 통해 애플리케이션 전역에서 상태를 관리하고 이를 필요로 하는 위젯들이 쉽게 접근할 수 있다.
- Provider 설정
먼저, 상태를 관리할 클래스를 정의한다.
```dart class Counter with ChangeNotifier { int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
} ```
이 클래스는 ChangeNotifier를 상속받아 상태가 변경될 때 notifyListeners()를 호출하여 UI를 업데이트할 수 있다.
- Provider 적용
애플리케이션 트리의 상위에서 ChangeNotifierProvider로 상태를 공급하고, 하위 위젯에서 상태를 구독한다.
dart
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => Counter(),
child: MyApp(),
),
);
}
- 상태 구독
하위 위젯에서는 Provider.of<Counter>(context)를 통해 상태를 접근하거나, Consumer 위젯을 사용하여 상태 변화에 맞춰 UI를 자동으로 업데이트한다.
dart
@override
Widget build(BuildContext context) {
final counter = Provider.of<Counter>(context);
return Scaffold(
appBar: AppBar(
title: Text('Provider Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Counter: ${counter.count}'),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: counter.increment,
child: Icon(Icons.add),
),
);
}
이 방식은 상태 관리가 더 복잡해질 경우, 상태를 전역에서 다루기 때문에 트리 깊숙한 곳에 있는 위젯들이 상태에 쉽게 접근하고 UI를 효율적으로 갱신할 수 있다.
테마와 스타일 관리
모바일 UI에서 중요한 또 다른 요소는 테마와 스타일 관리이다. Flutter에서는 전역 및 개별 위젯 수준에서 테마를 설정할 수 있는 기능을 제공한다. 이를 통해 일관된 디자인을 유지하면서도 특정 위젯에 대해서는 별도의 스타일을 적용할 수 있다.
전역 테마 설정
Flutter에서는 MaterialApp의 theme 속성을 사용하여 앱 전체의 전역 테마를 설정할 수 있다. 전역 테마는 앱 전반에 걸쳐 적용되며, 텍스트 스타일, 버튼 디자인, 색상 등을 정의할 수 있다.
MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: TextTheme(
bodyText2: TextStyle(fontSize: 16, color: Colors.black),
),
),
home: MyHomePage(),
);
위 코드에서 ThemeData를 사용하여 전역적으로 기본 색상 팔레트와 텍스트 스타일을 설정할 수 있다.
개별 위젯 스타일 설정
전역 테마 외에도 개별 위젯에 대해 별도로 스타일을 설정할 수 있다. 이는 특정 UI 요소에 대해 맞춤형 디자인을 적용하고자 할 때 유용하다.
Text(
'Custom Style Text',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.red,
),
);
이 코드에서는 텍스트의 크기, 두께, 색상을 개별적으로 설정하여, 전역 테마와는 다른 스타일을 적용한다.
2D 그래픽 처리
모바일 UI에서는 간단한 텍스트나 버튼 외에도 2D 그래픽을 처리하는 기능이 필요할 수 있다. Flutter는 CustomPainter 클래스를 통해 2D 그래픽을 그릴 수 있도록 지원한다. 이를 사용하면 다양한 도형, 차트, 애니메이션 등을 구현할 수 있다.
CustomPainter를 사용한 그래픽 그리기
CustomPainter는 UI 요소 위에 직접 도형을 그리기 위한 도구로, paint() 메서드를 사용하여 다양한 그래픽 요소를 그릴 수 있다. 이를 통해 맞춤형 2D 그래픽을 생성할 수 있다.
class MyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.blue
..strokeWidth = 5
..style = PaintingStyle.stroke;
canvas.drawRect(
Rect.fromLTWH(50, 50, 200, 200),
paint,
);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
위 코드에서는 CustomPainter를 사용하여 파란색 사각형을 그리는 예시를 보여준다. Canvas 객체는 Flutter의 2D 그래픽 처리를 담당하는 핵심 객체로, 도형을 그리는 다양한 메서드를 제공한다.
CustomPainter 적용
CustomPainter로 정의한 그래픽은 CustomPaint 위젯을 통해 Flutter UI에 적용할 수 있다.
CustomPaint(
size: Size(300, 300),
painter: MyPainter(),
);
이 위젯은 CustomPainter를 호출하여 해당 영역에 정의한 2D 그래픽을 렌더링한다.