Flutter_17. Switch Function, Image, SizedBox, Column(Figma)

지난 포스팅에 이어 오늘은 Function 부분을 구현해보도록 하겠다.

코드를 다시 실행해보고, 해야할 체크 항목을 확인하자 :)

 

2023.05.08 - [개발하기] - Flutter_16. Static, Message, Switch, Slider

🌿 체크 항목
✅ Detail Page에서만 Play 화면에 진입 가능, Detail Page에 출력중인 이미지를 Play 화면에 출력하여 사용
1) SwitchImageChange : 이미지 변경(작품/아티스트)
2) SwitchImageSize : 이미지 사이즈 변경(작게/크게) & 스위치 Label 변경(Size-Max/Size-Min)
3) SwitchImageShow : 이미지 출력 여부 설정(노출/비노출), 비노출일 경우 해당 영역 Color 표시
4) SliderSize : 이미지 사이즈를 6단계(0~5) 옵션으로 선택하여 조절
5) SliderRotation : 이미지 각도를 0~360도 내에서 자유롭게 조절

 

 

 

 

 

 

---

Figma Case Check, Field

 

 

 

1) Figma - 케이스별 화면 메모

❊ Switch Function ❊
1. _playImageChange() : 이미지 변경(작품/아티스트)
2. _playImageSize() : 이미지 사이즈 변경(작게/크게) & 스위치 Label 변경(Size-Max/Size-Min)
3. _playImageShow() : 이미지 출력 여부 설정(노출/비노출), 비노출일 경우 해당 영역 Color 표시
4. _showAlertTurnOff(BuildContext context) : 3번의 경우 Alert 출력 후 이미지 비노출 처리

 

 

2) 이미지 경로 변수 처리

ASIS : static변수를 바로 이미지 영역에 출력

TOBE : Field에 변수 만들고, static 변수값 담아서 사용

 

 

 

3) 사이즈 변수 처리

 

 

 

4) 이미지 출력 영역 Column > SizedBox로 고정

 

 

 

 

 

 

Switch Function

 

 

 

1)  이미지 노출(노출 ↔ 비노출)

이미지 노출 여부가 출력되는 이미지(작품/아티스트) 옵션에 영향을 줌으로, 이미지 노출 ON/OFF 먼저 체킹한다.

Switch Image{On}일 경우
- Switch Artist 선택값에 따라 작품 또는 아티스트의 이미지 출력
Switch Image{Off}일 경우
- 해당 영역 Color 출력

  // ---Func1. 이미지 노출여부
  _playImageShow(){
    if(_switchImageShow){
      if(_switchImageChange){
        _imagePath = 'images/unsplashImg-artist.png';
      }else{
        _imagePath = Message.imagePath;
      }
    } else {
      _imagePath = 'images/noImage.png';
    } 
  }

 

 

 

 

2)  이미지 변경(작품 ↔ 아티스트)

이미지 노출이 ON일 경우에만, 해당 출력이 변경된다.

Switch Artist{On}일 경우 
- 아티스트의 이미지 출력
Switch Artist{Off}일 경우
- static에 담아둔 작품 이미지 출력

  // ---Func2. 이미지 변경(작품/아티스트)
  _playImageChange(){
    if(_switchImageChange){
      _imagePath = 'images/unsplashImg-artist.png';
    }else{
      _imagePath = Message.imagePath;
    }
  }

 

 

3)  이미지 사이즈(Max ↔ Min)

이미지 사이즈는 Switch On/Off에 따라 스위치 레이블(text)도 함께 변경해준다.

Switch Size{On}일 경우
- 이미지 사이즈 키우기 350 x 350
- 스위치명 "Size-Max"로 변경
Switch Size{Off}일 경우
- 이미지 사이즈 줄이기 100 x 100
- 스위치명 "Size-Min"으로 변경

  // ---Func3. 이미지 사이즈와 switch 이름 변경(Min/Max)
  _playImageSize(){
    if(_switchImageSize){
      _imageWidth = 100;
      _imageHeight = 100;
      _switchImageSizeLabel = 'Size-Max';

    }else{
      _imageWidth = 350;
      _imageHeight = 350;
      _switchImageSizeLabel = 'Size-Min';
    }
  }

 

 

 

 

4) 저장하고 화면 확인

❊ Switch Function ❊
✅ _playImageChange() : 이미지 변경(작품/아티스트)
✅ _playImageSize() : 이미지 사이즈 변경(작게/크게) & 스위치 Label 변경(Size-Max/Size-Min)
✅ _playImageShow() : 이미지 출력 여부 설정(노출/비노출), 비노출일 경우 해당 영역 Color 표시
4. _showAlertTurnOff(BuildContext context) : 3번의 경우 Alert 출력 후 이미지 비노출 처리

 

 

 

 

AlertDialog은 다음 포스팅... 

 

 

반응형