내가 보려고 쓰는 Flutter 일기
출처 : https://www.youtube.com/watch?v=eI43jkQkrvs&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=17

ClipRRect

오늘 배워볼 위젯은 ClipRRect
공식 페이지 문서에는 크게 설명도 없고, 내가 좋아하는 그림도 없고... 그래서 오늘은 유튜브 영상을 보았다. 정말 간단했다!

네모의 각진 부분을 둥글게 만들고 싶니? 그럼 ClipRRect를 써!

라는게 영상의 요점이고 그게 끝이다.

예제 코드가 없어서 프로젝트 켜면 나오는 기본 코드에다 손을 조금 대서 매우 간단한 예시를 만들었다. 내가 직접 만들어서 헤맸다^^
헤맨 부분과 올바르게 적은 코드를 비교해보자.

코드 예시로 알아보자

우선 ClipRRect 위젯을 사용하면 아래와 같이 모서리가 둥글게 변한다.

ClipRRect 적용 전	ClipRRect 적용 후

아래 코드에서 ClipRRect를 어디에 추가해야 모서리가 둥글게 될까?

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: ClipRRectWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Test ClipRRect")),
      body: Center(
        child: Container(
          width: 250,
          height: 250,
          color: Colors.redAccent.withOpacity(0.4),
        ),
      ),
    );
  }
}

처음엔 당연히 Center를 ClipRRect로 감싸줘야겠거니 하고 Center를 감싸버렸는데, 모서리가 전혀 안변했다ㅠㅠ 설명 동영상을 다시 보니, RenderImage바로 위에 삽입해서 작동한다고 되어있었다. Container를 ClipRRect로 감싸주니 모서리가 둥글어졌다!

build부분을 요렇게 바꿔주었다.

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:const Text("Test ClipRRect")),
      body: Center(
      //요기요기
        child: ClipRRect(
          borderRadius: BorderRadius.circular(20),
          child: Container(
            width: 250,
            height: 250,
            color: Colors.redAccent.withOpacity(0.4),
          ),
        ),
      ),
    );
  }

갑자기 정사각형을 동그라미로 만들고 싶다

그러면 width, height속성 값의 절반만큼 circular에 설정하면 된다. 여기서는 125이다. 위 코드에서 borderRadius: BorderRadius.circular(125)로 바꾸기만 하면 된다.

오늘의 일기는 여기까지!