[flutter] 플러터(expandable)을 사용하는 멀티미디어 플레이어 앱 개발 방법

04 Dec 2023

flutter

이번 블로그에서는 Flutter 앱 개발을 위한 플러그인인 expandable을 사용하여 멀티미디어 플레이어 앱을 개발하는 방법에 대해 알아보겠습니다.

expandable 플러그인 소개

expandable 플러그인은 플러터를 사용하여 확장 가능한 위젯을 생성하는 데 도움을 줍니다. 이 플러그인을 사용하면 앱의 사용자 인터페이스를 보다 유연하게 만들 수 있습니다.

앱 구조 및 디자인

이 앱은 멀티미디어 파일을 재생하는 간단한 플레이어를 구현합니다. 화면의 상단에는 재생 중인 미디어 파일의 정보가 표시되고, 하단에는 재생 및 일시 정지 버튼이 있습니다. 또한, 상단 위젯을 터치하면 화면 아래쪽으로 확장되어 세부 정보가 표시됩니다.

앱의 전체적인 디자인과 구조는 다음과 같습니다.

    -------------
   |  Media Info  |
    -------------
   |             |
   |             |
   |  Media      |
   |  Player     |
   |             |
   |             |
   --------------
   | Play/Pause  |
    -------------

프로젝트 설정 및 의존성 추가

Flutter 개발 환경을 설정합니다. (Flutter 설치 가이드)
Flutter 프로젝트를 생성하고, 핵심 의존성을 추가합니다.
```
flutter create media_player_app
cd media_player_app
```

pubspec.yaml 파일을 열고, expandable 플러그인을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  expandable: ^4.1.4

의존성을 적용합니다.
```
flutter packages get
```

앱 개발

이제 플러그인을 사용하여 멀티미디어 플레이어 앱을 개발해 보겠습니다.

main.dart 파일을 열고, 필요한 패키지를 가져옵니다.

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

MyApp 클래스를 정의하고, MaterialApp 위젯을 반환합니다. 이번 예제에서는 Scaffold 위젯을 사용하여 앱의 레이아웃을 작성합니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Media Player App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Media Player'),
        ),
        body: PlayerScreen(),
      ),
    );
  }
}

PlayerScreen 클래스를 정의하고, ExpandableNotifier 위젯으로 래핑합니다. ExpandableNotifier는 확장 가능한 위젯의 상태를 관리하는 데 필요한 기능을 제공합니다.

class PlayerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ExpandableNotifier(
      child: Container(
        child: Column(
          children: [
            MediaInfoWidget(),
            Expanded(
              child: Expandable(
                collapsed: ExpandableButton(child: PlayerWidget()),
                expanded: PlayerDetailsWidget(),
              ),
            ),
            MediaControlsWidget(),
          ],
        ),
      ),
    );
  }
}

MediaInfoWidget, PlayerWidget, PlayerDetailsWidget, MediaControlsWidget 클래스를 정의하여 앱의 위젯을 구성합니다. 이들 위젯은 각각 재생 중인 미디어 파일의 정보, 플레이어 화면, 세부 정보, 제어 버튼을 표시합니다.
앱 실행을 확인합니다.

결론

이러한 방법으로 Flutter 앱에서 expandable 플러그인을 사용하여 멀티미디어 플레이어 앱을 개발할 수 있습니다. expandable 플러그인을 사용하면 앱의 사용자 인터페이스를 유연하게 만들 수 있으며, expandable 위젯을 사용하여 원하는 구조의 위젯을 생성할 수 있습니다.

더 많은 플러그인과 기능을 사용하여 Flutter 앱을 개발하고 향상시킬 수 있습니다. Flutter 커뮤니티에서 제공하는 다양한 플러그인들을 찾아보세요! Happy coding! 😊

참고: flutter_expandable