[Flutter] Conditonal 하게 Rendering하는 방법

<분류>
A. 수단
- OS/Platform/Tool : Linux, Kubernetes(k8s), Docker, AWS
- Package Manager : node.js, yarn, brew, 
- Compiler/Transpillar : React, Nvcc, gcc/g++, Babel, Flutter
- Module Bundler  : React, Webpack, Parcel

B. 언어
- C/C++, python, Javacsript, Typescript, Go-Lang, CUDA, Dart, HTML/CSS

C. 라이브러리 및 프레임워크 및 SDK
- OpenCV, OpenCL, FastAPI, PyTorch, Tensorflow, Nsight

 

---

1. What? (현상)

new Center(
  height: condition == true ? 
  	Mediaquery.of(context).size.height*0.7 : 
    Mediaquery.of(context).size.height*0.4
)

조건에 따라 Rendering을 다르게 하고 싶을 때 하는 방법 중

삼항연산자 ternary operator가 잘 동작을 안한다?

 

 

 

---

2. Why? (원인)

• 저의 경우는 코드 상 제 실수였습니다... 본인의 방법이 확실하지 않다면 하기 다른 방법을 시도해봅니다.

---

3. How? (해결책)

• 방법1. Flutter 에서 Condotional 하게 Child Widget을 Rendering 하는 다른 방법을 사용한다.
  1. 3항 연산자(Tenary operator)
     condition ? Text("True") : null
  2. if문
     class StatmentExample extends StatelessWidget {
       Widget build(BuildContext context) {
         return Text( (() {
           if(true){
             return "tis true";}
     
           return "anything but true";
         })());
       }
     }
     혹은 ({}불가)
     children: [
       oneItem,
       if(isVisible) VisibleWidget()
     ]
     혹은
     Column(
         children: [
             if (_id == 0) ...[
               Container()
             ] else if(_id == 1)...[
               Text("Hello")
             ] else ...[
               SizedBox(height: 20)
             ],
         ],
      ),
     
  3. for문 Rendering
     children: [
       ...manyItems,
       oneItem,
       if(canIKickIt)
         ...kickTheCan
       for (item in items)
         Text(item)
  4. method를 사용하기
     child: getWidget()
     
     Widget getWidget() {
       if (x > 5) ...
       //more logic here and return a Widget
     혹은 (case2함수 하기 참조)
      child: case2(myInput,
       {
         1: Text("Its one"),
         2: Text("Its two"),
       }, Text("Default"));
  5. map문 Rendering (paragraph 함수 하기 참조)
     ...data.map((f) => paragraph(f.title, f.description)).toList(),

// Case 4
TValue case2<TOptionType, TValue>(
  TOptionType selectedOption,
  Map<TOptionType, TValue> branches, [
  TValue defaultValue = null,
]) {
  if (!branches.containsKey(selectedOption)) {
    return defaultValue;
  }

  return branches[selectedOption];
}

//==================================================

// Case 5
Column paragraph(String title, String description) {
  return new Column(
    children: <Widget>[
      Container(
        child: Text(title),
      ),
      Container(
        child: Text(description),
      ),
    ],
  );
}

List<AboutUsData> data = [
    new AboutUsData(
      title: 'Our Vision',
      description:
          'OUR VISION',
    ),
    new AboutUsData(
      title: 'Our Mission',
      description:
          'OUR MISSION',
    ),
    new AboutUsData(
      title: 'Our Values',
      description:
          'As we grow as a company',
    ),
  ];

• 방법2. Stateful을 사용해 내부 변수를 셋팅한다.
• 방법3. SizeChangedLayoutNotifier와 NotificationListener를활용한다.
  • https://stackoverflow.com/questions/49996166/how-to-listen-for-resize-events-in-a-flutter-animatedsize-widget

NotificationListener(
    onNotification: (SizeChangedLayoutNotification notification){
        Future.delayed(Duration(milliseconds: 300),(){setState(() {
                print('size changed');
                _height++;
      		});});
			return true;
    	},
    child: SizeChangedLayoutNotifier( child: AnimatedContainer(width: 100, height: _height))
)

---

https://roseline.oopy.io/07505f44-8a0f-45cf-986c-38900b06e35d

https://stackoverflow.com/questions/49713189/how-to-use-conditional-statement-within-child-attribute-of-a-flutter-widget-cen