[flutter] 플러터 슬라이딩 패널과 아이콘 버튼

여러분은 Flutter에서 슬라이딩 패널을 만들고 싶은데, 동시에 이 패널을 열고 닫을 수 있는 아이콘 버튼도 추가하고 싶으신가요? 이 글에서는 Flutter의 슬라이딩 패널과 아이콘 버튼을 함께 사용하는 방법을 알려드리겠습니다.

1. 슬라이딩 패널 만들기

슬라이딩 패널을 만들려면 SlidingUpPanel 패키지를 사용할 수 있습니다. 이 패키지는 아래부터 위로 슬라이딩되는 패널을 생성하기 위한 커스터마이징이 가능한 위젯을 제공합니다. 먼저, sliding_up_panel 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  sliding_up_panel: ^1.0.3

다음으로, 패널을 사용할 페이지에 패키지를 가져옵니다.

import 'package:sliding_up_panel/sliding_up_panel.dart';

패널을 사용할 위젯을 만들고 SlidingUpPanel 위젯으로 래핑합니다.

class MyPanel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SlidingUpPanel(
      panel: Center(
        child: Text('슬라이딩 패널'),
      ),
      body: Center(
        child: Text('메인 화면'),
      ),
    );
  }
}

SlidingUpPanel 위젯에는 panelbody 속성이 있습니다. panel 속성은 열린 상태에서 보여질 위젯을 지정하고, body 속성은 패널이 닫힌 상태에서 보여질 위젯을 지정합니다.

2. 아이콘 버튼 추가하기

이제 패널을 열고 닫을 수 있는 아이콘 버튼을 추가해보겠습니다. Flutter에서는 IconButton 위젯을 사용하여 아이콘 버튼을 생성할 수 있습니다.

class MyPanel extends StatefulWidget {
  @override
  _MyPanelState createState() => _MyPanelState();
}

class _MyPanelState extends State<MyPanel> {
  bool _isPanelOpen = false;

  void _togglePanel() {
    setState(() {
      _isPanelOpen = !_isPanelOpen;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('슬라이딩 패널과 아이콘 버튼'),
      ),
      body: Stack(
        children: [
          Center(
            child: Text('메인 화면'),
          ),
          SlidingUpPanel(
            panel: Center(
              child: Text('슬라이딩 패널'),
            ),
            body: Container(),
            isDraggable: false,
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _togglePanel,
        child: _isPanelOpen ? Icon(Icons.keyboard_arrow_down) : Icon(Icons.keyboard_arrow_up),
      ),
    );
  }
}

위 코드에서 _togglePanel 함수는 클릭 이벤트가 발생할 때 패널의 열림/닫힘 상태를 토글합니다. floatingActionButton 속성은 패널의 열림/닫힘 상태에 따라 아이콘을 변경합니다.

이제 슬라이딩 패널과 아이콘 버튼이 함께 동작하는 Flutter 앱을 만들 수 있습니다. 예제 코드를 참고하여 원하는 방식으로 커스터마이징해보세요.

참고 자료