[flutter] 플러터 슬라이딩 패널 카메라 뷰

이번에는 Flutter를 사용하여 슬라이딩 패널과 카메라 뷰를 구현하는 방법을 알아보겠습니다. 슬라이딩 패널은 단순한 앱 UI 요소입니다. 슬라이딩 패널이 열려있을 때, 카메라 뷰를 표시하고 패널을 닫으면 카메라 뷰가 사라집니다.

패키지 가져오기

먼저, camera 패키지와 sliding_up_panel 패키지를 가져와야 합니다. camera 패키지는 Flutter에서 카메라 뷰를 제공하며, sliding_up_panel 패키지는 슬라이딩 패널을 생성합니다.

dependencies:
  camera: ^0.5.8+10
  sliding_up_panel: ^1.0.3

슬라이딩 패널 UI 만들기

슬라이딩 패널을 만들기 위해 SlidingUpPanel 위젯을 사용합니다. 패널의 상태에 따라 UI가 변하도록 하기 위해 PanelController를 사용합니다.

import 'package:sliding_up_panel/sliding_up_panel.dart';

PanelController _panelController = PanelController();

// 슬라이딩 패널 UI
SlidingUpPanel(
  controller: _panelController,
  panel: Container(
    color: Colors.white,
    child: Center(
      child: Text("슬라이딩 패널"),
    ),
  ),
  body: Container(
    color: Colors.blue,
    child: Center(
      child: RaisedButton(
        child: Text("패널 열기"),
        onPressed: () {
          _panelController.open();
        },
      ),
    ),
  ),
);

카메라 뷰 추가하기

카메라 뷰를 추가하기 위해 camera 패키지를 사용합니다. 먼저 카메라 인스턴스를 생성하고, 뷰를 표시할 CameraPreview 위젯을 사용합니다. 이를 위해 CameraController를 사용하여 카메라를 초기화하고, Texture 위젯으로 뷰를 렌더링합니다.

import 'package:camera/camera.dart';

List<CameraDescription> cameras;

// 카메라 초기화
void initializeCamera() async {
  cameras = await availableCameras();
  final CameraController _cameraController = CameraController(
    cameras[0],
    ResolutionPreset.max,
  );
  await _cameraController.initialize();
}

// 카메라 뷰
CameraPreview(_cameraController);

전체 코드

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

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

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

class CameraApp extends StatefulWidget {
  @override
  _CameraAppState createState() => _CameraAppState();
}

class _CameraAppState extends State<CameraApp> {
  List<CameraDescription> cameras;
  CameraController _cameraController;
  PanelController _panelController = PanelController();

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

  // 카메라 초기화
  void initializeCamera() async {
    cameras = await availableCameras();
    _cameraController = CameraController(
      cameras[0],
      ResolutionPreset.max,
    );
    await _cameraController.initialize();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('카메라 앱'),
      ),
      body: Stack(
        children: [
          CameraPreview(_cameraController), // 카메라 뷰
          SlidingUpPanel(
            controller: _panelController,
            panel: Container(
              color: Colors.white,
              child: Center(
                child: Text("슬라이딩 패널"),
              ),
            ),
            body: Container(
              color: Colors.blue,
              child: Center(
                child: RaisedButton(
                  child: Text("패널 열기"),
                  onPressed: () {
                    _panelController.open();
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

위의 코드를 실행하면 슬라이딩 패널과 카메라 뷰가 함께 표시됩니다. 패널을 열고 닫을 때 카메라 뷰가 화면에 표시되거나 사라지는 것을 확인할 수 있습니다.

이제 Flutter에서 슬라이딩 패널과 카메라 뷰를 구현하는 방법을 알게되었습니다. 추가적인 기능을 구현하려면 해당 패키지의 문서를 참조해보세요.

참고 자료