[Flutter] appbar의 두가지 디자인 (+플러터 앱바 소스코드)

flutter의 가장많이 사용하는 두가지 appbar 기본(?) 형태를 소개합니다.

제가 기본형태라 생각하는, 그리고 실제 적용하여 출시해보았던 두가지 앱바 형태입니다.

원하는 디자인형태가 있다면 도움이 되시길 바라며!

 

 

 

 

---

1. appbar가 높이 거의 없는 형태

 

 

 

preferredSize 속성으로 높이를 0으로 주는 형태입니다.

아래를 코드를 적용했습니다.

 

@override
build(context) { 
  return Scaffold(
    appBar: PreferredSize(child:AppBar(),
      preferredSize: Size.fromHeight(0),
    ),

 

 

 

 

 

2. 왼쪽 버튼이 있는 appbar 형태

 

 

 

- body 위에 appBar 를 추가했습니다.

- 왼쪽 자리를 차지하는 옵션은 leading 입니다. 저는 이곳에 (뒤로가기 화살표)아이콘 버튼을 만들었습니다.

- 텍스트가 기본정렬이 원래 가운데 정렬인걸로 알고있는데 저는 가운데 정렬이 되지않아서 centerTitle 옵션을 true로 주었습니다.

아래 코드를 적용했습니다.

 

 

@override
build(context) { 
  return Scaffold(
    resizeToAvoidBottomInset: false,
    appBar: AppBar(
      title:new Text('${item}',style: TextStyle(color:Colors.black,
          letterSpacing:-1.5,fontSize: 20)),
      leading: IconButton(
        icon: Icon(Icons.arrow_back_ios_new_sharp,color:Colors.black),
        onPressed: () {
            backStage();
        },
      ),
      centerTitle: true,
    ),

    body: