flutter 입문 _ appBar

appBar의 구성

leading / actions

아이콘을 추가할 수 있다.

title

텍스트를 추가할 수 있다.

flexibleSpace

appBar의 크기를 조절 할 때 사용한다.

bottom

탭바에 사용된다.

appBar _ title

appBar 타이틀 텍스트 기본 중앙정렬 해제하기

centerTitle: false,

appBar _ backgroundColor

class FirstHome extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('onestar app'),
      ),
    );
  }
}

• 결과
  

• backgroundColor 추가

class FirstHome extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.yellow,
        //background컬러 추가
        
        title: Text('onestar app'),
      ),
    );
  }
}

• 결과
  

appBar _ leading

아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할때 사용한다.

• leading 속성으로 메뉴 아이콘 넣어보기

class FirstHome extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.yellow,
        title: Text('onestar app'),

        leading: IconButton(icon: Icon(Icons.menu), onPressed: null,),
        //메뉴 아이콘을 넣었다.
      ),
    );
  }
}

• 결과
  

appBar _ actions

복수의 아이콘 버튼 등을 오른쪽에 배치할때 사용한다.

• actions 속성으로 아이콘 넣어보기

class FirstHome extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.yellow,
        title: Text('onestar app'),

        leading: IconButton(icon: Icon(Icons.menu), onPressed: null,),
        
        actions: [
          IconButton(icon: Icon(Icons.search), onPressed: null,)
        ],
        //actions: []안에 아이콘을 넣어주었다.
      ),
    );
  }
}

• 결과
  

• 복수의 아이콘 넣어보기

actions: [
          IconButton(icon: Icon(Icons.search), onPressed: null,),
          IconButton(icon:Icon(Icons.person), onPressed: null)
        ],

• 결과
  

appBar _ onPressed

아이콘 버튼을 클릭했을 때 함수의 형태로 일어날 이벤트를 정의한다.

그런데 아이콘을 넣으니 title의 위치가 왼쪽으로 이동해버렸다.
이럴땐 어떻게 하쥐?

centerTitle

타이틀의 위치를 추가해주는 속성을 사용한다.

centerTitle: true,

class FirstHome extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.yellow,
        title: Text('onestar app'),
        centerTitle: true,
        //centerTitle을 넣어주었다.

        leading: IconButton(icon: Icon(Icons.menu), onPressed: null,),
        actions: [
          IconButton(icon: Icon(Icons.search), onPressed: null,),
          IconButton(icon:Icon(Icons.person), onPressed: null)
        ],

      ),
    );
  }
}

• 결과