[flutter] 플러터 Row 위젯을 이용한 메뉴 바 만들기
Flutter는 Google에서 개발한 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크로, 아름다운 UI를 구축하기 위해 다양한 위젯을 제공합니다. 이번에는 플러터의 Row 위젯을 사용하여 간단한 메뉴 바를 만들어보겠습니다.
Row 위젯
Row 위젯은 가로로 나열되는 위젯들의 컨테이너입니다. 여러 위젯을 수평 방향으로 배치하고, 자동으로 크기를 조정해줍니다.
메뉴 바 디자인 구성 요소
우리는 간단한 메뉴 바를 만들 것이므로, 다음과 같은 디자인 구성 요소가 필요합니다:
- 아이콘
- 텍스트 레이블
Row 위젯을 사용하여 메뉴 바 만들기
우선, 플러터 프로젝트를 생성한 후 main.dart 파일을 열고 아래의 코드를 추가합니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Menu Bar',
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(
title: Text('Menu Bar'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.home),
Text('Home'),
Icon(Icons.search),
Text('Search'),
Icon(Icons.favorite),
Text('Favorites'),
],
),
),
),
);
}
}
위 코드에서는 Row 위젯을 사용하여 아이콘과 텍스트 레이블을 번갈아 가며 나열합니다. MainAxisAlignment.spaceEvenly 속성을 통해 각 위젯 사이의 간격을 균등하게 설정합니다.
실행 결과
메뉴 바가 가운데 정렬된 각각의 요소를 포함하는 앱 바 아래에 표시됩니다. 홈, 검색 및 즐겨찾기와 같은 아이콘과 텍스트 레이블은 가로로 나란히 배치됩니다.
마무리
이번 포스트에서는 Flutter의 Row 위젯을 사용하여 간단한 메뉴 바를 만드는 방법을 알아보았습니다. Row 위젯은 가로로 위젯을 배열할 때 유용하며, 자동 크기 조정을 제공해줍니다. 플러터를 사용하여 멋진 UI를 개발할 때 Row 위젯을 자주 활용해보세요.