[Flutter] AppBar?! AppBar의 "모든 것"

[Flutter]

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
          ),
        ),
      ),
    );
  }
}

 

 

 

[Flutter] 강좌 01 : Hello World 출력하기

[Flutter] 강좌 01 : Hello World 출력하기

[Flutter] 외부 Font 추가 및 변경 정리 "Google Font 이용"

[Flutter] 외부 Font 추가 및 변경 정리 "Google Font 이용"

위의 포스팅에서 가져온 코드입니다! 이걸로 AppBar에 대한 모든 것에 대해 알아봅시다!

 

AppBar란 앱의 상단 제목 줄을 의미하는 단어입니다.

 

 

위 사진의 빨간 네모에 해당하는 부분입니다.

 

왼쪽부터 leading[Icons.menu], title["Welcome to AppBar"], actions[Icons.image, Icons.navigate_next]를 통해서 추가할 수 있습니다.

 

appBar: AppBar(
    title: Text('Welcome to AppBar'),
    leading: IconButton(icon: Icon(Icons.menu), onPressed: null),
    actions: [
        IconButton(icon: Icon(Icons.image), onPressed: null),
        IconButton(icon: Icon(Icons.navigate_next), onPressed: null),
    ],
)

 

 

 

Text를 중앙에 정렬시키는 방법은 centerTitle을 이용하면 됩니다.

 

appBar: AppBar(
    title: Text('Welcome to AppBar'),
    centerTitle: true,
    leading: IconButton(icon: Icon(Icons.menu), onPressed: null),
    actions: [
        IconButton(icon: Icon(Icons.image), onPressed: null),
        IconButton(icon: Icon(Icons.navigate_next), onPressed: null),
    ],
)

 

 

 

AppBar의 배경색을 변경하는 방법은 backgroundColor를 이용하면 됩니다.

 

appBar: AppBar(
    title: Text('Welcome to AppBar'),
    centerTitle: true,
    leading: IconButton(icon: Icon(Icons.menu), onPressed: null),
    actions: [
        IconButton(icon: Icon(Icons.image), onPressed: null),
        IconButton(icon: Icon(Icons.navigate_next), onPressed: null),
    ],
    backgroundColor: Colors.red,
)

 

 

 

AppBar의 그림자 정도를 변경하는 방법은 elevation을 이용하면 됩니다.

(0이 가장 작은 값이며, 0으로 하면 그림자가 없습니다.)

 

appBar: AppBar(
    title: Text('Welcome to AppBar'),
    centerTitle: true,
    leading: IconButton(icon: Icon(Icons.menu), onPressed: null),
    actions: [
        IconButton(icon: Icon(Icons.image), onPressed: null),
        IconButton(icon: Icon(Icons.navigate_next), onPressed: null),
    ],
    backgroundColor: Colors.red,
    elevation: 100,
)

 

onPressed에 null이 아닌 다른 값을 넣어 버튼을 활성화할 수도 있습니다.

 

하단 AppBar에 대해 궁금다하면 아래 포스팅을 참고하면 좋을거 같습니다.

 

[Flutter] Bottom App Bars의 "모든 것"

[Flutter] Bottom App Bars 의 "모든 것"