[flutter] 플러터 슬라이딩 패널 주소록

플러터(Flutter)는 모바일 애플리케이션 개발을 위한 Google의 오픈소스 UI 프레임워크입니다. 이번에는 플러터를 사용하여 슬라이딩 패널 주소록을 구현하는 방법에 대해 알아보겠습니다.

슬라이딩 패널 소개

슬라이딩 패널은 콘텐츠를 보여주거나 가려주는 패널로, 앱 내에서 추가 정보나 설정을 보여주는데 사용될 수 있습니다. 사용자는 패널을 드래그하여 열거나 닫을 수 있습니다.

패키지 설치

슬라이딩 패널 주소록을 구현하기 위해 sliding_up_panel 패키지를 사용할 것입니다. pubspec.yaml 파일에서 패키지를 추가하고, 패키지를 설치해야합니다.

dependencies:
  sliding_up_panel: ^1.0.3

패키지를 추가한 후, flutter pub get 명령어를 실행하여 패키지를 설치합니다.

주소록 화면 구성

패키지를 설치한 후, 주소록 화면을 구성하는 코드를 작성할 차례입니다. 먼저, SlidingUpPanel 위젯을 사용하여 패널을 만들고, 주소록 목록을 보여주는 코드를 작성합니다.

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

class ContactsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('주소록'),
      ),
      body: SlidingUpPanel(
        panel: Column(
          children: [
            Text('패널 내용'),
            Text('주소록 목록'),
          ],
        ),
        body: ListView(
          children: [
            ListTile(
              title: Text('이름1'),
              subtitle: Text('전화번호1'),
            ),
            ListTile(
              title: Text('이름2'),
              subtitle: Text('전화번호2'),
            ),
            // ...
          ],
        ),
      ),
    );
  }
}

위 코드에서, SlidingUpPanel 위젯을 사용하여 주소록 목록(ListView)을 감싸주었습니다. 패널의 내용은 Column 위젯으로 구성하였으며, 원하는 대로 내용을 추가하고 스타일링 할 수 있습니다.

사용 방법

ContactsScreen 위젯을 사용하여 주소록 화면을 표시합니다. 일반적으로 Navigator나 다른 화면 전환 기능을 사용하여 해당 화면으로 이동시킬 수 있습니다.

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

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

이제 앱을 실행하면 슬라이딩 패널 주소록이 나타납니다. 사용자는 주소록 목록을 슬라이딩하여 패널을 열거나 닫을 수 있습니다.

결론

플러터의 sliding_up_panel 패키지를 사용하면 쉽게 슬라이딩 패널을 구현할 수 있습니다. 주소록 목록 외에도 다른 콘텐츠를 패널로 보여줄 수 있으므로, 앱의 사용자 경험을 향상시키는데 유용하게 사용될 수 있습니다.


관련 링크: