[flutter] 6.15 Episodes~

6.15 Episodes

상황에 맞게 ListView를쓰자.

현재 상황은 10개정도만 가져오는거기때문에 

그냥 Column을 쓸거다.

`

만약 ListView를 쓴다면

child: Column(
mainAxisSize: MainAxisSize.min,
children: [

....

FutureBuilder(
                    future: episodes,
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        return Flexible(
                          child: ListView.separated(
                              separatorBuilder: (context, index) {
                                return const SizedBox(
                                  height: 10,
                                );
                              },
                              shrinkWrap: true,
                              physics: const NeverScrollableScrollPhysics(),
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 15, vertical: 13),
                              itemCount: snapshot.data!.length,
                              itemBuilder: (context, index) {
                                var episode = snapshot.data![index];
                                return Container(
                                    decoration: BoxDecoration(
                                      color: Colors.green.shade400,
                                      borderRadius: const BorderRadius.all(
                                          Radius.circular(20)),
                                    ),
                                    child: Padding(
                                      padding: const EdgeInsets.symmetric(
                                          horizontal: 15, vertical: 13),
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            episode.title,
                                            style: const TextStyle(
                                                color: Colors.white,
                                                fontSize: 16),
                                          ),
                                          const Icon(
                                            Icons.chevron_right,
                                            color: Colors.white,
                                          ),
                                        ],
                                      ),
                                    ));
                              }),
                        );
                      } else {
                        return Container();
                      }
                    })

ListView.separated 이용한 코드입니다
ListView의 경우 height를 알수없기 때문에 Column부분에 mainAxisSize: MainAxisSize.min, 를 넣어서 최소 높이만큼의 컬럼길이를 가지게 하고, Flexible을 넣은 후 child로 ListView를 넣어줍니다.
그리고 shrinkWrap을 넣어야 컬럼길이에 맞게 줄어듭니다. 이걸 안넣으면 여전히 에러가 나게됩니다.
https://api.flutter.dev/flutter/widgets/ScrollView/shrinkWrap.html

physics: const NeverScrollableScrollPhysics(),
는, listView 기본설정이 scrollable하기때문에 넣어줘야합니다

 

https://stackoverflow.com/questions/50252569/vertical-viewport-was-given-unbounded-height

https://stackoverflow.com/questions/63374026/the-following-nosuchmethoderror-was-thrown-building-futurebuilderlistdatadi

https://happyhaelee.tistory.com/46

flutter listview builder constraintsError - Expanded vs Flexible

https://api.flutter.dev/flutter/widgets/Expanded-class.html

flexible과 expanded의 차이는

flexible은 가능한 모든 공간을 차지할필요가 없고, expanded는 가능한 모든 공간을 차지하게된다.