[flutter] 05 화면 구성의 시작 2, 기초 위젯

-해볼 것-

• font 적용
• ContainerWidget 활용
• Icon출력
• Card, ListTile Widget

 

 

1. FONT 적용하기

앞선 실습 기준으로, MyContainer에서 이미지가 출력되던 MyApp 위젯으로 다시 돌아가자.

runApp에서 바꿔주면 된다.

 

세로로 이미지나 텍스트를 배치할 것이므로 Column 위젯을 사용할 예정.

먼저 body에 기존에 붙어있던 Center 이하를 잘라내기 한 뒤,

Column을 넣고 컬럼의 Children 아래로 붙여넣어준다.

 

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text('Strong Guy'),
        backgroundColor: Colors.grey,
      ),
      body: Column(
        children: [
          Center(
            child: Image(
            image: AssetImage('assets/images/strong_guy.jpg'),
            ),
          ),
          Text('Strong Guy',style: TextStyle(color:Colors.orange),),
        ],
      ),
    ),
  );
}

그리고 center가 끝난 다음 줄에 text를 하나 넣어주자. 이 때 위처럼 스타일 속성을 줘서 색을 줘보자.

 

Text(
  'Strong Guy',
  style: TextStyle(color:Colors.orange, fontSize: 40),),

폰트 사이즈가 작으니, 폰트 사이즈도 위 코드처럼 폰트사이즈라는 속성과 수치를 넣어서 키워보자.

 

폰트를 개별로 바꿔서 적용 및 지정해 주기 위해서는, 먼저 원하는 폰트를 받아 프로젝트에 추가해주는 작업이 필요하다.

fonts.google.com 에서 여러 종류의 폰트를 구할 수 있다.

적절한 폰트를 받아서, 프로젝트 내에 적절한 폴더를 만들어 주자.

 

그 다음으로는

(1) pubspec.yaml 파일에서 해당 폰트를 사용하겠다고 선언해 줘야 한다.

폰트 선언은 애셋 아래에서 다음과 같이 작성해 주면 된다

 

fonts :

  - family : 코딩에서 활용할 폰트명 지정

  - fonts :

    - assset : 폰트 경로

펍스펙 파일을 수정할 때에는 항상 띄어쓰기 간격을 주의해야 하고, 수정을 완료한 뒤 펍스펙 겟을 습관처럼 누르자

 

(2) 폰트를 활용할 준비가 끝났으니, 이제 실제로 활용해보면 된다. 기본 폰트가 아닌 지정폰트를 위한 코드를 적용하는 방법은 속성에 fontFamily를 추가하고, 큰따옴표 안에 아까 펍스펙에 넣었던 폰트명을 써 주면 된다.

Text(
  'Strong Guy',
  style: TextStyle(
      color:Colors.orange,
      fontSize: 40,
      fontFamily: "Lobster"
  ),
),

 

이 코드를 반영하게 되면 화면이 그림과 같이 고유 폰트로 변하게 된다.

 

 

 

 

 

 

2. ContainerWidget을 활용하여 사각형 박스 만들기 + 아이콘 출력

 

컨테이너위젯을 이용해서 사각형 박스를 만들어 넣는 법을 같이 해보기로 하자.

 

첫번째로, 컬럼의 칠드런 아래에 새 컨테이너를 하나 만든 뒤, 차일드를 넣어주자

그 다음 가로로 긴 상자를 만들 예정이니, 차일드에 Row위젯을 넣어주자.

Row 위젯 칠드런에는 대괄호를 열고, 아이콘과 텍스트 속성을 위 코드와 같이 넣었다.

 

 

이번에는 사각형 배경색을 주어서, 사각형이 눈에 보이도록 하고

아이콘과 텍스트 사이에  간격을 띄울 예정이다.

 

Container(
  color: Colors.white,
  margin: EdgeInsets.all(30),
  padding: EdgeInsets.all(10),
  child: Row(
    children: [
      Icon(Icons.login,color:Colors.orangeAccent),
      SizedBox(width: 10),
      Text('로그인하세요',style: TextStyle(color:Colors.orangeAccent),),
    ],
  ),
),

 

컨테이너 바로 아래에 컨테이너의 속성들을 입력했다.

color: Colors.white 로 박스 색을 하얗게 칠했고

margin과 padding으로 박스 내, 외부에 여백을 주었다

 

 

 

같은 방법으로 '비회원으로 이용하기'라는 박스를 만들기로 했다. 만드는 원리는 위에 있는 버튼과 동일하니 복붙 후 내용만 응용해서 변경하면 쉽게 만들 수 있다.

 

Container(
  color: Colors.white,
  margin: EdgeInsets.fromLTRB(30,0,30,0),
  padding: EdgeInsets.all(10),
  child: Row(
    children: [
      Icon(Icons.account_circle_outlined,color:Colors.redAccent),
      SizedBox(width: 10,),
      Text('비회원으로 이용하기',style: TextStyle(color: Colors.redAccent),),
    ],
  ),
)

 

위 컨테이너와 구조 자체는 동일하다. 

차이점은 텍스트의 내용, 색상, 아이콘의 종류를 변경하였고

마진에서 all 30이 아니라 위아래 마진은 0을 주었다.

위 코드는 fromLTRB 옵션을 썼지만, symmetric 옵션을 써서도 동일하게 만들 수 있다.

EdgeInsets.symmetric(vertical: 0, horizontal: 30)

 

 

 

 

아이콘을 바꿀 때, 안드로이드스튜디오에서 참고해서 바로 찾는 방법도 있고,

구글폰트 사이트에서 구글에서 제공하는 마테리얼 아이콘들을 찾아서 활용할 수도 있다.

 

(1) 안드로이드스튜디오에서 바로 확인하기

 -> "Icons."만 타이핑하면 옆에 자동완성이 뜨고, 자동완성 우측에서 아이콘 모양을 미리보기 할 수 있다.

 

(2) 구글폰트 사이트에서 확인하기

-> 구글폰트 사이트의 Icons에 들어가서, 스타일을 Material Icons로 바꾼 뒤 원하는 아이콘을 검색해 쓰면 된다. 플러터에서 마티리얼 디자인을 쓰고 있기 때문에 여기서 제공하는 아이콘들이 다 사용 가능하다.

 

 

 

3. CardWidget을 활용하여 사각형 박스 만들기

컨테이너 박스의 직사각형 모서리를 둥글게 처리하고 싶어졌다. 도형에 모양을 적용하는 방법은 여러 가지가 있지만, 라운드 모양은 Card 위젯에 이미 구현되어 있다. 따라서 컨테이너 위젯을 Card 위젯으로 교체하여 모서리를 둥글게 처리하려고 한다.

 

[ Container -> Card ] 로 위젯을 교체할 때 주의사항

* Card에는 padding 속성을 지원하지 않기 때문에 기존 컨테이너위젯에서 넣었던 패딩 속성을 지워줘야 한다.

패딩 효과를 적용하기 위해서는 속성 padding이 아니라 위젯 padding을 넣음으로써 이를 대체해줘야 한다.

 

Container vs Card

위 코드처럼 Card의 child를 패딩으로 주고, Padding 위젯의 child를 Row로 주면 된다.

이 때, 괄호를 맞춰가며 코딩을 해야 하기 때문에 Row 전체를 잘라내고 패딩을 입력한 뒤 그 안에 붙여넣는 방법이 오류가 나지 않고 코딩할 수 있는 안전빵 꿀팁이다.

 

 

이렇게 위 컨테이너는 정직한 직사각형, 아래 카드는 모서리가 라운드 처리된 사각형으로 화면에 출력된다.

 

 

3. ListTileWidget을 활용하여 사각형 박스 만들기

Row와 유사하게 가로로 된 모양을 나타낼 수 있는 위젯으로 ListTile 이 있다.

이를 이용해서 만들어보자. 

이를 위해 기존 Row는(Padding 위젯 포함) 주석처리를 해주고 새로 작성해보자. (삭제해도 되는데 아까워서...)

안드로이드 스튜디오에서 주석 처리는 원하는 블록을 정한 뒤 ctrl + / 키를 누르면 된다.

 

리스트타일은 child라는 속성을 갖지 않는다.

대신 Leading, title 속성을 활용해서 각각 아이콘 및 텍스트를 넣어줄 수 있다.

 

 

컨테이너박스로 만든 결과물과 리스트타일로 만든 결과물은 다소 차이가 있다.

왜냐하면 리스트타일에는 기본적으로 구글에서 셋팅해 둔 디자인이 들어가있기 때문이다.

컨테이너를 하나하나 커스텀하며 만들어나갈 수도 있고

리스트타일 같은 이미 어느정도 만들어진 디자인을 활용할 수도 있을 것이다.

 

 

왼쪽이 Row 위젯이 들어가있는 컨테이너와 카드 위젯이고, 오른쪽이 ListTile 위젯이 들어가있는 컨테이너와 카드 위젯이다. 개인 취향차가 있을 수 있겠지만 내 눈에는 오른쪽 디자인이 뭔가 더 안정적인 것 같다.