[flutter] 플러터 슬라이딩 패널 영상 통화

이번에는 플러터(Flutter)를 사용하여 슬라이딩 패널(Sliding Panel)을 구현하고, 이를 활용하여 영상 통화 기능을 추가해보겠습니다.

1. 슬라이딩 패널 구현하기

먼저, 앱의 메인 화면을 구성하기 위해 Scaffold 위젯을 사용합니다. Scaffold 위젯은 앱의 기본적인 레이아웃을 제공하며, 내부에 다양한 위젯을 추가하여 UI를 구성할 수 있습니다.

import 'package:flutter/material.dart';

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

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sliding Panel Example'),
      ),
      body: Center(
        child: Text('Home Page'),
      ),
    );
  }
}

위 코드에서는 HomePage 클래스에서 메인 화면을 구성하고, Scaffold 위젯의 body 속성에 Text 위젯을 추가하여 “Home Page”라는 텍스트를 표시하도록 설정하였습니다.

2. 슬라이딩 패널 추가하기

이제 슬라이딩 패널을 추가해보겠습니다. SlidingUpPanel 패키지를 사용하면 쉽게 슬라이딩 패널을 구현할 수 있습니다. 먼저, pubspec.yaml 파일에 sliding_up_panel 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  sliding_up_panel: ^1.0.3

그리고 HomePage 클래스의 build 메서드에서 SlidingUpPanel 패널을 추가해보겠습니다.

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sliding Panel Example'),
      ),
      body: Center(
        child: Text('Home Page'),
      ),
      bottomSheet: SlidingUpPanel(
        panelBuilder: (sc) => buildPanel(sc),
      ),
    );
  }

  Widget buildPanel(ScrollController sc) {
    return Container(
      child: ListView.builder(
        controller: sc,
        itemCount: 20,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
      ),
    );
  }
}

위 코드에서는 SlidingUpPanel 패키지의 SlidingUpPanel 위젯을 ScaffoldbottomSheet 속성에 추가하였습니다. panelBuilder 속성을 통해 패널 내부의 위젯을 구성할 수 있습니다.

패널은 Container 위젯으로 감싸진 ListView.builder 위젯으로 구성되어 있으며, 여기에 ListTile을 추가하여 각 항목을 표시하도록 설정하였습니다.

3. 영상 통화 기능 추가하기

이제 슬라이딩 패널에 영상 통화 기능을 추가해보겠습니다. flutter_webrtc 패키지를 사용하여 영상 통화 기능을 구현할 수 있습니다. 먼저, pubspec.yaml 파일에 flutter_webrtc 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  sliding_up_panel: ^1.0.3
  flutter_webrtc: ^0.9.4

그리고 HomePage 클래스의 buildPanel 메서드에서 영상 통화 기능을 추가해보겠습니다.

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

class HomePage extends StatelessWidget {
  final rtcVideoRenderer = new RTCVideoRenderer();

  @override
  void initState() {
    super.initState();
    initRenderers();
  }

  @override
  void dispose() {
    rtcVideoRenderer.dispose();
    super.dispose();
  }

  void initRenderers() async {
    await rtcVideoRenderer.initialize();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sliding Panel Example'),
      ),
      body: Center(
        child: Text('Home Page'),
      ),
      bottomSheet: SlidingUpPanel(
        panelBuilder: (sc) => buildPanel(sc),
      ),
    );
  }

  Widget buildPanel(ScrollController sc) {
    return Container(
      child: Column(
        children: [
          Expanded(
            child: RTCVideoView(
              rtcVideoRenderer,
              objectFit: RTCVideoViewObjectFit.RTCVideoViewObjectFitCover,
            ),
          ),
          RaisedButton(
            child: Text('Start Video Call'),
            onPressed: () {
              // 영상 통화 코드 작성
            },
          ),
        ],
      ),
    );
  }
}

위 코드에서는 flutter_webrtc 패키지의 RTCVideoRenderer 클래스를 사용하여 비디오 렌더링을 구현하고, RTCVideoView 위젯을 사용하여 화면에 비디오를 표시하도록 설정하였습니다. 이때, RTCVideoViewrtcVideoRenderer 속성에 위에서 생성한 rtcVideoRenderer 객체를 전달합니다.

또한, ` RaisedButton` 위젯을 사용하여 “Start Video Call” 버튼을 추가하였습니다. 버튼을 누르면 영상 통화 기능을 위한 코드를 작성하면 됩니다.

마무리

위와 같이 플러터를 사용하여 슬라이딩 패널로 영상 통화 기능을 구현할 수 있습니다. sliding_up_panel 패키지를 사용하여 슬라이딩 패널을 구현하고, flutter_webrtc 패키지를 사용하여 영상 통화 기능을 추가하는 방법을 다루었습니다. 이를 응용하여 다양한 기능을 추가하여 플러터 앱을 개발해보세요!