[flutter] 플러터 GridView에서 아이템에 그림자 효과를 추가하는 방법은?

18 Dec 2023

flutter

플러터에서 GridView를 사용하여 그리드 뷰를 만들 때, 각 아이템에 그림자 효과를 추가하는 것은 비교적 간단합니다.

그림자 효과 추가하기

import 'package:flutter/material.dart';

class ShadowGridViewItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      child: YourGridItemWidget(),
    );
  }
}

위 코드에서 ShadowGridViewItem은 그림자 효과가 적용된 GridView 아이템을 나타냅니다. Container 위젯의 decoration 속성을 사용하여 BoxShadow를 추가하면 됩니다. color 속성으로 그림자의 색상을 지정하고, spreadRadius, blurRadius, offset 등의 속성을 사용하여 그림자의 형태와 위치를 조절할 수 있습니다.

효과 사용하기

body: GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemBuilder: (BuildContext context, int index) {
    return ShadowGridViewItem();
  },
  itemCount: 4,
),

그림자 효과가 적용된 ShadowGridViewItem 위젯을 GridView에서 사용하면 됩니다.

위 방법으로 플러터 GridView의 각 아이템에 그림자 효과를 추가할 수 있습니다.

그림자 효과 추가하기

효과 사용하기

참고 자료