[flutter] ListView에서 아이템의 이미지 효과 추가하기

08 Dec 2023

flutter

Flutter 앱에서 ListView는 여러 아이템을 보여주는데 주로 사용됩니다. 각 아이템에 이미지를 추가하고 싶을 때 이미지 효과를 주어 아이템 간 인상적인 시각적 경험을 제공할 수 있습니다.

이미지 효과 추가하기

아래는 ListView 내의 각 아이템에 이미지 효과를 추가하는 방법입니다.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(
            image: NetworkImage(items[index].imageUrl),
            fit: BoxFit.cover,
          ),
        ),
      ),
      title: Text(items[index].title),
      subtitle: Text(items[index].subtitle),
      // 나머지 아이템 속성들 추가
    );
  },
)

위 예제에서 ListView.builder는 itemBuilder 함수를 통해 각각의 아이템을 만들고 표시합니다. 각 ListTile은 leading 속성을 이용해 원하는 이미지 효과를 부여할 수 있습니다.

마치며

위 예제를 통해 Flutter의 ListView에서 각 아이템에 이미지 효과를 추가하는 방법을 알아보았습니다. 이를 통해 앱의 사용자 경험을 향상시킬 수 있습니다.

더 많은 정보를 원하시면 Flutter 공식 문서를 참고하시기 바랍니다.