[flutter] 플러터 슬라이딩 패널 홈 화면

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, 아름다운 UI를 만들기 위해 사용됩니다. 슬라이딩 패널은 플러터에서 많이 사용되는 디자인 패턴 중 하나로, 홈 화면에 추가적인 정보나 메뉴를 제공하는 기능을 제공합니다.

구현 방법

  1. sliding_panel 패키지를 프로젝트에 추가합니다.
    dependencies:
      sliding_panel: ^0.4.0
    
  2. 홈 화면에 슬라이딩 패널을 추가합니다.
    import 'package:sliding_panel/sliding_panel.dart';
    
    class HomeScreen extends StatefulWidget {
      @override
      _HomeScreenState createState() => _HomeScreenState();
    }
    
    class _HomeScreenState extends State<HomeScreen> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('슬라이딩 패널 홈 화면'),
          ),
          body: SlidingPanel(
            panel: PanelWidget(), // 추가 정보를 보여줄 위젯
            snapMode: SnapMode.forceEdge, // 슬라이딩 패널이 화면 가장자리에 강제로 스냅됩니다.
            body: MainContentWidget(), // 메인 화면의 내용을 보여줄 위젯
          ),
        );
      }
    }
    
  3. 추가 정보를 보여줄 PanelWidget과 메인 화면의 내용을 보여줄 MainContentWidget을 구현합니다.
    class PanelWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.white,
          child: Center(
            child: Text('추가 정보'),
          ),
        );
      }
    }
    
    class MainContentWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.blue,
          child: Center(
            child: Text('메인 화면'),
          ),
        );
      }
    }
    
  4. 앱을 실행하고 홈 화면에서 슬라이딩 패널을 사용할 수 있습니다.

결론

플러터의 슬라이딩 패널을 활용하여 홈 화면에 추가 정보나 메뉴를 제공할 수 있습니다. sliding_panel 패키지를 사용하여 쉽게 구현할 수 있으며, UI를 향상시켜 사용자 경험을 높일 수 있습니다.

참고 자료