flutter study - 05 flexible

container 크기를 비율로 주고 싶으면 flexible를 적용하면 된다.

• 아래 처럼 적용하면 3:7의 비율이 된다.

Row(  
    children: [  
      Flexible(flex: 3, child: Container(color: Colors.blue)),  
      Flexible(flex: 7, child: Container(color: Colors.red)),  
    ],  
  )
  

• 아래처럼 적용하면 5:5:5의 비율이 되고 삼등분한 것처럼 된다.

Row(  
    children: [  
      Flexible(flex: 5, child: Container(color: Colors.blue)),  
      Flexible(flex: 5, child: Container(color: Colors.purple)),  
      Flexible(flex: 5, child: Container(color: Colors.red)),  
    ],  
  )
  

• 아래처럼 fiex 1 만 있으면 화면에서 남는 부분을 꽉채운다.
• 두번째 container가 100만큼 차지하고 남는 부분을 blue container가 꽉 채운다

body: Row(  
    children: [  
      Flexible(flex: 1, child: Container(color: Colors.blue)),  
      Container(color: Colors.purple, width: 100,),  
    ],  
  )
  

• flex 1인 flexible 대신 Expanded를 쓰면 효과는 같다

Row(  
    children: [  
      Expanded(child: Container(color: Colors.blue)),  
      Container(color: Colors.purple, width: 100,),  
    ],  
  )