플러터 기초 - UI 구성

플러터의 UI를 어떻게 구성하고 제일 중요한 핵심인 

플러터의 UI 구성

• 어디서 UI를 정의하는지
• UI의 구성
• 정의한 UI 구조를 한 눈에 살펴보기

---

플러터 UI의 시작

플러터의 UI는 runApp() 함수에서 시작한다.

 

플러터의 모든 UI는 위젯으로 되어있기 때문에 위젯을 반환하는 클래스를 runApp()에서 실행한다.

 

void main() {
  // UI를 만들도록 하는 부분
  runApp(MyApp());
}

// StatelessWidget:
class MyApp extends StatelessWidget {
  // build 메서드는 UI를 만들어준다
  @override
  Widget build(BuildContext context) {

  }
}

---

플러터의 기본적인 UI 구성하기

플러터의 UI는 각각의 위젯으로 구성되어 있고 그 위젯 안에 또 수많은 옵션이 있다.

 

심지어 위젯 안에 위젯을 또 넣기도 한다.

 

또한 하나의 위젯은 하나의 클래스를 의미한다.

 

다음과 같이 어떤 OS를 사용할지 정하고 위젯을 하나씩 정의한다.

 

• MaterialApp: 안드로이드용 UI
• CupertinoApp: ios용 UI

void main() {
  // UI를 만들도록 하는 부분
  runApp(MyApp());
}

// StatelessWidget:
class MyApp extends StatelessWidget {
  // build 메서드는 UI를 만들어준다
  @override
  Widget build(BuildContext context) {
    // 내가 만든 앱이 Android 형태를 할지 ios 형태를 할지 정한다
    // MaterialApp: Android (추천)
    // CupertinoApp: ios
    return MaterialApp(
      // home: 앱을 열었을 때 보여줄 화면
      // Scaffold: UI 구조를 결정을 여기에
      home: Scaffold(
        // 각각의 위젯을 정의
        appBar: AppBar(
          title: Text("Hello Flutter"),
        ),
        body: Center(
          child: Text("Hello World"),
        ),
      ),
    );
  }
}

 

Scaffold

scaffol는 UI 구성의 첫 번째 스텝이라고 할 수 있다.

 

모든 위젯은 scaffold 안에 구성되어야 한다.

---

Row와 Column 위젯

참고로 아래의 내용은 다음 사이트를 참고해서 만들었다.

 

https://nomadcoders.co/flutter-for-beginners/lectures/4139

 

다음과 같은 UI에서 제일 위에 있는 앱바 부분만 가능한한 똑같이 따라해본다.

 

 

기본적으로 UI 위젯은 다음과 같이 하나씩 배치하는 형태이다.

 

 

 

void main() {
  var lee = Player(name: "lee");

  // UI를 만들도록 하는 부분
  runApp(MyApp());
}

// StatelessWidget:
class MyApp extends StatelessWidget {
  // build 메서드는 UI를 만들어준다
  @override
  Widget build(BuildContext context) {
    // 내가 만든 앱이 Android 형태를 할지 ios 형태를 할지 정한다
    // MaterialApp: Android (추천)
    // CuertinoApp: ios
    return MaterialApp(
      // home: 앱을 열었을 때 보여줄 화면
      // Scaffold: UI 구조를 결정을 여기에
      home: Scaffold(
          backgroundColor: Color(0xFF181818),
          body: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 40,
            ),
            child: Column(
              children: [
                // 그냥 Size를 가진 박스
                SizedBox(
                  height: 80,
                ),
                // Row은 가로로, Column은 위젯을 세로로 배치한다.
                Row(
                  // Row에서 mainAxisAlignment은 가로 방향 정렬
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    // Column에서 crossAxisAlignment은 가로방향 정렬이다.
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Text(
                          "Hey Selena",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 28,
                            fontWeight: FontWeight.w800,
                          ),
                        ),
                        Text(
                          "Wellcome back",
                          style: TextStyle(
                            color: Colors.white.withOpacity(0.8),
                          ),
                        ),
                      ],
                    )
                  ],
                )
              ],
            ),
          )),
    );
  }
}

 

위 결과를 출력하면 다음과 같다.

 

 

위 코드에서 사용한 위젯 및 요소의 특징은 다음과 같습니다.

Row

1. Row는 안에 있는 위젯들을 가로로 배치한다.
2. 왼쪽에서부터 배치된다.
3. 위젯은 크기는 기본적으로 wrap_contents이 된다.
4. 단, 내부에 길이가 무한한(infinity) 위젯을 넣었다면 Flexible, Expanded 같은 위젯을 같이 사용해야한다.

 

Column

1. Column은 안에 있는 위젯들을 세로로 배치한다.
2. 위에서부터 배치된다.
3. 위젯은 크기는 기본적으로 wrap_contents이 된다.
4. 단, 내부에 길이가 무한한(infinity) 위젯을 넣었다면 Flexible, Expanded 같은 위젯을 같이 사용해야한다.

 

mainAxisAlignment

1. 부모 Row, Column에 대해 정방향 정렬을 실현해준다.
2. Row의 경우 가로 방향에 대한 정렬을 컨트롤 가능
3. Column의 경우 세로 방향에 대한 정렬을 컨트롤 가능

 

crossAxisAlignment

1. 부모 Row, Column에 대해 역방향 정렬을 실현해준다.
2. Row의 경우 세로 방향에 대한 정렬을 컨트롤 가능
3. Column의 경우 가로 방향에 대한 정렬을 컨트롤 가능

---

UI 구성  파악하기

플러터 코드를 실행하면 다음과 같은 패널이 생성된는 것을 확인할 수 있는데

 

여기서 제일 오른쪽에 있는 아이콘을 클릭한다.

 

그럼 다음과 같이 위젯이 어떠한 구성으로 되어있는지 볼 수 있다.

 

위젯을 클릭하면 해당 코드로 이동한다.

 

또한 왼쪽 위에 있는 "Select Widget Mode"를 클릭하면 직접 에뮬레이터 상의 UI를 클릭하여 

 

해당 위젯의 코드를 확인할 수 있다.

 

---

Column과 Row가 부모 레이아웃을 가득 채우게 하기

위에서 Column과 Row의 기본적인 크기는 wrap_contents라고 했습니다.

 

그렇다면 어떻게 해야 match_parents로 할 수 있을까요?

 

각 위젯의 children에 Expanded 위젯을 넣어주면됩니다.

 

Column(
    children: [
      Expanded(
        child: Center(
          child: Text(
            "Appbar Widget test",
            style: TextStyle(fontSize: 20),
          ),
        ),
      )
    ],
  )

---

 

VS 코드에서 플러터 사용 설정 - 파란색 줄 없애기 등...