[flutter] appbar 높이 조절 방법

appbar 높이를 조절해야할 필요가 생겼습니다.

 

기본으로 제공되는 높이보다 조금 더 높아져야 하네요.

 

appbar 에서 높이 조절하는 방법은 Preferred 를 사용하면 됩니다.

 

class MyPage extends StatelessWidget {
  const MyPage({Key? key}): super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(
          80.0
        ),
        child: AppBar(
          title: Text('appbar title')
        )
      )
    );
  }
}

< PreferredSize 적용 >

 

appBar 뒤에 PrefeeredSize 를 입력하고 사이즈를 넣어주면 높이 조절이 가능합니다.

다만 이렇게 하면 높이가 커져서 안에 넣었던 내용들이 가장 최상단에 위치하게 되는데 가운데 정렬을 하고 싶다면 Colum() 을 사용해서 가운데 정렬을 사용하면 됩니다.

 

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: false,
      child: Scaffold(
        // Scaffold 배경 색 지정하지 않으면 Appbar 위 아래로 하얀색 여백 나타남
        backgroundColor: const Color.fromARGB(255, 1, 18, 38),
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(80),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AppBar(
                elevation: 0, // 그림자 효과. 0: 없음
                automaticallyImplyLeading: false, // 뒤로 가기 버튼 사용 유무
                leadingWidth: 170,
                leading: Padding(
                  padding: const EdgeInsets.only(left: 10.0),
                  child: GestureDetector(
                    onTap: (){
                      setState(() {
                        controller = null;
                        title = titleString;
                        webviewURL = monitoringURL;
                      });
                    },
                    child: Center(child: Image.asset('assets/img/g_logo.png'))
                  ),
                ),
              ),
            ],
          ),
        ),
        body: Text('helo?');
      ),
    );
  }
}

< appbar 내용 가운데 정렬 적용 >

 

Column 안에 mainAxisAlignment: MainAxisAlignment.center 를 지정해 줘야지 appbar 가운데 정렬이 적용 됩니다.

 

 

그 외에 다른 내용으로는 elevation 과 automaticallyImplyLeading 이 있는데 각각의 내용은 아래와 같습니다.

 

ex) elevation: 0

그림자 효과를 적용할 수 있습니다. 기본값은 4.0 으로 적용.

0이면 그림자 효과가 없고 숫자가 커질수록 진하게 적용됩니다.

ex) automaticallyImplyLeading: false

다음 페이지로 넘어갔을 때 뒤로 가기 버튼 사용 유무입니다. 기본값은 true 적용.

true : 사용함, false : 사용 안함 입니다.