Flutter Instagram Clone #12 게시글 상세보기 페이지(DetailPostPage) 작성하기

jakeseo_me·2020년 7월 27일
0

Flutter-Instagram-Clone

목록 보기
12/14

Flutter Instagram Clone #12 게시글 상세보기 페이지(DetailPostPage) 작성하기

원본 강의

https://www.inflearn.com/course/flutter-%EC%9E%85%EB%AC%B8/dashboard

여기서 유료 결제를 해서 듣고있는 강의의 내용을 개인적인 공부 목적으로 지식 위주로 정리해봅니다.

detail_post_page.dart 파일 내용

import 'package:flutter/material.dart';

class DetailPostPage extends StatelessWidget {
  final dynamic document;
  DetailPostPage(this.document);

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title:
              Text('게시글 상세보기', style: TextStyle(fontWeight: FontWeight.bold)),
          centerTitle: true),
      body: _buildBody(),
    );
  }

  _buildBody() {
    return SafeArea(
        child: SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Row(
              children: <Widget>[
                CircleAvatar(
                  backgroundImage: NetworkImage(document['userPhotoUrl']),
                ),
                Padding(
                  padding: EdgeInsets.only(left: 8.0),
                  child: Column(
                    children: <Widget>[
                      Text(
                        document['email'],
                      ),
                      Text(
                        document['displayName'],
                        style: TextStyle(fontWeight: FontWeight.bold),
                      )
                    ],
                    crossAxisAlignment: CrossAxisAlignment.start,
                  ),
                ),
              ],
            ),
          ),
          Image.network(
            document['photoUrl'],
            fit: BoxFit.cover,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              document['contents'],
              style: TextStyle(fontSize: 18.0),
            ),
          )
        ],
      ),
    ));
  }
}

위와 같이 작성해주면 된다.

전부 이전에 배웠던 내용이라 사실 추가적으로 기재할 것은 없다.

document의 데이터만 해당 페이지로 잘 넘겨오면 된다.

AppBar 클래스에서 centerTitle: true를 주면 제목이 가운데로 간다.

search_page.dart 에서 해주어야 할 일

  Widget _buildListItem(BuildContext context, document) {
    return InkWell(
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          return DetailPostPage(document);
        }));
      },
      child: Image.network(
        document['photoUrl'],
        fit: BoxFit.cover,
      ),
    );
  }

위와 같이 InkWell 클래스를 덮어씌워 이미지가 클릭 가능한 엘리먼트로 되게 바꾸어주면 된다. 그리고 클릭했을 시에 Navigator.push() 메소드를 이용하여 상세 페이지를 보여준다.

결과

위와 같은 결과가 나온다.

profile
대전에 있는 (주) 아이와즈에서 풀스택 웹개발자로 일하고 있는 서진규입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. Javascript를 좋아합니다.

0개의 댓글