Flutter - 3. Widget? Container, Text, Image, Button

앱의 UI를 구현할 때 가장 기본적인 것은 무엇일까?
개인적인 의견이지만, 텍스트, 이미지, 버튼이라고 생각한다.
앱은 사용자의 상태에 따라 적절한 문구와 이미지를 보여주고 버튼을 통해 액션을 유도하기 때문이다.

Flutter에서 기본적인 UI를 구현하기 위한 Text, Image, Button에 대하여 알아보고, 이들을 담을 수 있는 Container에 대하여도 알아보자.

---

1. Container

class BasicPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(

    )
  }
}

StatelessWidget을 상속받는 BasicPage를 만들고 Container를 생성해본다. 꼭 BasicPage가 아니어도 된다.
Windows/Android Studio 기준으로 Container에 컨트롤을 누르고 커서를 갖다대면 아래와 같은 생성자의 파라미터를 확인할 수 있다.

다양한 파라미터들이 있다. 다른 위젯을 사용해볼 때에도 이것을 참고하면 활용하는데 도움이 된다.

class BasicPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      padding: EdgeInsets.all(16.0),
    );
  }
}

위 코드는 빨간 배경색이고, 상하좌우 전체에 16픽셀의 패딩을 갖는 Container를 만든다.

---

2. Text

화면에 텍스트를 출력해주는 위젯인 Text는 생성자에 위와 같은 파라미터들을 갖는다.
간단한 Text를 생성해 보자.

class BasicPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      padding: EdgeInsets.all(16.0),
      child: Text(
        "Text Widget",
        style: TextStyle(
          fontSize: 16.0,
          fontWeight: FontWeight.bold,
          color: Colors.blue
        ),
      ),
    );
  }
}

Container의 child 파라미터에 Text를 생성하여 넘겨준다.

"Text Widget"이란 글자를 나타내며 style 파라미터에 TextStyle을 넘겨주고 있다.

TextStyle도 많은 파라미터가 있는데, 여기선 fontSize와 fontWeight, color만을 다루었다.
위 코드에선 16픽셀의 글자크기, 볼드체, 글자색은 파란색이다.

---

3. Image

Flutter에서 Image를 사용하기 위해 몇 가지 선행작업이 필요하다.
프로젝트에 이미지를 추가해야 한다.

이 예제에서는 구글에 "Flutter logo"로 검색하면 볼 수 있는 "upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png" 이미지를 사용할 것이다.

다른 이미지여도 무관하다. 프로젝트의 최상위 루트에 "images" 폴더를 생성하여 이미지를 넣고, pubspec.yaml로 이동한다. 

...
dependencies:
  ...

dev_dependencies:
  ...

flutter:
  ...
  assets:
    - images/flutter_logo.png

파일의 최 하단에 위치한 "flutter" 하위에 assets 이후의 코드를 작성해서 넣는다.
그리고 폴더의 명(images)와 추가하고자 하는 이미지(flutter_logo.png)를 작성해준다.
폴더의 명이나 이미지 명이 다르다면, 본인의 상태에 맞는 경로로 넣어주면 된다.

이미지는 파라미터가 굉장히 많다. 여기선 가볍게 image 파라미터만을 넘겨주어 이미지만 나타나도록 할 것이다.

class BasicPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      padding: EdgeInsets.all(16.0),
      child: Image(
        image: AssetImage("images/flutter_logo.png"),
      )
    );
  }
}

Container에 Image를 생성하여 넘겨준다.
image에는 프로젝트의 Assets에 추가된 이미지를 사용하므로 AssetImage를 사용하고 경로를 적어준다.
만약 url을 통해 네트워크 상의 이미지라면, NetworkImage를 사용하면 된다.

---

4. Button

Flutter에서 제공하는 Button은 다양하다.

RaisedButton, FlatButton, IconButton, FloatingActionButton을 제공하며 그 외에도 버튼처럼 만들 수 있는 방법이 존재한다.
여기선 RaisedButton 만을 가볍게 다뤄본다.

버튼도 파라미터가 다양하다.
버튼을 짧게 혹은 길게 눌렀을때의 동작도 파라미터로 전달받고 버튼 텍스트의 색깔, 버튼의 색깔 등등 다양하게 제공한다.

class BasicPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      padding: EdgeInsets.all(16.0),
      child: RaisedButton(
        child: Text(
          "RaisedButton!"
        ),
        onPressed: () => _onPressed(),
        onLongPress: () => _onLongPressed(),
        color: Colors.green,
        textColor: Colors.white,
      )
    );
  }
  
  void _onPressed() {
    // Do Something
  }
  
  void _onLongPressed() {
    // Do Something
  }
}

Container에 RaisedButton을 생성하여 넘겨준다.
RaisedButton에 텍스트를 표시하고자 한다면, child에 Text를 생성하여 넘겨주면 된다.
child를 Widget으로 받고 있으므로 원한다면 다른 Widget도 가능하다고 볼 수 있겠다.

onPressed, onLongPress 파라미터에 => 를 사용하여 각각의 함수를 호출하게 할 수도 있다.
버튼이 눌려졌을 때 함수를 호출하게 하여 어떤 행동을 수행하면 될 것이다.

---

앱의 기본적인 화면을 구성하기 위한 Text, Image, Button을 알아보고 이를 감싸주는 Container에 대해 알아보았다.

하지만 Container는 child로 Widget을 받지만, 위 예제에선 하나의 Widget밖에 표현해주지 못한다.
앱에 이런 요소들을 더 많이 다양하게 배치하기 위해선 어떻게 해야할까?

이를 해결하기 위해 다음장에서 Row, Column 위젯에 대해 알아 볼 것이다.