롤 명함 앱 만들기#6-추가 정보 입력

자, 앞에서 OP.GG를 통해서 소환사의 정보들을 가져왔다.

가져온 소환사 정보는 앞에서 언급한 CardData클래스 형태로 저장했다.

 

이제 추가 정보를 입력받아 보자.

입력받을 정보는 자주 가는 라인(포지션), 카드의 배경 사진 or 색, 박스와 텍스트의 색이다.

 

1. 자주 가는 라인(포지션)

롤에는 포지션이 5개가 있으므로 버튼 5개를 만들었다.

라인을 2개 이상 가는 사람들도 있겠지만, 주 라인을 입력받는 것으로 했다.

버튼을 클릭하면 선택이 되고, 그 상태로 enter버튼을 누르면 선택한 라인을 CardData에 저장한다.(CardData.lane)

아래는 자주 가는 라인을 입력받는 소스 중 버튼에 관한 코드이다.

 

// select_position.dart의 코드 중 일부분

List<bool> isSelected = <bool>[false, false, false, false, false];

  EnterEvent() {
    if (isSelected.contains(true)) {
      switch (isSelected.indexOf(true)) {
        case 0:
          widget.cardData.lane = 'TOP';
          break;
        case 1:
          widget.cardData.lane = 'MID';
          break;
        case 2:
          widget.cardData.lane = 'JUG';
          break;
        case 3:
          widget.cardData.lane = 'BOT';
          break;
        case 4:
          widget.cardData.lane = 'SUP';
          break;
      }

      Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => SelectBackground(widget.cardData)));
    } else {
      nonLaneDialog(context);
    }
  }
  
  
  
  ToggleButtons(
              //fillColor : Colors.lightBlueAccent,
              children: <Widget>[
                Image.asset(
                  'assets/positions/position_top.png',
                  width: width * 0.15,
                ),
                Image.asset(
                  'assets/positions/position_mid.png',
                  width: width * 0.15,
                ),
                Image.asset(
                  'assets/positions/position_jug.png',
                  width: width * 0.15,
                ),
                Image.asset(
                  'assets/positions/position_bot.png',
                  width: width * 0.15,
                ),
                Image.asset(
                  'assets/positions/position_sup.png',
                  width: width * 0.15,
                ),
              ],
              onPressed: (int index) {
                setState(() {
                  for (int buttonIndex = 0;
                      buttonIndex < isSelected.length;
                      buttonIndex++) {
                    if (buttonIndex == index) {
                      isSelected[buttonIndex] = !isSelected[buttonIndex];
                    } else {
                      isSelected[buttonIndex] = false;
                    }
                  }
                });
              },
              isSelected: isSelected,
            ),

 

라인 아이콘은 라이엇 공식 홈페이지에서 가져왔다. 

(https://developer.riotgames.com/docs/lol)

 

2. 카드의 배경

다음은 카드의 배경을 입력받을 차례이다.

카드의 배경은 색 또는 이미지를 입력받는다.

팔레트 아이콘을 누르면 색을 선택하는 창이 뜨도록,

이미지 아이콘을 누르면 갤러리의 이미지를 선택하는 창이 뜨도록 했다.

 

 

왼쪽은 팔레트 아이콘 이벤트, 오른쪽은 이미지 아이콘 이벤트

 

 

색 선택은 flutter_colorpicker라는 라이브러리를 사용했다.

https://pub.dev/packages/flutter_colorpicker

flutter_colorpicker | Flutter Package

 

이미지 선택은 image_picker라는 라이브러리를 사용했다.

https://pub.dev/packages/image_picker

image_picker | Flutter Package

 

두 라이브러리의 사용법은 위의 링크에 가면 자세히 나와있으니 참고하면 되겠다.

 

아래는 각각의 아이콘을 눌렀을 때 뜨는 창인 colorDialog와 imageDialog에 대한 코드이다.

 

//select_background.dart의 소스 중 일부분  

  ImagePicker picker = ImagePicker();
  dynamic background;
  Color pickerColor = Colors.white;

  void changeColor(Color color) {
    setState(() => pickerColor = color);
  }

  colorDialog(BuildContext context) {
    showDialog(
      barrierDismissible: false,
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Pick a color!'),
          content: SingleChildScrollView(
            child: ColorPicker(
              pickerColor: pickerColor,
              onColorChanged: changeColor,
            ),
          ),
          actions: <Widget>[
            ElevatedButton(
              child: Text('Got it'),
              onPressed: () {
                setState(() => background = pickerColor);
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  ImageDialog() async {
    final getImage = await picker.pickImage(source: ImageSource.gallery);
    setState(() {
      if (getImage != null) {
        background = getImage;
      }
    });
  }

 

 

3. 박스와 텍스트의 색

마지막으로 소환사 정보들을 나타내는 박스와 텍스트의 색을 정한다.

텍스트 색, 박스의 색, 박스 안에 들어가는 텍스트의 색, 총 3가지를 정한다.

만약 고르기 귀찮으면 디폴트값 그대로 넘어가도 상관이 없다.

(다만 2번에서 배경을 정할 때 배경색을 흰색이나 검은색으로 했으면 글이 안 보이는 대참사가...)

 

색은 오른쪽의 직사각형 아이콘을 누르고 고르면 된다.

색 선택 아이콘은 2번에서의 flutter_colorpicker를 사용하여 구현했다.

 

 

 

이렇게 3단계에 걸쳐 추가 정보들을 입력받았다.

 

여기까지 하면 소환사의 데이터, 포지션 값, 배경값, 텍스트와 박스의 color값이 결정된다.

이 정보들을 바탕으로 카드를 만든다.

 

다음페이지에서는 완성된 카드를 만날 수 있다. 

 

글이 길어지니 다음 내용은 다음 글에서 작성하겠다.