Expanded : 여백 차지/MediaQuery : 크기 확인

1. Expanded : 남은 여백을 모두 차지

 body: Column(
   // Column은 배열로 감싸져 있음
   children: [
     Container(
       height: 500,
       color: Colors.blue,
     ),
     Expanded(
       child: Container(
         color: Colors.red,
       ),
     ),
   ],
 ),

• 설정된 height 값을 무시

 body: Column(
   // Column은 배열로 감싸져 있음
   children: [
     Expanded(
       child: Container(
         height: 500,
         color: Colors.blue,
       ),
     ),
     Expanded(
       child: Container(
         color: Colors.red,
       ),
     ),
   ],
 ),

2. flex : 비율 지정

• 높이를 굉장히 유연하게 맞출 수 있음

body: Column(
  // Column은 배열로 감싸져 있음
  children: [
    Expanded(
      flex: 9,
      child: Container(
        color: Colors.blue,
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
      ),
    ),
  ],
),

3. MediaQuery : 디바이스의 크기 확인

• var m = MediaQuery.of(context); 이용해서 확인

• 최초의 처음 실행되는 위젯(여기서는 FirstApp)에서는 실행이 안됨

• HomeApp()이라는 위젯을 새로 만들고 그 안에서 MediaQuery 사용

class FirstApp extends StatelessWidget {
  const FirstApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          // Column은 가로는 가지고 있지만 세로는 가지고 있지 않음
          body: HomeApp(),
        ),
      ),
    );
  }
}

class HomeApp extends StatelessWidget {
  const HomeApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var m = MediaQuery.of(context);
    print("넓이 : ${m.size.width}");
    print("높이 : ${m.size.height}");
    return Column(
      // Column은 배열로 감싸져 있음
      children: [
        Expanded(
          flex: 9,
          child: Container(
            color: Colors.blue,
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.red,
          ),
        ),
      ],
    );
  }
}

• SafeArea의 영역때문에 디바이스의 높이가 줄어듦

• SafeArea의 padding 값을 확인하기

class HomeApp extends StatelessWidget {
  const HomeApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var m = MediaQuery.of(context);
    print("넓이 : ${m.size.width}");
    print("높이 : ${m.size.height}");
    // SafeArea를 확인하기 위해서는 FirstApp의 SafeArea를 지우고 확인해야 함
    print("SafeArea : ${m.padding.top}");
    return Column(
      // Column은 배열로 감싸져 있음
      children: [
        Container(
          height: (m.size.height - 24) * 0.7,
          color: Colors.blue,
        ),
        Container(
          height: (m.size.height - 24) * 0.3,
          color: Colors.red,
        ),
      ],
    );
  }
}

• 24의 값은 현재 디바이스에서의 SafeArea가 차지하는 높이