[Flutter 기초] 2. Scaffold, 가로세로 위젯 배열 및 정렬 + 빨간글씨&노란줄 문제 해결

https://youtube.com/playlist?list=PLfLgtT94nNq1izG4R2WDN517iPX4WXH3C

쉽게알려주는 플러터 강의임

해당 강의를 기반으로 필자가 나중에 보려는 목적으로 정리한 글입니다. 따라서 불친절할 수 있습니다.

 

1. Scaffold

보통 앱을 볼 때 맨 윗쪽, 가운데, 하단 세 부분으로 나뉘어 있다. 이렇게 앱을 구현할 수 있도록 해주는 것이 Scaffold() 위젯이다.

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: ,
        body: ,
        bottomNavigationBar: ,
      )
      );
  }
}

appBar, body, bottomNavigationBar이 각각 상,중,하에 해당한다. 각각에 원하는걸 넣으면 된다.

 

2. Row & Column

한 파라미터에는 한개의 위젯만 넣을 수 있다. (여간 답답한 부분이 아니다.) 그렇기에 가로 또는 세로로 여러 개의 위젯을 배치하고 싶을 때는 Row 혹은 Column 위젯을 이용해야 한다. Row(), Column() 안에 children[]을 추가해주고, 그 안에 원하는 위젯을 넣으면 된다. Row는 가로줄, Column은 세로줄이다. 아래는 Column에 여러개의 Text를 넣어준 예시이다.

      home: Column(
        children: [
          Text('hello'),
          Text('Nice to meet you'),
          Text('How was your day?')
        ],

실행하면 다음처럼 된다.

잠깐 다른얘긴데, 빨간 글씨와 노란 줄이 생긴다. 이는 Text 위젯은 부모 위젯의 style을 따라가는데 적용된게 없기 때문에 나타난다. DefaultTextStyle 위젯을 사용하거나, Scaffold로 감싸주면 된다. 여기서는 Scaffold로 감싸주었다.

return MaterialApp(
  home: Scaffold(
    body: Column(
      children: [
        Text('hello'),
        Text('Nice to meet you'),
        Text('How was your day?')
      ],
    )
  )
  );

제대로 출력된다. 아무튼 가로 혹은 세로로 여러개의 위젯을 배치하고 싶다면, Row 또는 Column 위젯을 사용하면 되고, 안에 children을 이용하여 위젯들을 넣어주면 된다.

 

3. 정렬

정렬을 위해서는 mainAxisAlignment 와 crossAxisalignment를 사용하면 되는데, mainAxis와 crossAxis의 기준은 Row이냐 Column이냐에 따라 달라진다. Row같은 경우는 위젯을 가로로 배치하는 것이므로 mainAxis는 가로, crossAxis는 세로이다. Column은 위젯을 세로로 배치하는 것이므로 반대로 mainAxis는 세로, crossAxis는 가로이다.

따라서 Row나 Column 안에

mainAxisAlignment: MainAxisAlignment.center

와 같이 써주면 되는 것이다. center 대신 start(앞쪽), end(뒤쪽), spaceEvenly(간격 일정) 등을 사용하면 원하는대로 위젯들을 정렬할 수 있다. 

 

예를 들어 방금 짠 코드를 가로로는 왼쪽 정렬, 세로로는 일정한 간격으로 정렬하고 싶다고 하자. 그렇다면 코드를 아래처럼 짜주면 된다.

      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('hello'),
            Text('Nice to meet you'),
            Text('How was your day?')
          ],
        )
      )

 

mainAxis는 spaceEvenly, crossAxis는 start로 해주면 위와 같이 원하는 결과가 나온다.

 

 

팁으로, 뭘 써야할지 모르겠다면 (윈도우 기준) ctrl+space 를 하면 시도해볼만한 것들이 뜬다. 또한 파라미터(mainAxisAlignment와 같은 것) 오른쪽에 무엇을 넣어야 할지 모르겠다면, 방금 쓴것을 다시 대문자로 쓰면 통할 가능성이 높다(MainAxisAlignment와 같이). 아니면 해당 파라미터에 마우스를 올리면 알려준다. 구글링을 하지 않고도 기억을 되살릴 수 있는 매우 유용한 방법이다.

또한 코딩을 하다보면 자주 Text 위젯을 열심히 만들어놨는데 그걸 Container 위젯으로 감싸야 한다거나.. 하는 일이 생긴다. 그런 경우 해당 위젯에 마우스를 올려보면 왼쪽에 전구 표시가 뜨는데, 그걸 클릭하면 Wrap with Container..와 같은 것들이 뜬다. 그걸 누르면 자동으로 기존 위젯을 Wrap 해주므로 매번 힘들게 코드를 수정할 필요가 없다.