[flutter] 플러터 Row 위젯을 이용한 사이드바 만들기

07 Dec 2023

flutter

안녕하세요! 플러터로 사이드바를 만들어보는 방법을 알려드리겠습니다. 사이드바는 네비게이션 기능을 제공하거나 추가 정보를 표시하는 등 다양한 용도로 사용될 수 있습니다. Row 위젯을 사용하여 간단하게 사이드바를 구현해보겠습니다.

시작하기 전에

플러터 프로젝트를 시작하기 위해 아래와 같이 의존성을 추가해주세요.

dependencies:
  flutter:
    sdk: flutter

코드 예시

아래는 Row 위젯을 사용하여 사이드바를 만드는 예시 코드입니다.

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('Side Menu Example'),
      ),
      body: Row(
        children: [
          Container(
            width: 200,
            color: Colors.grey[200],
            child: ListView(
              children: [
                ListTile(
                  title: Text('메뉴 1'),
                  onTap: () {
                    // 메뉴 1을 선택했을 때의 동작
                  },
                ),
                ListTile(
                  title: Text('메뉴 2'),
                  onTap: () {
                    // 메뉴 2를 선택했을 때의 동작
                  },
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              child: Center(
                child: Text('메인 내용'),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

코드 설명

Row 위젯을 사용하여 사이드바와 메인 컨텐츠를 나란히 배치합니다.
왼쪽에 사이드바를 만들기 위해 Container를 사용하고, 너비를 200으로 설정하고 배경색을 지정합니다.
ListView를 사용하여 사이드바에 메뉴 항목을 추가합니다. 각 항목은 ListTile 위젯으로 구성되어 있으며, 탭 이벤트에 대한 동작을 설정할 수 있습니다.
오른쪽에는 Expanded 위젯을 사용하여 남은 영역을 차지하도록 설정하고, 중앙에 ‘메인 내용’이라는 텍스트를 표시합니다.

결론

위의 예시 코드를 참고하여 플러터로 사이드바를 만들 수 있습니다. Row와 ListView를 사용하여 원하는 메뉴 항목을 추가하고 동작을 설정할 수 있습니다. 추가로 스타일링을 적용하거나 다른 위젯과 조합하여 보다 다양한 사이드바를 구현할 수도 있습니다. 새로운 기능을 추가하거나 사용자의 요구에 맞게 커스터마이징하면서 플러터의 다양한 기능을 활용해보세요!