Flutter 앱 개발에서 버튼을 수평으로 정렬하는 것은 UI/UX 디자인의 중요한 부분입니다. 이 글에서는 Flutter에서 Row 위젯을 사용하여 버튼을 가로로 배치하는 방법을 소개합니다.
Step 1: Row 위젯 사용하기
Row 위젯은 자식들을 수평으로 배열합니다. 이를 통해 버튼들을 가로로 나란히 배치할 수 있습니다.
Row(
mainAxisAlignment: MainAxisAlignment.center, // 버튼들을 중앙에 배치
children: <Widget>[
// 여기에 버튼들을 추가
],
)
mainAxisAlignment 속성을 MainAxisAlignment.center로 설정하여 버튼들을 수평선상에서 가운데에 위치시킬 수 있습니다.
Step 2: 버튼 추가하기
Row의 children 배열에 ElevatedButton 위젯을 추가하여 버튼을 만듭니다.
ElevatedButton(
onPressed: () {
// 버튼의 동작을 여기에 작성
},
child: Text('버튼 1'),
),
SizedBox(width: 10), // 버튼 사이의 간격
ElevatedButton(
onPressed: () {
// 또 다른 버튼의 동작을 여기에 작성
},
child: Text('버튼 2'),
),
SizedBox를 사용하여 버튼 사이에 원하는 만큼의 간격을 줄 수 있습니다.
예제 코드
다음은 전체적인 예제 코드입니다:
import 'package:flutter/material.dart';
class MyHorizontalButtons extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
// 버튼 1의 액션
},
child: Text('버튼 1'),
),
SizedBox(width: 10),
ElevatedButton(
onPressed: () {
// 버튼 2의 액션
},
child: Text('버튼 2'),
),
],
),
);
}
}
이 코드는 두 개의 버튼을 수평으로 배치하는 간단한 예제입니다. Row 위젯을 사용하여 버튼들을 나란히 배열하고, 각 버튼에는 개별적인 동작을 정의할 수 있습니다.
Flutter에서 Row 위젯을 사용하여 버튼들을 수평으로 효과적으로 배치하는 방법을 알아보았습니다. 이 방법은 여러 버튼을 깔끔하게 정렬할 때 유용하며, 사용자 인터페이스를 보다 직관적으로 만들 수 있습니다.