본 글은 이 강의를 통해 공부하며 작성된 글입니다.

홈 상단 메뉴바 만들기

home_screen.dart

home_screen.dart 만들기

현재 만들어진 프로젝트의 디렉터리는 이렇다.

screen 폴더에 홈 화면을 만들어줄 것이다.

home_screen.dart

전체 코드

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return TopBar();
  }
}

class TopBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(20, 7, 20, 7),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Image.asset(
            'images/logo.png',
            fit: BoxFit.contain,
            height: 25,
          ),
          Container(
            padding: EdgeInsets.only(right: 1),
            child: Text(
              'TV 프로그램',
              style: TextStyle(fontSize: 14),
            ),
          ),
          Container(
            padding: EdgeInsets.only(right: 1),
            child: Text(
              '영화',
              style: TextStyle(fontSize: 14),
            ),
          ),
          Container(
            padding: EdgeInsets.only(right: 1),
            child: Text(
              '내가 찜한 콘텐츠',
              style: TextStyle(fontSize: 14),
            ),
          ),
        ],
      ),
    );
  }
}

HomeScreen 이름으로 StatefulWidget을 생성해 준다.

우선 상단 메뉴를 먼저 만들어야 한다. 메뉴바는 상태가 변할 필요가 없기 때문에 StatelessWidget로 만들어준다.

lib>screen>home_screen.dart

class TopBar extends StatelessWidget {
  // const TopBar({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(20, 7, 20, 7),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Image.asset(
            'images/logo.png',
            fit: BoxFit.contain,
            height: 25,
          ),
          Container(
            padding: EdgeInsets.only(right: 1),
            child: Text(
              'TV 프로그램',
              style: TextStyle(fontSize: 14),
            ),
          ),
          Container(
            padding: EdgeInsets.only(right: 1),
            child: Text(
              '영화',
              style: TextStyle(fontSize: 14),
            ),
          ),
          Container(
            padding: EdgeInsets.only(right: 1),
            child: Text(
              '내가 찜한 콘텐츠',
              style: TextStyle(fontSize: 14),
            ),
          ),
        ],
      ),
    );
  }
}

padding을 지정해 주고, Row()를 통해 메뉴들을 가로로 배치할 수 있도록 해준다.
mainAxisAlignment: MainAxisAlignment.spaceBetween를 통해 children에 포함되는 위젯들이 일정한 공간을 사용하도록 해준다. MainAxisAlignment관련 내용은 이 블로그에 잘 설명되어 있다.

• 앱 대표 아이콘 이미지
  강좌에서 주는 이미지를 이용해 Netflix 대체 로고 사진을 사용한다.
  Image.asset를 통해 패키지에 포함시키고 .yaml에 추가해 준 파일을 불러오고 높이를 지정해 준다. 관련 내용은 여기.

• 그 외 텍스트
  'TV 프로그램', '영화', '내가 찜한 콘텐츠'의 텍스트들을 만들어준다.
  padding을 지정해 준다. padding을 지정하고 안 하고의 차이는 잘 모르겠다. 이미 앞에서 MainAxisAlignment를 지정하여 잘 정렬되어 나온다.
  EdgeInsets.only()에 관한 내용은 이곳에 있다.

결과

이 화면은 홈을 지정하였을 때에만 나온다.