[flutter] 플러터 슬라이딩 패널 네비게이션

플러터(Flutter)는 네이티브 앱을 빌드하기 위한 모바일 애플리케이션 개발 프레임워크입니다. 슬라이딩 패널 네비게이션은 플러터에서 네비게이션을 관리하고 사용자가 쉽게 앱의 다른 화면으로 전환 할 수 있는 기능입니다. 이 기능은 앱의 사용자 경험을 향상시키고 사용자가 앱을 쉽게 탐색할 수 있도록 도와줍니다.

패키지 설치

슬라이딩 패널 네비게이션을 구현하기 위해서는 flutter_sliding_panel 패키지를 추가해야 합니다. 개발 환경에서 터미널을 열고 다음 명령어를 실행하여 패키지를 설치합니다.

flutter pub add flutter_sliding_panel

또는 pubspec.yaml 파일에 직접 패키지를 추가할 수도 있습니다.

dependencies:
  flutter_sliding_panel: ^1.0.0

사용 방법

  1. 패널 페이지 생성

먼저, 각각의 패널에 대한 페이지를 생성해야합니다. 예를 들어, HomePage, SettingsPage, ProfilePage 등을 생성합니다. 각 페이지는 StatefulWidget로 구현되어야하고 SlidingPanelContent 위젯을 반환해야합니다.

import 'package:flutter/material.dart';
import 'package:flutter_sliding_panel/flutter_sliding_panel.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return SlidingPanelContent(
      title: 'Home',
      panelContent: Container(
        child: Center(
          child: Text('Home Page'),
        ),
      ),
    );
  }
}
  1. 슬라이딩 패널 네비게이션 설정

다음으로, 각 패널 페이지를 설정하고 슬라이딩 패널을 생성합니다. FlutterSlidingPanel 위젯을 사용하여 슬라이딩 패널을 만들고 각 패널의 페이지를 등록합니다.

import 'package:flutter/material.dart';
import 'package:flutter_sliding_panel/flutter_sliding_panel.dart';

class SlidingPanelNavigation extends StatefulWidget {
  @override
  _SlidingPanelNavigationState createState() => _SlidingPanelNavigationState();
}

class _SlidingPanelNavigationState extends State<SlidingPanelNavigation> {
  final List<SlidingPanelPage> _pages = [
    SlidingPanelPage(
      name: 'Home',
      page: HomePage(),
      icon: Icons.home,
    ),
    SlidingPanelPage(
      name: 'Settings',
      page: SettingsPage(),
      icon: Icons.settings,
    ),
    SlidingPanelPage(
      name: 'Profile',
      page: ProfilePage(),
      icon: Icons.person,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return FlutterSlidingPanel(
      pages: _pages,
    );
  }
}
  1. 메인 앱에 슬라이딩 패널 네비게이션 추가

마지막으로, 슬라이딩 패널 네비게이션을 메인 앱에 추가합니다. 이를 위해 MaterialApp 위젯의 home 프로퍼티에 SlidingPanelNavigation 위젯을 설정합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SlidingPanelNavigation(),
    );
  }
}

결론

플러터에서 슬라이딩 패널 네비게이션을 구현하는 방법을 알아보았습니다. flutter_sliding_panel 패키지를 사용하여 간단하게 슬라이딩 패널을 만들고 페이지를 관리할 수 있습니다. 이를 통해 앱의 네비게이션을 더욱 편리하고 사용자 친화적으로 만들 수 있습니다.

참고 자료