[flutter] 플러터 슬라이딩 패널 투명도 조절

플러터(Flutter)를 사용하여 앱을 개발하다 보면 슬라이딩 패널을 구현해야 할 때가 있습니다. 슬라이딩 패널은 앱의 일부를 옆으로 슬라이드하여 추가 콘텐츠를 표시하는 기능입니다. 이때, 슬라이딩 패널의 투명도를 조절하여 사용자 경험을 향상시킬 수 있습니다.

패키지 추가

슬라이딩 패널을 만들기 위해 sliding_up_panel 패키지를 사용하겠습니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해 주세요:

dependencies:
  sliding_up_panel: ^2.0.0

슬라이딩 패널 투명도 조절하기

  1. 먼저, sliding_up_panel 패키지를 import 합니다:
import 'package:sliding_up_panel/sliding_up_panel.dart';
  1. SlidingUpPanel 위젯을 사용하여 슬라이딩 패널을 생성합니다. 여기서 panelBuilder 속성을 사용하여 추가 콘텐츠를 생성합니다:
SlidingUpPanel(
  panelBuilder: (scrollController) => _buildPanelContent(scrollController),
  body: _buildBody(),
)
  1. _buildPanelContent 메서드를 생성하여 패널의 추가 콘텐츠를 구성합니다:
Widget _buildPanelContent(ScrollController scrollController) {
  return Container(
    color: Colors.white.withOpacity(0.8), // 패널의 투명도 조절
    child: ListView(
      controller: scrollController,
      children: [
        // 추가 콘텐츠 내용
      ],
    ),
  );
}

위의 코드에서 color 속성을 사용하여 패널의 투명도를 조절할 수 있습니다. Colors.white.withOpacity(0.8)와 같이 흰색 배경에 0.8의 투명도를 적용한 예시입니다.

완성된 예시 코드

import 'package:flutter/material.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: Scaffold(
        appBar: AppBar(
          title: Text('Sliding Panel Example'),
        ),
        body: SlidingUpPanel(
          panelBuilder: (scrollController) =>
              _buildPanelContent(scrollController),
          body: _buildBody(),
        ),
      ),
    );
  }

  Widget _buildPanelContent(ScrollController scrollController) {
    return Container(
      color: Colors.white.withOpacity(0.8),
      child: ListView(
        controller: scrollController,
        children: [
          ListTile(
            title: Text('Item 1'),
          ),
          ListTile(
            title: Text('Item 2'),
          ),
          ListTile(
            title: Text('Item 3'),
          ),
        ],
      ),
    );
  }

  Widget _buildBody() {
    return Center(
      child: Text('Main Content'),
    );
  }
}

위 예시 코드를 실행하면 슬라이딩 패널이 생성되며, 투명한 배경으로 추가 콘텐츠가 표시됩니다. 이때, color 속성값을 조정하여 패널의 투명도를 원하는 대로 조절할 수 있습니다.

플러터에서 슬라이딩 패널의 투명도를 조절하는 방법을 알아보았습니다. 이를 활용하여 앱의 사용자 경험을 더욱 향상시킬 수 있습니다.

참고 자료