[Flutter] 이모티콘과 머티리얼 아이콘에서 이미지 데이터 검색

약간의 앱을 만들 뿐인데도 이미지 리소스라든지 준비하는 것은 귀찮기 때문에, Flutter로 손쉽게 아이콘 같은 것을 표시하는데, Text 위젯으로 이모티콘이나 Icon 위젯의 정의 끝난 아이콘을 사용하고 있습니다.

대체로 위젯 그대로 사이에 맞습니다만, WebView에 정의 끝난 머티리얼 아이콘 붙여넣고 싶다든가, ListView의 아이콘에 이모티콘을 사용하고 싶다든가, 이모티콘이나 머티리얼 아이콘으로부터 Image 데이터를 꺼내고 싶을 때가 있습니다. 그것의 간단한 방법을 생각해 냈기 때문에 메모했습니다. 좀 더 제대로 된 방법이 있는 것 같아요. (누군가 말해주세요)

이미지 로드 실패 시 대체 스펙 사용

Image 클래스의 이미지는 asset, File, net 또는 memory에서 읽습니다. 그러나 읽지 못했을 때 표시 할 대체 위젯을 errorBuilder 매개 변수로 지정할 수 있습니다. 일부러 로드할 수 없는 파일로 이미지 구축해, errorBuilder로 사용하고 싶은 이모티콘을 표시하는 Text 위젯이나 Icon 위젯을 지정하는 것입니다. 간단합니다.

머티리얼 아이콘

Image texticon = Image.file(File(""), 
  errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) { 
    return const Icon(Icons.text_snippet_outlined);
});

이모티콘

Image sadicon = Image.file(File(""), 
  errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) { 
    return const Text('😢');
});

ListView에서 사용하면 다음과 같습니다. 맨 위가 Icon( Icons.text_snippet_outlined ) 이고, 아래 2개는 이모티콘의 "😢📁"입니다.

다만 단점도 있어, 우선 로드에 실패하므로, 디버그하면 본근과 관계없는 곳에서 예외 일으켜 멈춥니다. Image.file()이라면 로드 결과가 캐시되는지 정지는 한 번만 되지만, Image.asset()에서 같은 일을 하면 몇번이나 멈추어서 기쁩니다. 본래의 사용법이 아닌 것은 확실하네요.

좋은 곳은 await 지정이 불필요하므로, Widget build나 생성자 등 좋아하는 곳에 쓸 수 있는 곳입니다.