시차 애니메이션 — FLUTTER

시차 효과 구현

패럴랙스 스크롤링 효과는 나머지 목록의 반대 방향으로 배경 이미지를 약간 밀어서 얻을 수 있습니다. 목록 항목이 화면 위로 이동하면 각 배경 이미지가 약간 아래로 이동합니다. 반대로 목록 항목이 화면 아래로 슬라이드되면 각 배경 이미지가 약간 위로 슬라이드됩니다. 시각적으로 시차가 발생합니다.



앱에서 카드 목록(예: 이미지 포함)을 스크롤하면 해당 이미지가 화면의 나머지 부분보다 더 느리게 스크롤되는 것처럼 보일 수 있습니다. 목록의 카드가 전경에 있는 것처럼 거의 보이지만 이미지 자체는 먼 배경에 멀리 떨어져 있습니다. 이 효과를 시차라고 합니다.

이 레시피에서는 카드 목록(일부 텍스트를 포함하는 둥근 모서리 포함)을 작성하여 시차 효과를 만듭니다. 각 카드에는 이미지도 포함되어 있습니다. 카드가 화면 위로 슬라이드되면 각 카드 내의 이미지가 아래로 슬라이드됩니다.

시차 항목을 보관할 목록 만들기

시차 스크롤 이미지 목록을 표시하려면 먼저 목록을 표시해야 합니다.

class ParallaxRecipe extends StatelessWidget {
  const ParallaxRecipe({super.key});
@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: const [],
      ),
    );
  }
}

텍스트 및 정적 이미지가 있는 항목 표시

각 목록 항목은 둥근 사각형 배경 이미지를 표시하여 전 세계 7개 위치 중 하나를 보여줍니다. 해당 배경 이미지 위에 쌓인 위치와 해당 국가의 이름은 왼쪽 하단에 있습니다. 배경 이미지와 텍스트 사이에는 배경에 대한 텍스트의 가독성을 향상시키는 어두운 그라데이션이 있습니다.

@immutable
class LocationListItem extends StatelessWidget {
  const LocationListItem({
    super.key,
    required this.imageUrl,
    required this.name,
    required this.country,
  });
final String imageUrl;
  final String name;
  final String country;
@override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
      child: AspectRatio(
        aspectRatio: 16 / 9,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(16),
          child: Stack(
            children: [
              _buildParallaxBackground(context),
              _buildGradient(),
              _buildTitleAndSubtitle(),
            ],
          ),
        ),
      ),
    );
  }
Widget _buildParallaxBackground(BuildContext context) {
    return Image.network(
      imageUrl,
      fit: BoxFit.cover,
    );
  }
Widget _buildGradient() {
    return Positioned.fill(
      child: DecoratedBox(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.transparent, Colors.black.withOpacity(0.7)],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            stops: const [0.6, 0.95],
          ),
        ),
      ),
    );
  }
Widget _buildTitleAndSubtitle() {
    return Positioned(
      left: 20,
      bottom: 20,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            name,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(
            country,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }
}
//Next, add the list items to your ParallaxRecipe widget.
class ParallaxRecipe extends StatelessWidget {
  const ParallaxRecipe({super.key});
@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          for (final location in locations)
            LocationListItem(
              imageUrl: location.imageUrl,
              name: location.name,
              country: location.place,
            ),
        ],
      ),
    );
  }
}

위의 코드는 기본적인 이해를 위한 것입니다. 완전한 소스 코드를 원하시면 아래 링크를 확인하십시오. Flutter에서 시차 효과가 있는 앱을 만들었습니다.

Complete Source Code

안내나 도움이 필요하면 언제든지 문의하세요. 곧 답변 드리겠습니다.

감사!