24.10.29 flutter 위젯 배치

flutter에서 자주 사용되는 기본 위젯은 4개가 있는데, 글자 위젯, 이미지 위젯, 아이콘 위젯, 박스 위젯이 있다.

글자 위젯 (Text Widget)

flutter에서 텍스트를 화면에 표시하는 기본 위젯으로,  스타일, 폰트 크기, 색상 등을 설정할 수 있다. Text 위젯을 사용해 작성한다.

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Text("문미새 블로그")
    );
  }

 

 

아이콘 위젯 (Icon Widget)

flutter의 기본 아이콘 위젯으로, Material Design의 아이콘을 사용할 수 있으며, 아이콘 색상, 크기 등을 설정할 수 있다. Icon 위젯을 사용해 작성한다.

• Icons.으로 찾아서 작성하면 된다.
• 예) Icons.shop, Icons.star

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Icon(Icons.shop)
    );
  }

 

이미지 위젯 (Image Widget)

이미지를 표시하는 기본 위젯으로, 다양한 소스 (네트워크, 로컬 파일, 메모리, Asset)에서 이미지를 불러올 수 있다. Image 위젯을 사용해 작성한다.

• Image.asset으로 프로젝트의 assets 폴더에 있는 로컬 이미지 파일을 가져올 수 있다.
• 예) Image.asset("test.jpg)

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Image.asset("test.jpg")
    );
  }

 

박스 위젯 (Container Widget)

기본적인 레이아웃 위젯으로, 패딩, 여백, 크기, 배경색 등을 설정할 수 있으며 다른 위젯을 자식으로 포함할 수 있다. Container 위젯이나 SizedBox 위젯을 사용해 작성한다.

• div와 같은 기능으로 너비, 높이, 색상 같은 디자인을 작성하고 출력할 수 있다.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(width: 50, height: 50, color: Colors.cyan,)
    );

여기서 입력되는 width와 height값은 lp라는 단위를 쓰는데, 이건 Logical Pixel이라고 flutter에서 적용하는 단위이다. 이름만 다르고 기존 android의 dp 단위와 동일하기 때문에 그대로 사용하면 된다.

플러터에서 너비와 높이를 넣을 때 부모위치에 따라 어디서부터 시작할지 정해지는데, 그러면 부모도 위치를 지정해줘야 한다.

 

기존에 작성했던 Container를 자식으로 두기 위해선 부모로 감싸줘야 하는데 부모를 가운데로 둘려면 Center라는 위젯을 사용해야 한다.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: Container(width: 100, height: 100, color: Colors.cyan),
      )
    );
  }

최상위 구조를 Center 위젯으로 작성해주면 자식으로 있는 위젯은 중앙부터 너비와 높이를 계산해 배치된다.

Center외에도 직접 위치를 조정할 수 있는 Align이라든지, 여백을 주는 Padding, 수직 또는 수평으로 배치하는 Column과 Row 등이 존재한다.

 

그리고 위젯 구조를 지정하기 전에 반환값의 최상위에 있는 MaterialApp이라는 위젯이 있는데 해당 위젯을 사용하면 구글에서 제공하는 여러 UI위젯들을 가져올 수 있다.

이전에 flutter를 찾아보면서 작성했던 위젯 중에 Scaffold라는 위젯이 있었는데, 해당 위젯을 사용해 흔히 보이는 앱의 헤더, 바디, 푸터를 구분지어 구현할 수 있다.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Container(),
        bottomNavigationBar: BottomAppBar(),
      )
    );
  }

Scaffold 위젯을 사용하고 그 안에 세 가지로 나눠주는데, appBar는 상단의 타이틀이나 로고가 들어가는 부분이고 body는 화면의 주요 컨텐츠들, bottomNavigationBar는 하단에 페이지 이동 버튼이 있는 푸터 역할을 해준다.

 

간단하게 안에 데이터를 넣었을 때 각각 범위가 나눠져있는걸 볼 수 있다.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("고래사진"),
        ),
        body: Container(
          child: Image.asset("test.jpg"),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Text("고래입니다"),
        ),
      )
    );
  }

 

하지만 보통 통상 앱들의 경우 네비게이션 바에 한 개만 있는 경우는 없기 때문에 여러 개를 집어넣어야 한다.

이 때 부모 위젯을 Container가 아닌 Column이나 Row를 사용하게 된다.

그리고 자식을 여러 개 만들려고 하면 child가 아닌 children으로 배열로 받게 된다.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("고래사진"),
        ),
        body: Container(
          child: Image.asset("test.jpg"),
        ),
        bottomNavigationBar: Row (
          children: [
            Icon(
              Icons.star,
              color: Colors.yellow,
            ),
            Icon(
              Icons.audiotrack,
              color: Colors.green,
            ),
            Icon(
              Icons.favorite,
              color: Colors.pink,
            ),
          ],
        ),
      )
    );
  }

이런식으로 가로로 배치하는 Row를 사용해 아이콘을 3개 집어넣어봤다.

순서대로 잘 출력되는 걸 볼 수 있다.

 

        body: Column (
          children: [
            Image.asset("test.jpg", width: 400, height: 200),
            Image.asset("ark.jpg", width: 400, height: 200),
            Image.asset("elgasia.jpg", width: 400, height: 200),
          ],
        ),

Column도 Row와 같이 제대로 구현이 되는걸 볼 수 있다.

하지만 가운데 정렬이 되지 않아 불편한데 이때 mainAxisAlignment 설정을 해주면 된다.

 

        bottomNavigationBar: Row (
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Icon(
              Icons.star,
              color: Colors.yellow,
            ),
            Icon(
              Icons.audiotrack,
              color: Colors.green,
            ),
            Icon(
              Icons.favorite,
              color: Colors.pink,
            ),
          ],
        ),

Row위젯에 사용할 수 있으며 위젯 안에 MainAxisAlignment."설정"을 작성해주면 된다.

설정 종류는 css에서 보던 위치 정렬과 justify-content에서 썼던 배치 방식을 사용할 수 있다.

본인은 자주 쓰는 space-evenly를 사용해서 정렬했다.

제대로 정렬 배치가 되는 것을 볼 수 있다.

가로 정렬은 MainAxisAlignment를 사용하면 되고, 세로 정렬의 경우 crossAxisAlignment를 사용해주면 된다.

 

이미지의 경우 Axis 정렬이 안먹혀서 찾아봤었는데, 아예 Align이라는 위젯으로 이미지를 감싸고 alignment 설정을 사용해 center로 적용해주면 된다.

        body: Column (
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Align(
              alignment: Alignment.center,
              child: Image.asset("test.jpg", width: 400, height: 200),
            ),
            Align(
              alignment: Alignment.center,
              child: Image.asset("ark.jpg", width: 400, height: 200),
            ),
            Align(
              alignment: Alignment.center,
              child: Image.asset("elgasia.jpg", width: 400, height: 200),
            )
          ],
        ),

이미지도 제대로 중앙 정렬되는 것을 볼 수 있다.

 

css 처음 배울 때 기능이 너무 많아서 머리 터질라 했는데, 플러터는 더 하는 것 같다. 이걸 과연 외워서 써먹을 수 있게 하려면 얼마나 반복해야 되나..