이번 글의 목표는 아래와 같은 앱 화면을 디자인해보자.
앱의 구성을 살펴보면 위에서부터 "앱바 -> gif 이미지 -> 구분선 -> 텍스트 위젯 -> 캐릭터 이미지" 순서이다. 이 것을 고려하며 디자인을 해보자.
cmd + 위젯을 클릭하면 위젯의 속성들을 확인할 수 있다.
AppBar, 본문 Name, Level 부분
먼저 가장 간단한 AppBar와 배경색을 보면, 달라진 것은 색상밖에 없다.
그래서 아래 코드를 보면, 특별한 설정이 필요없다. 다만 색상뒤에 숫자를 이용해서 색의 진하기를 조절할 수 있다는 점은 기억해두면 좋을 것 같다.
return Scaffold(
backgroundColor: Colors.amber[800],
appBar: AppBar(
title: Text('BBANTO'),
backgroundColor: Colors.amber[700],
centerTitle: true,
elevation: 0.0,
)
);그 다음으로 쉬운 텍스트 부분에 대해 설계를 해보자.
위의 코드에서 appBar 아래 부분에 body를 추가하여 디자인을 해보자.
body는 가장 먼저 Padding을 이용해 여백을 준다. 그리고 그 child로 Column을 추가함으로써 완성할 수 있을 것 같다.
body: Padding(
padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text('NAME',
style: TextStyle(color: Colors.white, letterSpacing: 2.0)),
SizedBox(
height: 10.0,
),
Text(
'BBANTO',
style: TextStyle(
color: Colors.white,
letterSpacing: 2.0,
fontSize: 28.0,
fontWeight: FontWeight.bold),
)
]),
),코드를 보면 먼저 Column 위젯에서 좌측 정렬을 하기위해 crossAxisAlignment를 사용한 것을 볼 수 있다. 이렇게 하면 Column의 children에 해당하는 위젯들이 모두 왼쪽 정렬된다.
Text 위젯의 스타일에서 사용된 letterSpacing은 글자 간격을 의미한다.
이 외에도 추가 커스터마이징은 매우 다양하게 가능하다.
그리고 두 text사이에 sizedBox를 삽입한걸 볼 수 있는데, 이것은 저 두 위젯간의 간격을 손쉽게 설정하기 위해 임의의 보이지 않는 공백을 넣은 것이다. 코드 아래에 텍스트를 더 추가하면 아래 그림까지 완성이 된다.
캐릭터 능력 설명 부분
이번엔 아래 부분을 만들어보자.
아이콘과 텍스트로 이루어져있다. 이렇게 가로로 배열을 하기 위해 사용하는 위젯이 Row이다.
Row(
children: [
Icon(Icons.check_circle_outline),
SizedBox(
width: 10.0,
),
Text(
'using lightsaber',
style: TextStyle(fontSize: 16.0, letterSpacing: 1.0),
)
],
),Row를 이용해 icon과 text를 가로로 배치한 후, sizedbox를 이용해 간격을 주었다.
이미지 삽입
먼저 이미지를 사용하기 위해선, 프로젝트에 이미지를 추가해시켜주어야 한다.
먼저. vscode의 프로젝트에 assets 라는 폴더를 추가하고, 이미치를 그 하위에 추가한다.
그 다음, pubspec.yaml파일을 열고 아래와 같이, 해당 경로를 추가한다.
assets:
- assets/ironman idle.png
- assets/ironman running.png이미지를 사용할 준비는 되었고, 이제 코드에서 이미지를 추가해보자.
Column의 childeren중 최 상단에 아래 코드를 추가한다.
Center(
child: CircleAvatar(
backgroundImage: AssetImage('assets/ironman idle.png'),
radius: 60.0,
),
),CircleAvatar 를 가운데 정렬하기 위해 Center로 감쌀건데, CircleAvatar 위젯을 클릭하고 좌측의 노란 전구를 눌러, 'Wrap with Center'를 이용하면 편하게 감쌀 수 있다.
구분선 넣기
그림과 이름 사이에 구분선을 넣는다.
Divider(
height: 60.0,
color: Colors.grey[850],
thickness: 0.5,
endIndent: 30.0,
),- height : diveder의 높이가 아닌, divider의 위, 아래 여백을 포함한 크기
- endIndent : 선이 끝에서 얼마나 떨어질 지 지정할 수 있음.
가장 하단 이미지 추가
위의 이미지와 동일한 방법으로 추가한다. 이전에 만든 Row 위젯 아래에 배치되면 된다.
Center(
child: CircleAvatar(
backgroundImage: AssetImage('assets/ironman running.png'),
radius: 40.0,
backgroundColor: Colors.amber[800],
),
)위와 다르게 backgroundColor 속성을 사용하여 파란색을 지웠다.
최종적으로 완성된 모습은 아래 이미지이다!
아이언맨의 머리가 좀 잘려나갔지만, 이건 이미지를 잘 구해와야할 것 같다.
결과 화면 우측 상단의 DEBUG띠는 MaterialApp위젯에 'debugShowCheckedModeBanner'를 false로 하면 안보이게 할 수 있다.
