-
질문 & 답변
카테고리
-
세부 분야
모바일 앱 개발
-
해결 여부
미해결
GridView.builder 관련 질문 입니다.
20.02.07 23:25 작성 조회수 577
0
안녕하세요
Search Page 에 있는 GridView를 Account Page 프로필 정보 하단에 넣고 싶습니다. 혹시 방법이 있을까요?
답변을 작성해보세요.
0
오준석
지식공유자2020.02.09
아하. 제가 잘 못 알려드렸네요.
리스트 안에 리스트를 넣을 때는 shrink: true 하면 되는데 Column 안에 리스트를 넣을 때는 Expanded로 감싸는게 맞습니다.
shrink: true는 빼 주시고 GridView를 Expanded로 감싸 보세요.
0
dreamya
질문자2020.02.09
주말인데도 불구하고 답변주셔서 감사드립니다.
해결되었습니다. ^^
Widget _buildBody(context) {
return Container(
color: Colors.lightBlue,
padding: EdgeInsets.all(16.0),
child: Column(
children : [
_buildProfile(),
_buildListview(),
],
),
);
}
Widget _buildListview() {
return Expanded(
child: StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('post').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator(),);
}
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1.0,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0),
shrinkWrap: false,
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index) {
return _buildListItem(context, snapshot.data.documents[index]);
},
);
}
),
);
}
--------------------------
GridView.builder 에서 shrinkWrap: true 를 바꿨더니 내용이 나왔습니다.
그런데 아래이미지와 같이 RenderFlex 확장 관련 에러가 발생했습니다.
구글 검색했을때 Container를 Expended로 변경해야한다고 해서 변경해보았지만
전체 화면이 하얗게되면서 내용이 나오지를 않습니다.
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'create_page.dart';
import 'detail_post_page.dart';
class AccountPage extends StatelessWidget {
final FirebaseUser user;
AccountPage(this.user);
final GoogleSignIn _googleSignIn = GoogleSignIn();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _buildAppBar(),
body: _buildBody(context),
);
}
Widget _buildBody(context) {
return Container(
color: Colors.lightBlue,
padding: EdgeInsets.all(16.0),
child: Column(
children : [
_buildProfile(),
Column(
children: [
_buildListview(),
],
),
]
)
);
}
Widget _buildListview() {
return Container(
child: StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('post').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator(),);
}
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1.0,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0),
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index) {
return _buildListItem(context, snapshot.data.documents[index]);
},
);
}
),
);
}
Widget _buildProfile() {
return Container(
//color: Colors.white,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
children: <Widget>[
Stack(
children: <Widget>[
SizedBox(
width: 80.0,
height: 80.0,
child: GestureDetector(
onTap: () => print('이미지 클릭'),
child: CircleAvatar(
backgroundImage: NetworkImage(user.photoUrl),
),
),
),
Container(
//color: Colors.red,
width: 80.0,
height: 80.0,
alignment: Alignment.bottomRight,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
SizedBox(
width: 28.0,
height: 28.0,
child: FloatingActionButton(
onPressed: null,
backgroundColor: Colors.white,
),
),
SizedBox(
width: 25.0,
height: 25.0,
child: FloatingActionButton(
backgroundColor: Colors.blue,
onPressed: null,
child: Icon(Icons.add),
),
),
],
),
),
],
),
Padding(
padding: EdgeInsets.all(8.0),
),
Text(
user.displayName,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
)
],
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: StreamBuilder<QuerySnapshot>(
stream: _postStraem(),
builder: (context, snapshot) {
var post = 0;
if (snapshot.hasData) {
post = snapshot.data.documents.length;
}
return Text(
'$post\n게시물',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18.0),
);
}
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: StreamBuilder<DocumentSnapshot>(
stream: _followerStream(),
builder: (context, snapshot) {
var follower = 0;
if (snapshot.hasData) {
var filteredMap;
if (snapshot.data.data == null) {
filteredMap = [];
} else {
filteredMap = snapshot.data.data
..removeWhere((key, value) => value == false);
}
follower = filteredMap.length;
}
return Text(
'$follower\n팔로워',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18.0),
);
}
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: StreamBuilder<DocumentSnapshot>(
stream: _followingStream(),
builder: (context, snapshot) {
var following = 0;
if (snapshot.hasData) {
var filteredMap;
if (snapshot.data.data == null) {
filteredMap = [];
} else {
filteredMap = snapshot.data.data
..removeWhere((key, value) => value == false);
}
following = filteredMap.length;
}
return Text(
'$following\n팔로잉',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18.0),
);
}
),
),
],
),
);
}
Widget _buildListItem(BuildContext context, DocumentSnapshot document) {
return Hero(
tag: document.documentID,
child: Material(
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailPostPage(document, user)),
);
},
child: Image.network(
document['photoUrl'],
fit: BoxFit.cover,
),
),
),
);
}
Widget _buildAppBar() {
return AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.exit_to_app),
color: Colors.black,
onPressed: () {
// 로그아웃
FirebaseAuth.instance.signOut();
_googleSignIn.signOut();
},
)
],
backgroundColor: Colors.white,
title: Text(
'내 프로필 보기',
style: GoogleFonts.pacifico(),
),
);
}
// 내 게시물 가져오기
Stream<QuerySnapshot> _postStraem() {
return Firestore.instance
.collection('post')
.where('email', isEqualTo: user.email)
.snapshots();
}
// 팔로잉 가져오기
Stream<DocumentSnapshot> _followingStream() {
return Firestore.instance
.collection('following')
.document(user.email)
.snapshots();
}
// 팔로워 가져오기
Stream<DocumentSnapshot> _followerStream() {
return Firestore.instance
.collection('follower')
.document(user.email)
.snapshots();
}
}
0
오준석
지식공유자2020.02.08
Column 안에 크기를 가늠할 수 없는 위젯(GridView)이 들어가서 그럴 겁니다.
GridView.builder 에서 shrinkWrap: true 값을 지정해 보세요.
0
dreamya
질문자2020.02.08
답변 감사드려요 ~
아래와 같이 넣었는데 표시가 안됩니다.
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'create_page.dart';
import 'detail_post_page.dart';
class AccountPage extends StatelessWidget {
final FirebaseUser user;
AccountPage(this.user);
final GoogleSignIn _googleSignIn = GoogleSignIn();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _buildAppBar(),
body: _buildBody(context),
);
}
Widget _buildBody(context) {
return Container(
//color: Colors.lightBlue,
padding: EdgeInsets.all(16.0),
child: Column(
children : [
_buildProfile(),
Column(
children: [
Container(
child: StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('post').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator(),);
}
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.0,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0),
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index) {
return _buildListItem(context, snapshot.data.documents[index]);
},
);
}
),
),
],
),
]
)
);
}
Widget _buildProfile() {
return Container(
//color: Colors.white,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
children: <Widget>[
Stack(
children: <Widget>[
SizedBox(
width: 80.0,
height: 80.0,
child: GestureDetector(
onTap: () => print('이미지 클릭'),
child: CircleAvatar(
backgroundImage: NetworkImage(user.photoUrl),
),
),
),
Container(
//color: Colors.red,
width: 80.0,
height: 80.0,
alignment: Alignment.bottomRight,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
SizedBox(
width: 28.0,
height: 28.0,
child: FloatingActionButton(
onPressed: null,
backgroundColor: Colors.white,
),
),
SizedBox(
width: 25.0,
height: 25.0,
child: FloatingActionButton(
backgroundColor: Colors.blue,
onPressed: null,
child: Icon(Icons.add),
),
),
],
),
),
],
),
Padding(
padding: EdgeInsets.all(8.0),
),
Text(
user.displayName,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
)
],
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: StreamBuilder<QuerySnapshot>(
stream: _postStraem(),
builder: (context, snapshot) {
var post = 0;
if (snapshot.hasData) {
post = snapshot.data.documents.length;
}
return Text(
'$post\n게시물',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18.0),
);
}
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: StreamBuilder<DocumentSnapshot>(
stream: _followerStream(),
builder: (context, snapshot) {
var follower = 0;
if (snapshot.hasData) {
var filteredMap;
if (snapshot.data.data == null) {
filteredMap = [];
} else {
filteredMap = snapshot.data.data
..removeWhere((key, value) => value == false);
}
follower = filteredMap.length;
}
return Text(
'$follower\n팔로워',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18.0),
);
}
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: StreamBuilder<DocumentSnapshot>(
stream: _followingStream(),
builder: (context, snapshot) {
var following = 0;
if (snapshot.hasData) {
var filteredMap;
if (snapshot.data.data == null) {
filteredMap = [];
} else {
filteredMap = snapshot.data.data
..removeWhere((key, value) => value == false);
}
following = filteredMap.length;
}
return Text(
'$following\n팔로잉',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18.0),
);
}
),
),
],
),
);
}
Widget _buildListItem(BuildContext context, DocumentSnapshot document) {
return Hero(
tag: document.documentID,
child: Material(
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailPostPage(document, user)),
);
},
child: Image.network(
document['photoUrl'],
fit: BoxFit.cover,
),
),
),
);
}
Widget _buildAppBar() {
return AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.exit_to_app),
color: Colors.black,
onPressed: () {
// 로그아웃
FirebaseAuth.instance.signOut();
_googleSignIn.signOut();
},
)
],
backgroundColor: Colors.white,
title: Text(
'내 프로필 보기',
style: GoogleFonts.pacifico(),
),
);
}
// 내 게시물 가져오기
Stream<QuerySnapshot> _postStraem() {
return Firestore.instance
.collection('post')
.where('email', isEqualTo: user.email)
.snapshots();
}
// 팔로잉 가져오기
Stream<DocumentSnapshot> _followingStream() {
return Firestore.instance
.collection('following')
.document(user.email)
.snapshots();
}
// 팔로워 가져오기
Stream<DocumentSnapshot> _followerStream() {
return Firestore.instance
.collection('follower')
.document(user.email)
.snapshots();
}
}
0
답변 5