Flutter - 컴포넌트(2)

작업을 하면 할 수록 리액트에서 고민했던 부분들과 오버랩이 많이 된다.

 

또 느끼는거지만 다르지 않다.

 

앞서 로또번호 하나를 만들기 위해서  WinNumber 객체에 일일이 인자값으로 넣어서 번호 스타일을 만들었다.

 

  Row(
                                    children: [
    WinNumber(context.watch<LottoProvider>().lottoNumber),
    // WinNumber(context.watch<LottoProvider>().lottoNumber[1]),
    // WinNumber(context.watch<LottoProvider>().lottoNumber[2]),
    // WinNumber(context.watch<LottoProvider>().lottoNumber[3]),
    // WinNumber(context.watch<LottoProvider>().lottoNumber[4]),
    // WinNumber(context.watch<LottoProvider>().lottoNumber[5])
   ],
  ),

 

해당 부분을 배열 전체로 받아서 처리하도록 변경

 

1. 숫자의 layOut을 하나의 컨테이너로 만들고 배열로 add 한다.

2. 전체 프레임에 숫자 배열을 child에 밀어 넣는다.

 

class WinNumber extends StatelessWidget{
...

// 추천 번호들 나래비!
  SizedBox _getLottoNumber() {
    List<Container> numbers = [];
    for(var i = 0; i < lottoNumber.length; i ++){
      var number = lottoNumber[i];
      var numberTxt = number.toString();
      if(number < 9) {
        numberTxt = "0$numberTxt";      // 일의 자리는 0을 붙여 준다.
      }
      numbers.add(layOutNumber(number, numberTxt));
    }

    return SizedBox(
        child: Row(children: numbers)
    );
  }

  // 번호 하나의 템플릿
  Container layOutNumber(int number, String numberTxt){
    return Container(
        margin: const EdgeInsets.all(10.0),
        padding: const EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          color: _getNumberColor(number),
          borderRadius: BorderRadius.circular(360),
          border: Border.all(color: Colors.black12, width: 1),
        ),
        child: Text(numberTxt, style: TextStyle(fontWeight:FontWeight.w700), textAlign:TextAlign.center)
    );
  }

  @override
  Widget build(BuildContext context) {
    return _getLottoNumber();
  }

}

 

결국 리액트에서 화면 단위의 템플릿을 만들어 넣고 불러다 쓰는 것과 다르지 않다.

 

menuBox 만들어 넣고 스슥사삭

 

 

## 작업시 제일 어려운 부분은 변수 및 파일명에 대한 네이밍이다....아찔하다.

영어공부... 아닌 국어공부좀... 아니 독서좀 많이 할 걸......ㅠㅠ