Flutter Flexible 적용

코드

return Scaffold(
      appBar: AppBar(
        title: new Text('Flutter is Gooood'),
        backgroundColor: Color.fromARGB(255, 255, 255, 255),
        leading: Icon(Icons.bar_chart_sharp, color: Colors.black),
      ),
      body: Column(
        children: [
          /* 빨간 area */
          Flexible(
            flex: 1,
            child: Container(
              color: Colors.red,
            ),
          ),
          /* 노랑 + 초록 + 연두 area */
          Flexible(
            flex: 4,
            child: Column(children: [
              /* 노랑 area */
              Flexible(
                flex: 5,
                child: Container(
                  color: Colors.yellow,
                ),
              ),
              /* 초록 + 연두 area */
              Flexible(
                flex: 2,
                child: Row(children: [
                  /* 초록 area */
                  Flexible(
                    flex: 2,
                    child: Container(
                      color: Colors.green,
                    ),
                  ),
                  /* 연두 area */
                  Flexible(
                    flex: 1,
                    child: Container(
                      color: Colors.lightGreen,
                    ),
                  ),
                ],)
              ),
            ]),
          ),
          /* 파란 area */
          Flexible(
            flex: 1,
            child: Container(
            color: Colors.blue,
            ),
          ),
        ],
      ),
    );

 

결과

body 부분