[Flutter]플러터 쿠퍼티노 내비게이션바 높이 만큼 마진 추가하기 Flutter cupertino navigationbar height margin safe area 리스트뷰 가로 안보임

[Flutter]플러터 쿠퍼티노 내비게이션바 높이 만큼 마진 추가하기 Flutter cupertino navigationbar height margin safe area 리스트뷰 가로 안보임

플러터에서 리스트 뷰를 사용하여 작업하던 중 가로 리스트 뷰를 적용하니 화면에 보이지 않는 현상이 발생했다.

 

1-1. 화면이 보이지 않는 기존 이미지

1-2. 화면이 보이지 않는 기존 코드

class CoupertinoFirstPage extends StatelessWidget {
  final List<Animal> list;
  CoupertinoFirstPage({Key? key, required this.list}) : super(key: key);
  @override
  Widget build(BuildContext context) => _buildBody();

  _buildBody() {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('동물 리스트'),
      ),
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, position) {
          return _animalListView(context, position);
        },
        itemCount: list.length,
      ),
    );
  }
}

 

내비게이션 바에 리스트 뷰가 가려지고 있는지 확인하기 위해 내비게이션 바를 제거해 보았다.

 

2-1. 내비게이션 바를 제거한 이미지

2-2. 내비게이션 바를 제거한 코드

class CoupertinoFirstPage extends StatelessWidget {
  final List<Animal> list;
  CoupertinoFirstPage({Key? key, required this.list}) : super(key: key);
  @override
  Widget build(BuildContext context) => _buildBody();

  _buildBody() {
    return CupertinoPageScaffold(
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, position) {
          return _animalListView(context, position);
        },
        itemCount: list.length,
      ),
    );
  }
 }

 

예상대로 내비게이션 바 크기에 가려 리스트 뷰가 보이지 않았던 것이다.

화면에 정상적으로 리스트 뷰가 보이기 위해서는 내비게이션 바의 높이만큼 리스트 뷰의 상단 마진이 추가되어야 한다.

SafeArea 위젯을 사용하면 문제를 간단히 해결할 수 있다.

 

3-1. 정상적으로 리스트 뷰의 영역을 수정한 이미지

3-2. 정상적으로 리스트 뷰의 영역을 수정한 코드

class CoupertinoFirstPage extends StatelessWidget {
  final List<Animal> list;
  CoupertinoFirstPage({Key? key, required this.list}) : super(key: key);
  @override
  Widget build(BuildContext context) => _buildBody();

  _buildBody() {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('동물 리스트'),
      ),
      child: SafeArea(
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemBuilder: (context, position) {
            return _animalListView(context, position);
          },
          itemCount: list.length,
        ),
      ),
    );
  }
 }