inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Flutter nhập môn - Phát triển Android, iOS cùng một lúc (với Firebase)

GridView에 데이터가 표시가 안됩니다.

297

yonglimlee

5 câu hỏi đã được viết

0

안녕하세요.

인스타그램 클론 강의 듣고, 혼자 토이플젝을 하나 하고 있는데 GridView에 데이터가 표시되지 않아 질문드립니다.

 

 

기능

#가치 라는 해시태그 버튼을 클릭하면 단어들중 #가치 라는 카테고리에 속하는 단어를 하단에 출력

 

#구현 사항

#문제사항

 

첫번째 이미지는 더미데이터를 집어놓은거구요.

두번째 이미지가 현재 상황입니다.

 

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:uddutsi/tab/home/home_model.dart';
import 'package:uddutsi/tab/search/search_model.dart';

import '../../model/category.dart';
import '../../model/word.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  final dics = const [
    '단어1', '차갑다', '버르장머리없다','거지같다','착하다',
    '단어1', '차갑다', '버르장머리없다','거지같다','착하다',
    '단어1', '차갑다', '버르장머리없다','거지같다','착하다',
    '단어1', '차갑다', '버르장머리없다','거지같다','착하다',
  ];

  @override
  Widget build(BuildContext context) {

    final model = HomeModel();
    final searchModel = SearchModel();

    List<Word> wordList = [];

    return Scaffold(
      appBar: AppBar(
        title: const Text('[test]'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            const SizedBox(height: 10),
            StreamBuilder<QuerySnapshot<Category>>(
              stream: model.categoriesStream,
              builder: (context, snapshot) {

                if (snapshot.hasError) {
                  return const Text('Something went wrong');
                }

                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const Center(child: CircularProgressIndicator());
                }

                List<Category> categories = snapshot.data!.docs.map((e) => e.data()).toList();

                return Wrap(
                  direction: Axis.horizontal, //나열 방향
                  alignment: WrapAlignment.start, //정렬방식
                  spacing: 5, //좌우간격
                  runSpacing: 5, //상하간격
                  children: <InkWell>[
                    for(var i = 0; i<categories.length; ++i)
                      ...[
                        InkWell(
                          child: Container(
                            padding: const EdgeInsets.all(6),
                            decoration: BoxDecoration(
                              color: const Color(0xffdddddd),
                              borderRadius: BorderRadius.circular(6),
                            ),
                            child: Text('#${categories[i].name}'),
                          ),
                          onTap: () async{
                            print('click ${categories[i].name}');
                            List<dynamic> _listData = await searchModel.getWordsByCategoryId(categories[i].id);

                            setState(() {
                              wordList.clear();
                              wordList = _listData.map((dynamic item) => Word.fromJson(item)).toList();
                              wordList.forEach((element) {print('${element.name}');});
                            });

                          },
                        ),
                      ],
                  ],
                );
              }
            ),
            const SizedBox(height: 10),
            Expanded(
              child: GridView.builder(
                itemCount: wordList.length,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3, //3열을 만드는 속성
                  crossAxisSpacing: 2.0,
                  mainAxisSpacing: 2.0,
                ),
                itemBuilder: (BuildContext context, int index){
                  final dic = wordList[index];
                  return GestureDetector(
                    onTap: (){
                      print('click ${dic.name}');
                    },
                    child: Hero(
                      tag: dic,
                      child: Text(dic.name),
                    )
                  );
                },

              ),
            ),
          ],
        ),
      ),
    );
  }
}

setState 함수안에 데이터를 업데이트 한후, 출력을 해보면 wordList가 잘 출력되는것까지는 확인했는데 GridView에서는 출력이 안됩니다.

혹시 GridView가 아닌 다른 위젯으로 출력을 해야할까요? 검색을 하려해도 무슨 키워드로 검색을 해야할지 감이 안 잡혀서요. 답변 기다리겠습니다. ^^

flutter ios android

Câu trả lời 1

0

survivalcoding

wordList 선언을 build() 메서드 밖에서 하셔야 될 것 같습니다.

화면이 재생성 되면서 build() 안에서 계속 빈 리스트로 초기화되고 있습니다.

참고로 본 강의에서는 다음강의와의 연계를 생각해서 비슷한 코드로 만들기 위해 일부러 build() 안에 모델 코드를 작성하지만

사실은 build() 밖에 두는게 좋습니다. 따라서 다음 세 코드를 필드로 옮기는게 좋습니다.

final model = HomeModel();
final searchModel = SearchModel();
List<Word> wordList = [];

0

yonglimlee

헛 바로 해결되었네요!! ㅎㅎ 감사합니다.

setState()를 하게 되면 build(){} 안에 화면을 다시 그린다고 보면되는걸까요?

0

survivalcoding

네. 맞습니다.

토이 프로젝트 대단합니다. 화이팅입니다.

과거 ai없을때 듣고 다시 듣는 중인데

1

54

1

40번 수업이 완료가 되지 않아요.

0

61

1

최신버전 firebase_ui_auth 할때 EmailAuthProvider 오류 잡는 방법

0

157

1

애뮬레이터로 main.dart를 실행하면 컴퓨터가 멈춥니다.

0

328

2

혹시 재촬영 계획이 있으신가요?

0

249

1

애뮬레이터 Intel HAXM 다운로드가 안돼요

0

556

2

에뮬레이터 홈화면

0

258

1

종속성 충돌 질문

0

341

1

plugin 중에서 에러 발생시 발생한 코드 위치에 바로 에러 표시해주는 기능 있을까요?

0

425

1

firebase option 오류

0

373

2

alt+enter 가 맥북에서는 option enter로 알고 있는데 단축키가 먹히지 않습니다 ㅜㅜ

0

1458

11

파이어베이스 연결시 갑자기 다른 오류가 발생했어요 ㅠㅠ

0

409

1

Failed assertion: line 246 pos 15: 'items.length >= 2': is not true.

0

1319

1

Firebase로 이메일 로그인 기능 구현

0

354

1

The Android Gradle plugin supports only Kotlin Gradle plugin version 1.5.20 and higher. 해결법을 모르겠습니다

0

6895

4

안드로이드 에뮬레이터 실행오류

1

1008

1

firebase 연동 중 오류 질문

0

467

1

05. AccountPage UI 작성강의 설명문의

0

370

1

firestore에서 List<String>을 받아오고 싶을 때

0

543

1

firebase 이메일 로그인 설정 관련 오류 문의의 건

0

1087

1

기본위젯

0

2729

1

firebase에 upload 에러가 발생했습니다

0

1269

3

디버그 서명 인증서 SHA-1가 구해지지 않습니다.

1

317

1

비동기로 콜백을 받는다는 것이 무슨 뜻인가요?

2

413

1