Flutter는 기본적으로 많은 Icon을 제공합니다. (땡큐)
그러나 우리 또는 디자이너는 다른 아이콘을 사용하고 싶어하죠.
그럴 때는 이미지 버튼을?
전 아이콘을 만들어서 넣으시길 추천합니다. 한번 만들어 놓으면 사용하기도 쉽고 아무래도 리소스 그리고 애니메이션도 쉽게 만들수 있기 때문이죠. 아이콘 애니메이션은 하기 링크를 참고하세요.
2022.01.06 - [Flutter(플러터)/UI] - Flutter Animation icon
Flutter Animation icon
위와 같이 아이콘에 애니메이션을 주고 싶습니다. Flutter에서는 아이콘에 애니메이션이 쉽게 적용될 수 있도록 AnimatedIcon 이라는 위젯을 제공 합니다. 아래 링크에서 확인 가능합니다. https://www.yo
byounghonglim.tistory.com
자 그럼 아이콘을 우선 만들어 봅시다. Flutter는 친절하게 아이콘을 만들 수 있는 사이트를 제공합니다.
FlutterIcon - Flutter custom icons generator
This site will not work if cookies are completely disabled. {"assets_hash":"e63afe94764170521b88e195c1026df9","page_data":{},"locale":"en-US","layout":"fontello.layout"}
www.fluttericon.com
만드는 과정은 다음과 같습니다.
1. svg 이미지를 넣으면
2. 상단에 Custom Icons가 생기고 해당 아이콘을 한꺼번에 다운 받으시면 됩니다.
3. 위에 제가 만든 아이콘을 다운 받으면 .ttf 파일이 생깁니다.
4. 해당 파일을 프로젝트에 assets/ 하위에 원하시는 위치로 복사합니다.
5. NumbersIcons 클래스를 만들고 하기와 같이 아이콘에 대해서 작성하시면 됩니다.
6. pubspec.yaml 파일내에 아래와 같이 작성합니다.
flutter :
...
- family: NumberIcons
fonts:
- asset: assets/Numbers-Icons.ttf7. 자 이제 사용하시면 됩니다. ^^
'Flutter(플러터) > UI' 카테고리의 다른 글
| Flutter Deep ( Dynamic ) Link ( 딥 링크, 다이나믹 링크 ) (0) | 2022.01.06 |
|---|---|
| Flutter onResume() , onPause() 있다? (0) | 2022.01.06 |
| Flutter Animation icon (0) | 2022.01.06 |
| Flutter Visibility(Visible) hide / show (0) | 2022.01.06 |
| Flutter Icon ? IconData ? (0) | 2022.01.05 |
댓글