Flutter에서 원형 이미지(Circular Image) 만들기

앱에서 원형 이미지(Circular Image)는 사용자 프로필 사진, 아이콘, 썸네일 등에 자주 사용됩니다. Flutter에서는 ClipOval, CircleAvatar와 같은 여러 위젯을 사용하여 이미지를 손쉽게 원형으로 만들 수 있습니다. 이번 글에서는 Flutter에서 원형 이미지를 만드는 다양한 방법과 각각의 장점과 특징을 소개하겠습니다.

1. ClipOval 위젯을 사용한 원형 이미지 만들기

ClipOval 위젯은 이미지를 타원이나 원 모양으로 잘라내기 위해 사용됩니다. 직사각형 이미지를 원형으로 잘라낼 때 많이 사용되며, 이 위젯을 사용하면 배경색과 경계선 등을 추가로 설정할 수 있습니다.

ClipOval을 사용한 원형 이미지 예제

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Circular Image Example')),
        body: Center(
          child: ClipOval(
            child: Image.asset(
              'assets/profile.jpg',
              width: 100,
              height: 100,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

• ClipOval: 이미지를 타원 또는 원형으로 잘라내기 위해 사용합니다.
• BoxFit.cover: 이미지를 컨테이너에 맞게 자르되, 이미지가 왜곡되지 않도록 합니다.

이 예제는 assets/profile.jpg 이미지를 원형으로 표시하며, width와 height 속성으로 이미지 크기를 조정합니다.

2. CircleAvatar 위젯을 사용한 원형 이미지 만들기

CircleAvatar는 Flutter에서 프로필 사진이나 아이콘과 같은 원형 이미지를 표시할 때 많이 사용되는 위젯입니다. 내부적으로 ClipOval을 사용하여 이미지를 원형으로 잘라내며, 추가로 배경색과 기본 아이콘을 설정할 수 있습니다.

CircleAvatar를 사용한 원형 이미지 예제

CircleAvatar(
  radius: 50, // 반지름 설정
  backgroundImage: AssetImage('assets/profile.jpg'),
  backgroundColor: Colors.grey[200], // 이미지가 없을 때 표시되는 배경색
),

• radius: 원형 이미지의 반지름을 설정합니다. 전체 크기는 반지름의 두 배입니다.
• backgroundImage: 원형 이미지로 사용할 이미지입니다. AssetImage를 사용해 로컬 이미지를 지정할 수 있습니다.
• backgroundColor: 이미지가 없거나 로드되지 않았을 때 표시되는 배경색입니다.

이 예제는 100x100 크기의 원형 이미지를 생성하며, 이미지가 로드되지 않았을 때 배경색이 grey[200]으로 설정됩니다.

 

 

반응형

 

3. Container와 BoxDecoration을 사용한 원형 이미지 만들기

Container 위젯의 BoxDecoration을 활용해 원형 이미지를 만들 수도 있습니다. BoxDecoration의 shape 속성을 BoxShape.circle로 설정하고, 배경 이미지를 추가하여 원형 이미지를 구현할 수 있습니다.

Container와 BoxDecoration을 사용한 원형 이미지 예제

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: AssetImage('assets/profile.jpg'),
      fit: BoxFit.cover,
    ),
  ),
),

• BoxShape.circle: 이미지를 원형으로 잘라내는 속성입니다.
• DecorationImage: 이미지에 BoxFit.cover를 사용하여 원형 프레임에 맞게 이미지를 조절할 수 있습니다.

이 예제는 Container와 BoxDecoration을 사용해 원형 이미지를 생성하며, 다양한 추가 스타일을 더할 수 있습니다.

4. 네트워크 이미지로 원형 이미지 만들기

Flutter에서는 NetworkImage 클래스를 사용하여 네트워크에서 이미지를 불러올 수 있습니다. 원형으로 만들기 위해 ClipOval, CircleAvatar 또는 Container와 함께 사용할 수 있습니다.

네트워크 원형 이미지 예제

ClipOval(
  child: Image.network(
    'https://example.com/profile.jpg',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
),

또는 CircleAvatar를 사용하여 네트워크 이미지를 원형으로 설정할 수 있습니다.

CircleAvatar(
  radius: 50,
  backgroundImage: NetworkImage('https://example.com/profile.jpg'),
  backgroundColor: Colors.grey[200],
),

• Image.network: 네트워크에서 이미지를 불러와 표시합니다.
• NetworkImage: backgroundImage 속성에 네트워크 이미지를 설정할 때 사용됩니다.

이 코드는 https://example.com/profile.jpg 이미지를 원형으로 표시하며, 로드 중이거나 이미지가 없을 때 grey[200] 색상이 배경으로 표시됩니다.

 

 

728x90

 

5. 원형 이미지에 경계선 추가하기

원형 이미지에 경계선(테두리)을 추가하려면 Container와 BoxDecoration을 사용하는 방법이 유용합니다. border 속성을 설정하여 테두리의 색상과 두께를 지정할 수 있습니다.

원형 이미지에 경계선 추가 예제

Container(
  width: 110,
  height: 110,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(color: Colors.blue, width: 4), // 테두리 설정
    image: DecorationImage(
      image: AssetImage('assets/profile.jpg'),
      fit: BoxFit.cover,
    ),
  ),
),

• border: 테두리의 색상과 두께를 설정합니다.
• BoxShape.circle: 이미지를 원형으로 만들고, 경계선을 추가합니다.

이 예제는 파란색 테두리를 가진 원형 이미지를 만들며, 테두리 두께는 4로 설정되어 있습니다.

6. 원형 이미지에 그림자 추가하기

그림자는 이미지에 깊이감을 더하여 입체적인 느낌을 줄 수 있습니다. BoxDecoration의 boxShadow 속성을 사용해 원형 이미지에 그림자를 추가할 수 있습니다.

원형 이미지에 그림자 추가 예제

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: AssetImage('assets/profile.jpg'),
      fit: BoxFit.cover,
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 2,
        blurRadius: 10,
        offset: Offset(5, 5), // 그림자의 위치
      ),
    ],
  ),
),

• boxShadow: 그림자의 색상, 확산 반경(spreadRadius), 흐림 반경(blurRadius), 위치(offset)을 설정합니다.
• spreadRadius와 blurRadius: 그림자의 크기와 부드러움을 조절할 수 있습니다.

이 예제는 오른쪽 아래로 회색 그림자가 추가된 원형 이미지를 만들어, 입체감을 더해줍니다.

결론

Flutter에서 원형 이미지를 만드는 방법은 다양하며, ClipOval, CircleAvatar, Container 등을 활용하여 원하는 스타일로 손쉽게 구현할 수 있습니다. 또한, 테두리나 그림자를 추가하여 더욱 시각적으로 돋보이게 할 수 있습니다. 이번 글에서 소개한 예제를 활용하여 Flutter 애플리케이션에 원형 이미지를 적용하고, 다양한 스타일을 시도해보세요!