Flutter 모서리 둥글게 하기 (feat.ClipRRect, feat. CircleAvatar)

이번에는 모서리를 둥글게 해 보도록 하겠다

 

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드를 실행하면 아래와 같이 나온다

 

2. 기본 BorderRadius사용하기

practice_page.dart

decoration쪽에

borderRadius: BorderRadius.circular(30)을 넣어 보고 결과를 보도록 한다.

 

3. ClipRRect

이번에는 ClipRRect를 사용해서 한번 둥글게 해 보겠다

practice_page.dart

ClipRRect(
  borderRadius: BorderRadius.circular(30),
  child: Container(
    width: 100,
    height: 100,
    decoration: BoxDecoration(
      color: Colors.red,
    ),
  ),
),

코드는 위와 같이 바꿨다

결과는 위와 같이 나왔다. 그런데 왜 ClipRRect를 쓸까? 라고 의문이 들 수가 있다

Image.asset를 사용해서 이미지를 넣고 둥글게 하고 싶을 경우, borderRadius가 없기 때문에

ClipRRect 같은 것으로 처리를 해줘야 한다

 

3. CircleAvatar

다음은 CircleAvatar를 사용해서 모서리를 둥글게 해 보겠다

practice_page.dart

SizedBox(
  width: 100,
  height: 100,
  child: CircleAvatar(
    backgroundImage: AssetImage("assets/flutter.png"),
  ),
),

코드를 위와 같이 해놓고 실행시켜본다

Radius를 설정하지 않고서도 둥글게 만들 수 있다