Flutter는 다양한 아이콘을 사용할 수 있는 훌륭한 아이콘 라이브러리인 cupertino_icons를 제공합니다. 이 라이브러리를 사용하여 아이콘을 사용할 수 있을 뿐만 아니라, 아이콘에 테두리나 스타일을 추가할 수도 있습니다.
이번 블로그 포스트에서는 cupertino_icons 패키지를 사용하여 아이콘을 테두리 스타일링하는 방법에 대해 알아보겠습니다.
1. cupertino_icons 패키지 추가하기
pubspec.yaml 파일의 dependencies 섹션에 cupertino_icons 패키지를 추가합니다.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.3
의존성을 추가한 후에는 flutter packages get 명령을 실행하여 패키지를 가져옵니다.
2. 아이콘 테두리 스타일링하기
아이콘에 테두리를 추가하려면 일반적으로 Container 위젯을 사용하여 아이콘을 감싸고, decoration 속성을 사용하여 테두리 스타일을 설정합니다.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cupertino_icons/cupertino_icons.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Icon Styling',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Icon Styling'),
),
body: Center(
child: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 2.0,
),
borderRadius: BorderRadius.circular(10),
),
child: Icon(
CupertinoIcons.cube,
size: 40,
color: Colors.blue,
),
),
),
);
}
}
위의 예제에서는 Container 위젯을 사용하여 아이콘을 감싸고, 테두리를 추가하기 위해 decoration 속성을 설정하였습니다. Border.all 속성을 사용하여 테두리의 색상과 너비를 설정할 수 있으며, borderRadius 속성을 사용하여 테두리의 모서리를 둥글게 만들 수 있습니다.
해당 예제에서는 CupertinoIcons.cube를 사용하여 큐브 모양의 아이콘을 생성하였습니다. 이 부분을 원하는 아이콘으로 변경하여 사용할 수 있습니다.
마무리
이번 블로그 포스트에서는 cupertino_icons 패키지를 사용하여 Flutter에서 아이콘에 테두리 스타일링을 하는 방법을 살펴보았습니다. 이를 활용하여 더 다양하고 예쁜 UI를 구성할 수 있을 것입니다. 자세한 내용은 Cupertino Icons 패키지 문서를 참조하시기 바랍니다.