Flutter - how to use Icon Picker(save, load)

Icon을 유저에게 선택 가능하도록 만들어야되는 앱이 있는경우

 

IconPicker를 사용하게 되는데, 필자가 이용한 패키지는 아래 링크에 있습니다

 

pub.dev/packages/flutter_iconpicker

 

먼저 

IconData data = await FlutterIconPicker.showIconPicker(context,
                        iconPackMode: IconPack.material);
print('${data.codePoint ?? null}');

다음과 같은식으로 아이콘을 선택하게 되는데

 

IconData의 data값을 print해보면 유니코드형태로 숫자가 출력되고

ex) IconData(U+0E145)

 

codePoint를 print해보면 5자리 숫자가 나오게 됩니다

ex) 57669

 

그러면 우리가 생각해봐야될 부분은 DB에 저장해야될때는

 

어떤식으로 저장 해야되고 가져올때 처리는 어떻게 해야되는지 고민이 됩니다

 

IconData의 codePoint는 int 타입이고

 

IconData()의 괄호 안에 들어가는 값은 유니코드 값입니다

 

IconPicker에서 Icon이 선택됐을 때 체크해야되는 값은

 

IconData.codePoint와 IconData.fontFamily입니다

 

iconPackMode에서 선택되는 값에따라 달라지게 됩니다

ex) IconPack.material을 쓰는 경우에는 fontFamily값이 MaterialIcons이 됩니다

(여러개를 사용하시는 분은 fontFamily 또한 DB에 저장하시고 처리해주셔야 될거 같습니다)

 

마지막으로 Icon을 출력하는 방법에는 여러가지가 있으나

 

필자는 IconData만 가지고 오는 방법을 택했습니다

 

IconData getIcon() {
    return IconData(data?.codePoint ?? Icons.device_unknown.codePoint,
        fontFamily: 'MaterialIcons');
  }

다음과 같이 처리하면 Null처리도 할 수 있고

 

codePoint값을 따로 변환해주지 않아도 자동으로 유니코드 값으로 변환을 해줍니다

 

간단한 예제로 만들어본 코드

class IconPickerExample extends StatefulWidget {
  @override
  _IconPickerExampleState createState() => _IconPickerExampleState();
}

class _IconPickerExampleState extends State<IconPickerExample> {
  IconData data;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Icon Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                  child: Text('Pick Icon'),
                  onPressed: () async {
                    data = await FlutterIconPicker.showIconPicker(context,
                        iconPackMode: IconPack.material);

                    setState(() {});
                  }),
              SizedBox(height: 20),
              Icon(getIcon(), size: 40)
            ],
          ),
        ));
  }

  IconData getIcon() {
    return IconData(data?.codePoint ?? Icons.device_unknown.codePoint,
        fontFamily: 'MaterialIcons');
  }
}

 

참고로 이 글은 codePoint값을 유니코드 형태로 변환해서

 

저장해보려는 시도하면서 시간낭비 하지 마시길바라며 쓴 글입니다

(필자의 날려버린 하루...)