[flutter] superellipse 모양을 활용한 플러터 앱의 폴더 아이콘 디자인하기

15 Dec 2023

flutter

이번에는 superellipse 모양을 활용하여 폴더 아이콘을 디자인하는 방법에 대해 알아보겠습니다. superellipse는 사각형과 서클 사이의 모양으로, iOS 앱 개발에서도 많이 사용됩니다.

1. superellipse 라이브러리 설치하기

먼저 superellipse 라이브러리를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 추가해 주세요.

dependencies:
  superellipse: ^1.0.0

이제 패키지를 설치해 주세요.

flutter pub get

2. Superellipse 모양 아이콘 생성하기

다음으로, superellipse를 사용하여 아이콘을 생성해 보겠습니다.

import 'package:flutter/material.dart';
import 'package:superellipse/superellipse.dart';

class FolderIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Center(
        child: Superellipse(
          child: Icon(
            Icons.folder,
            color: Colors.white,
          ),
          borderRadius: BorderRadius.circular(20),
        ),
      ),
    );
  }
}

위 코드는 superellipse 패키지를 사용하여 폴더 아이콘을 생성하는 예시입니다.

3. 아이콘을 앱에 적용하기

마지막으로, 이 아이콘을 앱에 적용해 보겠습니다.

import 'package:flutter/material.dart';
import 'folder_icon.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Folder Icon Example'),
        ),
        body: Center(
          child: FolderIcon(),
        ),
      ),
    );
  }
}

위 코드는 FolderIcon 위젯을 생성하여 앱에 표시하는 예시입니다.

이제 여러분도 superellipse 모양을 활용하여 폴더 아이콘을 디자인할 수 있게 되었습니다.

참고 자료: superellipse 라이브러리