[flutter] 플러터 앱의 메뉴 디자인을 위한 클리퍼 사용 예제

05 Dec 2023

flutter

플러터는 Google에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, 아름답고 직관적인 사용자 인터페이스를 쉽게 구현할 수 있습니다. 이번 예제에서는 플러터의 ClipRRect 위젯을 사용하여 메뉴 디자인에 클리퍼를 적용하는 방법에 대해 알아보겠습니다.

클리퍼는 플러터에서 이미지와 같은 위젯의 모양을 잘라낼 때 사용되며, 가장 일반적인 클리퍼는 RoundRect입니다. ClipRRect 위젯은 RoundRect 클리퍼를 생성하고 자식 위젯을 해당 클리퍼에 적용합니다.

다음은 클리퍼를 사용하여 메뉴 아이템을 둥글게 처리하는 예제입니다.

import 'package:flutter/material.dart';

class MenuScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Menu'),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Container(
                color: Colors.blue,
                height: 100,
                width: 100,
                child: Center(
                  child: Text(
                    'Item 1',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    ),
                  ),
                ),
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Container(
                color: Colors.green,
                height: 100,
                width: 100,
                child: Center(
                  child: Text(
                    'Item 2',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    ),
                  ),
                ),
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child: Container(
                color: Colors.red,
                height: 100,
                width: 100,
                child: Center(
                  child: Text(
                    'Item 3',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서 ClipRRect 위젯을 사용하여 메뉴 아이템을 둥글게 처리하였습니다. borderRadius 속성을 설정하여 둥글게 처리할 정도를 조절할 수 있으며, Container 위젯의 color, height, width 속성을 조정하여 메뉴 아이템의 색상과 크기를 변경할 수 있습니다.

이 예제를 실행하면 앱 바에 ‘Menu’라는 제목이 있는 메뉴 화면이 표시되며, 클리퍼가 적용된 둥글고 색상이 지정된 메뉴 아이템이 표시됩니다.

클리퍼를 사용하여 플러터 앱의 메뉴 디자인을 더욱 흥미롭게 만들 수 있습니다. 플러터에 대한 자세한 정보는 플러터 공식 문서를 참고하시기 바랍니다.