[flutter] 플러터 스택드 위젯을 사용하여 메뉴 바 구성하기
플러터 앱을 개발하는 중에, 종종 앱 화면의 상단이나 하단에 메뉴 바를 추가해야 할 때가 있습니다. 이러한 경우에 플러터의 Stack 위젯을 사용하여 메뉴 바를 구성할 수 있습니다. Stack 위젯은 여러 위젯을 겹쳐서 나타낼 때 유용하게 사용됩니다.
스택드 위젯을 사용한 메뉴 바 구성 예시
아래는 플러터에서 Stack 위젯을 사용하여 상단 메뉴 바를 구성하는 간단한 예시입니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
// 배경 이미지 또는 다른 컨텐츠
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
height: 80,
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.person),
onPressed: () {},
),
],
),
),
),
],
),
),
);
}
}
위의 예시 코드에서는 Stack 위젯을 사용하여 상단 메뉴 바를 구성하고, Positioned 위젯을 사용하여 메뉴 버튼들을 위치시켜 화면 상단에 나타나도록 구성하였습니다.
플러터에서 메뉴 바를 구성할 때 Stack 위젯과 Positioned 위젯을 활용하면 원하는 위치에 메뉴 바를 자유롭게 구성할 수 있습니다.
마치며
이상으로 플러터의 Stack 위젯을 사용하여 메뉴 바를 구성하는 방법에 대해 알아보았습니다. Stack 위젯을 활용하면 앱 화면 상단이나 하단에 메뉴 바를 자유롭게 구성할 수 있으므로, 다양한 레이아웃을 구현하는 데 유용하게 활용할 수 있을 것입니다.