[Flutter] CircleAvata, Expanded, BoxFit 사용법

2020년 10월 01일 by 진아사랑해

    [Flutter] CircleAvata, Expanded, BoxFit 사용법 목차
반응형

Column(

   crossAxisAlignment: CrossAxisAlignment.center,

   mainAxisAlignment: MainAxisAlignment.end

   child: [

       Expanded(    <= 아래 참조

            child: FittedBox(    <= 아래의 Circle을 꽉 차게 만든다

                fit: BoxFit.contain,

                child: CircleAvata(   <= Circle안에 이미지를 넣는다

                      backgroundImage: NetworlImage("https:

 

<= MainAxisAlignment.end으로 Column 설정의 아래부터 차곡차곡 쌓았음으로 남아 있는 위 공간을 모두 사용하도록 확장한다

 

이렇게 함으로 남아 있는 영역을 최대한 활용한다.

Circle이 너무 크게 느껴지면 Padding을 활용하여 Circle의 크기를 조정한다.

 

Expanded의 또 다른 기능은 화면에 키보드가 올라오면 알아서 화면 조절을 해 주는 기능이 있다

 

반응형