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

플러터(https://flutter.dev)는 Google에서 개발한 모바일 앱 개발 프레임워크로, 다양한 플랫폼에서 동작하는 네이티브 수준의 앱을 개발할 수 있습니다. 이번에는 플러터의 슬라이딩 패널을 활용하여 검색 화면을 만드는 방법에 대해 알아보겠습니다.

1. 패키지 추가

먼저, 플러터 프로젝트에 flutter_sliding_panel 패키지를 추가해야 합니다. 이 패키지는 슬라이딩 패널을 구현하기 위한 API와 위젯을 제공해줍니다. pubspec.yaml 파일의 dependencies 섹션에 다음과 같이 추가해줍니다:

dependencies:
  flutter_sliding_panel: ^1.0.0

패키지를 추가한 후에는 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

2. 검색 화면 구현하기

검색 화면을 위한 페이지(SearchPage)를 생성합니다. 이 페이지는 슬라이딩 패널을 포함하고 있으며, 검색 기능을 구현할 예정입니다.

먼저, flutter_sliding_panel 패키지에서 제공하는 SlidingPanel 위젯을 가져옵니다:

import 'package:flutter_sliding_panel/flutter_sliding_panel.dart';

다음으로, SearchPage 클래스를 생성하고 StatefulWidget을 상속받도록 합니다:

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('검색'),
      ),
      body: SlidingPanel(
        panelContent: ListView(
          children: [
            ListTile(
              title: Text('아이템 1'),
            ),
            ListTile(
              title: Text('아이템 2'),
            ),
            ListTile(
              title: Text('아이템 3'),
            ),
          ],
        ),
        isDraggable: true,
      ),
    );
  }
}

위 코드에서는 SlidingPanel 위젯을 SearchPagebody에 추가하였습니다. panelContent 속성에는 슬라이딩 패널 안에 표시할 위젯을 설정할 수 있습니다. 이 예제에서는 ListView를 사용하여 아이템 목록을 표시하였습니다.

isDraggable 속성은 슬라이딩 패널을 사용자가 드래그하여 열고 닫을 수 있는지 여부를 설정합니다. 이 예제에서는 true로 설정하여 사용자가 슬라이딩 패널을 열고 닫을 수 있도록 합니다.

3. 검색 화면 사용하기

이제 생성한 SearchPage를 앱의 메인화면에 추가하여 사용할 수 있습니다. 예를 들어, 앱의 MaterialApp 위젯의 routesSearchPage를 추가해줍니다:

MaterialApp(
  routes: {
    '/': (context) => HomePage(),
    '/search': (context) => SearchPage(),
  },
)

이후, 앱에서 검색 화면으로 이동하고 싶은 곳에서 Navigator를 사용하여 SearchPage로 이동할 수 있습니다. 예를 들어, 버튼을 누르면 검색 화면으로 이동하도록 할 수 있습니다:

RaisedButton(
  onPressed: () {
    Navigator.pushNamed(context, '/search');
  },
  child: Text('검색 화면으로 이동'),
),

위와 같이 작성하면, 버튼을 누르면 SearchPage로 이동하는 것을 확인할 수 있습니다.

결론

이번 포스트에서는 플러터의 슬라이딩 패널을 활용하여 검색 화면을 구현하는 방법에 대해 알아보았습니다. 슬라이딩 패널을 사용하면 사용자 친화적인 UI를 만들 수 있으며, 다양한 기능을 추가하여 앱의 사용성을 높일 수 있습니다.

더 많은 정보 및 예제 코드는 flutter_sliding_panel 패키지의 공식 문서를 참고하시기 바랍니다.