Flutter_18. DialogAlert, Slider Function, Size, List, Switch

 

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

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

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

 

https://api.flutter.dev/flutter/material/Slider-class.html

Slider class - material library - Dart API

 

 

 

 

 

---

Figma Case Check, AlertDialog

 

 

 

1) Figma - 남아 있는 기능 체크

❊ Switch Function ❊
1. _showAlertTurnOff(BuildContext context) : Image 스위치를 Off 하는 경우, Alert 출력하고 이미지 비노출 처리

❊ Slider Function ❊
2. _playSliderSize() : 슬라이더 Max를 100(%)으로 놓고, 5개 구간으로 분리하여 사이즈 변경
3. _playSliderRotation() : 슬라이더 Max를 360(º)로 놓고, 0~360까지 자유롭게 회전

 

 

 

2) AlertDialog 함수 코드 붙여넣기

2023.05.03 - [개발하기] - Flutter_08. AlertDialog, Navigator, Routing, PushNamed

  // ---Function ImageShow 물어보고 끄기
  _showAlertTurnOff(BuildContext context){

    // 프레임 만들기
    showDialog(
      // 반드시 버튼 눌러야 종료시키고 쉽다면, barrierDismissible false
      barrierDismissible: false,
      context: context, 
      // 다이어로그 내용 만들기 - ctx에 저장
      builder: (BuildContext ctx){
        return AlertDialog(
          title: const Text(
            'Image Show Off',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          content: const Text('이미지를 비노출하시겠습니까?'),
          actions: [
            // Center에 놓거나, Row 또는 Column을 랩핑하여 다양하게 활용 가능!
            Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton(
                    onPressed: () {
                      // --- ctx 종료 시키기
                      Navigator.of(ctx).pop();
                    }, 
                    child: const Text(
                      '네',
                      ),
                    ),
                  TextButton(
                    onPressed: () {
                      // --- ctx만 종료 시키기
                      Navigator.of(ctx).pop();
                    }, 
                    child: const Text(
                      '아니요',
                      ),
                    ),
                ],
              ),
              ),
          ],
        );
      }
    );
  }

 

 

 

3) 함수 "_playImageShow()"에 Alert 함수 사용

_switchImageShow 스위치 값이 Off일 경우, 기존 이미지 경로 변경하는 코드는 우선 주석 처리한다.
해당 코드는 Alert 출력 후, 사용자가 "네" 클릭 시에만 적용되도록 위치를 옮겨줄 예정이다.

 

 

 

4) AlertDialog 함수에 button 이벤트 추가

AlertDialog 
- Yes : setState로 이미지 경로를 변경
- No : setState로 _switchImageShow 값 다시 true로 변경

 

 

 

 

5) 저장하고 화면 확인

 

 

반응형

 

 

 

 

 

Slider Function, List, Size-Min/Max

 

 

 

 

1)  이미지 사이즈 : 5구간(0~5)으로 선택 조절

이미지를 감고 있는 사이즈 박스 크기가 350 * 350임으로,
Max350, Min 100로 잡고 +50씩 0~5까지의 구간을 만들 예정이다.
List에 사이즈 값을 담고, index 변수(int)를 별도로 선언하였다.
→ [0]100, [1]150, [2]200, [3]250, [4]300, [5]350

class _CardPlayState extends State<CardPlay> {
  // Field
  late double _SliderValueSize;
  late List<double> _sliderValueSizeList;
  late int _sliderValueCurrent;
 
 
  @override
  void initState() {
    super.initState();

    _SliderValueSize = 0;
    _sliderValueSizeList = [100, 150, 200, 250, 300, 350];
    _sliderValueCurrent = 0;

  }

 

 

 

2) Slider 변수로 코드 변경

테스트로 넣은 print를 확인해보자!
- 슬라이더에 들어온 value(double) 값이 sliderValueSize(double) 변수에 들어온다.
- sliderValueCurrent(int) 변수에 들어온 sliderValueSize(double) 값을 toInt()로 변경하여 넣어준다.
- sliderValueCurrent(int) 변수는 index로 List에 몇번째 사이즈인지 체크할때 사용할 수 있다.

max: _sliderValueSizeList.length -1,
divisions: _sliderValueSizeList.length -1,

_SliderValueSize = value;
_sliderValueCurrent = _SliderValueSize.toInt();

 

 

 

3) 이미지 사이즈 적용 함수 구현

- 슬라이더에 있는 코드 함수로 이동
- Index가 [0]일 경우는, 사이즈 스위치{Off}일 경우와 동일 사이즈임으로 슬라이더가 움직여 0일때, 스위치도 false 처리
- Index가 [5]일 경우는, 사이즈 스위치{On}일 경우와 동일 사이즈임으로 슬라이더가 움직여 MAx일때, 스위치도 true 처리  

  // ---Func4. Slider Size
  _playSliderSize(){
    _sliderValueCurrent = _sliderValueSize.toInt();
    _imageWidth = _sliderValueSizeList[_sliderValueCurrent];
    _imageHeight = _sliderValueSizeList[_sliderValueCurrent];
    // print('slider : $_sliderValueSize');
    // print('index : $_sliderValueCurrent');
    // print('size : ${_sliderValueSizeList[_sliderValueCurrent]}');     
    
    // *** Slider Min Value{100} = Switch Label{Size-Min}
    if(_sliderValueCurrent == 0){
      _switchImageSizeLabel = 'Size-Min';
      _switchImageSize = false;
    }
    // *** Slider Max Value{350} = Switch Label{Size-Max}
    if(_sliderValueCurrent == _sliderValueSizeList.length-1){
      _switchImageSizeLabel = 'Size-Max';
      _switchImageSize = true;
    }    
  }

 

 

 

 

4) 저장하고 기능 확인

 

 

 

5) 스위치에도 동일하게 슬라이더 값 변경 코드 추가 :)

보다보니, 예전에 만든 사이즈 함수에 조건별 if 문의 사이즈 값이 반대로 들어가 있었다 ;;
함수 수정하면서 같이 수정 :) 슬라이더와 스위치 초기값도 변경해주었다.

    _switchImageSizeLabel = 'Size-Max';
    _switchImageSize = true;
    
    _sliderValueSize = 5;

-------------------------------------------------

// ---Func3. 이미지 사이즈와 switch 이름 변경(Min/Max)
  _playImageSize(){
    if(_switchImageSize){
      _imageWidth = 350;
      _imageHeight = 350;
      _switchImageSizeLabel = 'Size-Max';
      // *** 스위치가 ON이면, 슬라이더도 마지막 값으로 같이 변경
      _sliderValueSize = 5;
    }else{
      _imageWidth = 100;
      _imageHeight = 100;
      _switchImageSizeLabel = 'Size-Min';
      // *** 스위치가 OFF면, 슬라이더도 0 값으로 같이 변경
      _sliderValueSize = 0; 
    }
  }

 

 

 

 

6) 저장하고 기능 확인

 

 

 

 

 

 

 

Slider Function, 360, Rotation

 

 

 

1) Slider division : 360으로 변경

0~360까지 1 단위로 선택이 가능하도록 구간 개수를 변경해준다.

    Slider(
      activeColor: const Color.fromARGB(255, 134, 98, 243),
      value: _SliderValueRotation,
      max: 360,
      divisions: 360,
      label: _SliderValueRotation.round().toString(),
      onChanged: (value) {
        // --- Slider Event
        setState(() {
          _SliderValueRotation = value;
        });
      },
    ),

 

 

 

2) Image에 RotationTransition

RotationTransition(
  turns: AlwaysStoppedAnimation(_SliderValueRotation / 360),

  SizedBox(
    width: 350,
    height: 350,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RotationTransition(
          turns: AlwaysStoppedAnimation(_SliderValueRotation / 360),
          child: Image.asset(
            _imagePath,
            width: _imageWidth,
            height: _imageHeight,
          ),
        ),

      ],
    ),
  ),

 

 

 

 

3) 저장하고 기능 확인

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

 

 

 

 

 

https://api.flutter.dev/flutter/widgets/RotationTransition-class.html

RotationTransition class - widgets library - Dart API

 

https://api.flutter.dev/flutter/animation/AlwaysStoppedAnimation-class.html

AlwaysStoppedAnimation class - animation library - Dart API