[플러터] ClipOval 에 대해서

이번에 설명해드릴 위젯은 2020. 4. 24 영상으로 올라온 ClipOval 위젯입니다. 해당 위젯을 사용하면 하위 요소를 원이나, 타원으로 변경할 수 있습니다.

ClipOval 적용 , 미적용

<전체 코드>

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyFirstWidget(),
    );
  }
}
class MyFirstWidget extends StatelessWidget {
  MyFirstWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('ClipOval Sample'),
        ),
        body:
        ClipOval(
            clipper: MyClipper(),
            child : Image.asset('images/flutter_logo2.png')
        )
    );
  }
}

class MyClipper extends CustomClipper<Rect>{

  @override
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, size.width, size.height);
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {

  }
}

둥글게 만들고 싶은 위젯을 ClipOval()로 감싸줍니다. 그 후에 child에 해당 위젯을 넣고 clippper로 MyClipper()를 넣습니다.

이제 MyClipper를 구현해보겟습니다. 하위 메소드로 getClip과 shoulReclip를 가지고 있습니다. 
getClip 은 어떤 방식으로 둥글게 말 것인가에 대해 정하는 메소드,
shouldReclip 은 플러터에데 다시 클러퍼를 작동시켜야 하는지 여부를 알려주는 메소드입니다.

getClip은 다양한 모양새가 있습니다.