html을 flutter 로 변환 할 수 있을까? 2

html 코드를 flutter 의 dart로 변환하는 라이브러리를 만들고 있다. 

일단 기존에 어떤 똑똑한 사람이 만들어 놓은 html 변환 라이브러리를 보기 편하게 고쳤다. 

제일 문제가 되었던 것은 html 의 display : flex 였다. 

 

우선 html 은 display : flex 는 안의 child 의 개수와 할당 된 사이즈에 따라서 알.아.서 조절 된다. 

 

근데 dart에서 flex 는 이렇게 Flexible 이나 expanded 에 flex 라는 값을 할당해 그 크기를 주게 된다. 

 Flexible(
   flex: 30,
.
.
.

 

여기서부터 이제 오류가 발생한다. 

html 에는 child 한개의 크기만 정해져도 동일한 선상에 있는 child가 나머지 부분을 전부 차지 한다는 것인데, 그걸 dart로 어떻게 구분해 줘야하는건지...? 수많은 html의 경우의 수를 따져서 구현 해주는 것이 가장 큰 관건이었다.  

 

일단 대충 생각해 낸 해결 책으로는 만약에 flex 할 child가 2개인데, 그 중 하나가 100% 이고 하나가 10% 라고 치면 그 비율을 계산해서 flex에 넣어주는 것으로 마무리 지었다. 

 double maxWidth = constraints.maxWidth;
          childrenWidget = children ??
              context.tree.children.asMap().entries.map((tree) {
                // 자식 중 width 단위가 퍼센트일 경우
                if (tree.value.style.width?.unit == Unit.percent) {
                  double widthPercent = tree.value.style.width!.value;
                  double calculatedWidth = maxWidth * widthPercent;
                  return Flexible(
                      flex: calculatedWidth.toInt(),
                      child: Container(
                        width: calculatedWidth,