Flutter - CircleAvatar를 활용하여 Gradient Avatar 만들기 (인스타그램 아바타)

다양한 방법으로 CircleAvatar를 사용하면, 원형의 이미지를 만들 수 있다. 인스타 그램을 보면 아바타 겉에 그라데이션 border 효과가 들어가 있다. (아래 사진 참고)

 

구현 방법

우선 CircleAvatar를 사용하여, 원형의 아바타를 만든다.

import 'package:flutter/material.dart';

class GradientBorderCircleAvatar extends StatelessWidget {
  const GradientBorderCircleAvatar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      radius: 250,
      backgroundImage: AssetImage("assets/images/person-winter.png"),
    );
  }
}

CircleAvatar

 

만들어진 아바타 겉에 border 효과를 줄건데, CircleAvatar에는 border 속성이 없다. 그래서 Container를 겉에 감싸서 border 효과를 주려고 한다.

import 'package:flutter/material.dart';

class GradientBorderCircleAvatar extends StatelessWidget {
  const GradientBorderCircleAvatar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          begin: Alignment.bottomRight,
          end: Alignment.topLeft,
          colors: [
            Color(0xff4dabf7),
            Color(0xffda77f2),
            Color(0xfff783ac),
          ],
        ),
        borderRadius: BorderRadius.circular(500),
      ),
      child: CircleAvatar(
        radius: 250,
        backgroundImage: AssetImage("assets/images/person-winter.png"),
      ),
    );
  }
}

• 그라데이션 효과는 Container > decoration: BoxDecoration > gradient: LinearGradient 를 사용한다
• border의 width 값은 Container의 padding을 활용할 수 있다 

 

 

구현 화면