플러터 강좌를 보고 정리한 내용입니다.

오늘의 완성 화면이다.

return Scaffold(
  backgroundColor: Colors.amber[800],
  appBar: AppBar(
    title: const Text('BBANTO'),
    backgroundColor: Colors.amber[700],
    foregroundColor: Colors.white,
    centerTitle: true,
    elevation: 0.0,
  ),
  // body: { ... }
);

• Scaffold의 backgroundColor 파라미터를 통해 전체적인 배경색을 지정할 수 있다.
• Colors.amber[700]의 [700]과 같이 특정 색상 계열의 색을 지정할 수 있다.

body: const Padding(
  padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    // children: { ... }
  ),
),

• Column 위젯을 통해 위젯들을 세로로 배치한다.
• 자식 위젯들의 가로 길이가 서로 다른 경우 각 자식 위젯들의 왼쪽을 기준으로 맞추고 싶다면 crossAxisAlignment를 CrossAxisAlignment.start로 설정하면 된다.
• 참고로 CrossAxisAlignment.end로 설정한 경우 아래와 같이 된다.

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,
    ),
  ),
],

• TextStyle을 통해 Text 위젯 텍스트의 스타일을 지정할 수 있다.
• 자식 위젯들의 간격을 늘리기 위해 중간에 SizedBox 위젯을 추가하고 높이 값을 지정하는 방법이 있다.