Flutter] ListView or GridView 만들 때 팁

최근 강좌를 보면서 얻은 팁을 얘기해보습니다.

 

보통 ListView 위젯을 이용해서 레이아웃을 구성하면 잘 안되는 경우가 많습니다.

 

item의 갯수는 10개인데 그 내용(자식의 내용)과 일치하지 않거나 혹은 높이가 무한이라서 발생되거나 등의 에러가 대표적입니다.

 

이런 경우 두가지 해결 방법이 있습니다.

 

1. shrinkWrap를 사용한다.

 

2. Expanded를 사용한다.

 

간단한 예제 코드

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        centerTitle: true,
        title: const Text(
          '이미지 검색 앱',
          style: TextStyle(
            color: Colors.black,
          ),
        ),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                  border: const OutlineInputBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(10.0),
                    ),
                  ),
                  suffixIcon: IconButton(
                    onPressed: () {
                      print('==> ');
                    },
                    icon: const Icon(
                      Icons.search,
                    ),
                  )),
            ),
          ),
          GridView.builder(
            // shrinkWrap: true,
            itemCount: 10,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 16,
              mainAxisSpacing: 16,
            ),
            itemBuilder: (context, index) {
              return Container(
                child: Text('$index'),
              );
            },
          ),
        ],
      ),
    );
  }

 

그리드뷰를 이용한 예제 코드입니다.

위에서 GridView.builde를 보시면 주석처리된 shrinkwrap가 보이실텐데 이 부분을 true로 주게되면 화면 에러가 발생되는 부분을 막을 수 있습니다.

 

하지만 아래 스샷처럼 오버플로우가 나타남을 보실 수 있습니다.

 

 

이때 사용하는 방법이 두번째 방법인 Expanded를 사용하는 방법입니다.

GridView.builder를 보시면 Expanded로 감싸준 것을 보실 수 있습니다.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        centerTitle: true,
        title: const Text(
          '이미지 검색 앱',
          style: TextStyle(
            color: Colors.black,
          ),
        ),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                  border: const OutlineInputBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(10.0),
                    ),
                  ),
                  suffixIcon: IconButton(
                    onPressed: () {
                      print('==> ');
                    },
                    icon: const Icon(
                      Icons.search,
                    ),
                  )),
            ),
          ),
          Expanded( <-- Expanded로 감쌌습니다.
            child: GridView.builder(
              // shrinkWrap: true,
              itemCount: 10,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 16,
                mainAxisSpacing: 16,
              ),
              itemBuilder: (context, index) {
                return Container(
                  child: Text('$index'),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

이렇게 하면 아래 스샷처럼 오버플로우 없이 나타나는 모습을 보실 수 있습니다.