column 내에 listview 와 타 위젯을 같이 배치하려면..

column 내에 listview.builder  와 타 위젯이 같이 배치가 되지 않습니다.

listview 는 스크롤기능이 있어 전체화면으로 확장하려는 성질이 있기 때문입니다.

하지만, sizedbox 나 container 를 같이 사용한다면 가능합니다.

 

방법:

    column 위젯내에 sizedbox 를 선언하고 listview 를 감싸주면 가능합니다.

    |----------column-------|

      | -----sizedbox----- |

           |  --listview--  |

 

Column(
  children: [
    SizedBox(height: 50,),
    SizedBox(height: 600,
      child: Expanded(
        child: ListView.builder(itemCount:20,
           itemBuilder: (context, index)

=> sizedbox(height 높이 지정) / expanded 위젯으로 listview.builder 를 감쌈.

 

아래 완성된 모습니다.

 

 

 잘 동작합니다. 

 하지만 문제가 있습니다.

 스크롤 할때마다 상단의 appbar 의 색상이 변경됩니다.

 이를 해결하기 위해서,

  appbar 속성에 아래 같이 추가합니다.

scrolledUnderElevation: 0,),

  => scrolledUnderElevation은 Flutter의 AppBar에서 스크롤 시 앱바 아래에 콘텐츠가 지나갈 때 생기는 그림자 효과의 높이를 제어하는 속성. Material 3 테마에서 도입되었으며, 앱바의 색상이 스크롤에 따라 바뀌는 것처럼 보이는 현상을 유발할 수 있슴.

 

Widget build(BuildContext context) {
  return Scaffold(backgroundColor: Colors.white,
    appBar: AppBar(title: Text("기간별 현황"),
      centerTitle: true,
      backgroundColor: Colors.white,
      scrolledUnderElevation: 0,),

=>전체적인 색상 유지를 위해 scaffold backgroundcolor 속성 지정(body 색상지정함)