Flutter 앱 개발 6 : Contents 뷰 - Scaffold, AppBar 추가

자 이제부터 우주 사진 리스트를 보여주기 위한 Contents 뷰 클래스를 차근 차근 만들어 보자.

1. Contents 클래스 추가

일단, lib/view 폴더를 생성 하고 contents.dart 파일을 추가하자.

contents.dart 파일 추가

일단, Contents 클래스를 Stateless 위젯으로 만들자. Stateless 위젯에 대해서는 Flutter 커스텀 위젯 (Stateless, Stateful) 를 참고하기 바란다.

import 'package:flutter/material.dart';

class Contents extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

 

2. Contents 클래스의 build 함수 구현 : Scaffold + AppBar

이제 Contents 클래스의 build 함수를 구현해 보자.

이번 포스트에서는 한 화면의 기본이 되는 scaffold 위젯에 앱 타이틀이 보여질 수 있게 AppBar를 추가할 예정이다.

Scaffold 란?

앱의 뷰를 구성하는 '발판'이 되는 위젯이다. 타이틀 영역인 appbar, 컨텐츠 영역인 body 를 비롯 floating action button, bottom navigation bar 등을 구성할 수 있다. 

일단 코드부터 보자. Scaffold 에 AppBar 를 추가하여 '오늘 우주는' 이라는 제목을 달아주었다.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('오늘 우주는'),
      ),
    );
  }

 

3. MaterialApp home 위젯으로 설정

Flutter 앱 개발 4 : Material App 생성 에서 만든 lib/main.dart 의 MaterialApp home 속성에 Contents 위젯을 설정한다.

import 'package:apod/view/contents.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Space Daily',
    theme: ThemeData(
      visualDensity: VisualDensity.adaptivePlatformDensity,
      primaryColor: Colors.black,
      fontFamily: 'NexonLv2GothicLight',
    ),
    home: Contents(),        // Contents 위젯을 home으로 설정
  ));
}

 

실행해 보자.

 

4. 테마 변경

음... 뭔가 마음에 들지 않는다. 앱 시그니처 칼라가 블랙인데 scaffold 의 body 영역이 흰색으로 보이는 상황이기도 하고 앱 타이틀도 왠지 가운데 정렬이 되었으면 좋겠다. 개별적으로 설정해주는 방법도 있겠지만. 앱 내 모든 Scaffold와 AppBar 에 적용하기 위해 테마를 살짝 수정해 보자. Flutter 앱 개발 5 : 테마 설정 (폰트, 칼라 코드) 에서 만들었던 lib/main.dart 의 ThemeData를 살짝 수정해 보자.

import 'package:apod/view/contents.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Space Daily',
    theme: ThemeData(
      visualDensity: VisualDensity.adaptivePlatformDensity,
      primaryColor: Colors.black,
      fontFamily: 'NexonLv2GothicLight',
      scaffoldBackgroundColor: Colors.black,   // Scaffold 배경 색상 변경
      appBarTheme: AppBarTheme(
        centerTitle: true,                     // AppBar 의 타이틀을 중앙 정렬
      ),
    ),
    home: Contents(),
  ));
}

 

결과는,