[이론] Row and Column (1) 세팅하기

들어가기 앞서...

 

우리가 만든 스크린 관련된 위젯들을 main.dart 파일에 작성을 하면 코드가 너무 길어지니깐 새로운 폴더를 만들어서 스크린 관련된 위젯들을 따로 관리하겠다!

---

본문으로...

1. 스크린 위젯을 관리하기 위한 폴더를 하나 만들어 준다!

lib -> New -> Directory 생성 screen

새로 생긴 screen 폴더에 같은 방법으로 이번에는 FIle 버튼 을러 home_screen.dart 파일을 만들자!

새로 만든 home_screen.dart 에 main.dart 에 적어놓은 class HomeScreen 의 내용을 복붙해준다.

복붙을 해주면! 처음에는 StatelessWidget 을 불러 오지 못해서 빨간줄이 뜰텐데, 위에 밑에 문구를 import 해주면 문제 없다!

import 'package:flutter/material.dart';

 

그리고 main.dart 를 가보면 매운 간결해진 코드를 볼수 있다!

HomeScreen() 에러는 해결 방법은 밑에 같이 import 를 추가해주면 된다!

package: 뒤에 부분은 패캐지 이름/폴더/위젯파일 해주면 완료!  

import 'package:hello_world_first/screen/home_screen.dart';

 

 

Container 말그대로 컨테이너 박스 로 생각하고 위젯들을 넣는 역할을 한다.

일반적으로 child 위젯의 형태를 따라간다

import 'package:flutter/material.dart';


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Container(
        color: Colors.black,
        child: Column(
          children: [
            Container(
              color: Colors.red,
              width: 50.0,
              height: 50.0,
            ),
            Container(
              color: Colors.orange,
              width: 50.0,
              height: 50.0,
            ),
            Container(
              color: Colors.yellow,
              width: 50.0,
              height: 50.0,
            ),
            Container(
              color: Colors.green,
              width: 50.0,
              height: 50.0,
            )
          ],
        ),
      )

    );
  }
}

둘다 노치 부분에 올라간것을 볼수 있다! 

안드로이드 애뮬레이터, 아이오에스 시뮬레이터 둘다 Container 가 노치 부분으로 영역이 넘어간것을 볼 수 있다.

---

SafeArea 위젯을 사용해보자!

Container 가 노치부분 침범하는것을 방지하도록 하는 위젯이다.

---

이 부분을 방지하기 위해서 SafeArea 라는 위젯을 사용할것이다.

 

왼) IOS, 오) ANDROID

body 의 제일 상단 위젯인 Container 위에 SafeArea 위젯을 감싸줄것이다.

 

꿀팁💡 커맨드를 사용해 빠르게 widget 감싸는 방법 💡
Container 위에서 option + enter 를 누르고 wrap widget 이라는 것을 클릭하면 자동으로 widget 이라고 감싸지는데 그 이름을 수정하면 된다.

단축키를 써서 빠르게 SafeArea 를 감싼 코드

어쨌든 코드를 적용한 부분을 다시 실행 해보겠다!

 

코드 적용된 모습!

Container 가 SafeArea 위젯으로 감싸줌으로 인해 노치 부분의 영역을 넘어가는 것을 방지했다!

 

하지만, IOS Simualter 만! bottom 부분에도 같이 적용되어있는 것을 볼 수 있는데, 매우 이상하다 bottom 은 넘어가도 되도록 설정을 해주자!

 

이때 필요한게 SafeArea 가 어떻게 설정되어있는지 보면된다.

SafeArea 의 내장 메소드를 확인 할 수 있는 방법은 오른쪽 마우스 Go to -> Declaration or Usages 를 눌러서 페이지를 확인하면 된다!

 

꿀팁💡 해당 메소드 자세한 설명 보러가는 방법 💡
- 오른쪽 마우스 Go to -> Declaration or Usages 눌러서 해당 페이지의 메소드 확인
- 제일 간단한 방법은 command + b 눌르기

 

SafeArea 내장 메소드 부분

정확하게는 잘은 몰라도 왼쪽, 위, 오른쪽, 아래라고 적혀있는 부분이 default 로 true 가 되어있는 모습을 볼 수있다 .

그렇다면 우리는 SafeArea 위젯에 bottom Parameter 를 추가 해주면 되는것이다!

IOS bottom : false 가 적용된모습

---

끝으로...

우리는 Row and Column 에 대한 개념을 알았고 Column 을 코드로도 적용을 했으며 SafeArea 로 노치 부분 영역 넘어가는 것을 방지 하고 내장 메소드 SafeArea 의 기본 내장 메소드도 수정해주었다.