[flutter] 박스 폭 설정 Flexible(), Expanded()

박스 폭(비율) 설정

return MaterialApp(
    home: Scaffold(
      appBar: AppBar(),
      body: Row(
        children: [
          Flexible(child: Container(), flex: 3,), 
          Flexible(child: Container(), flex: 7,),

• Flexible() 로 Container()을 묶어주면 됨
  두 컨테이너가 3:7로 나누어짐

눈으로 확인하기 위해 박스에 색을 넣어보자

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

삼등분하고 싶으면 박스 하나 더 만들기

children: [
    Flexible(child: Container(color: Colors.blue,), flex: 1,),
    Flexible(child: Container(color: Colors.grey,), flex: 1,),
    Flexible(child: Container(color: Colors.red,), flex: 1,),

세로로 쪼개고 싶으면 Coloumn()으로 묶어주면 됨

body: Column(
  children: [
    Flexible(child: Container(color: Colors.blue,), flex: 1,),
    Flexible(child: Container(color: Colors.grey,), flex: 1,),
    Flexible(child: Container(color: Colors.red,), flex: 1,),

Flexible()과 비슷한 Expanded()

body: Column(
  children: [
    Expanded(child: Container(color: Colors.blue,)),
    Expanded(child: Container(color: Colors.grey,)),
    Expanded(child: Container(color: Colors.red,)),

위와 동일한 결과 나옴

• Expanded()는 flex: 1 인 Flexible() 역할

남은 공간 차지함 , 남은 공간 커지면 같이 커짐

박스폭을 %로 주고 싶으면 Flexible(),
남은 공간 꽉 채우려면 Expanded()