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

[Flutter]

 

 

아래에 있는 AppBar는 Bottom App Bar라고 부릅니다..!

 

이 BottomAppBar를 만드는 법에 대해서 알아봅시다.

 

우선 BottomAppBar는 Material Design 중에 하나입니다.

 

사용방법은 Scaffold의 속성에 있는 bottomNavigationBar를 이용하면 간단하게 만들 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(title: 'MyApp', home: MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Welcome to Flutter'),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          children: [
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {},
            ),
            Spacer(),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.more_vert),
              onPressed: () {},
            )
          ],
        ),
      ),
      body: Center(
        child: Text(
          'Hello World',
          style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
        ),
      ),
    );
  }
}

우선 전체 코드입니다. 

 

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

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

 

위 포스팅에 있는 코드를 참고해서 만들었습니다.

    (main에 MaterialApp을 추가해서 조금 코드가 다릅니다.)

 

전체 코드중에서 BottomAppBar만 살펴봅시다.

 

bottomNavigationBar: BottomAppBar(
  child: Row(
    children: [
      IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {},
      ),
      Spacer(),
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.more_vert),
        onPressed: () {},
      )
    ],
  ),
)

 

코드를 보면 기본적으로 어떻게 생성하는지 알 수 있습니다.

 

Spacer()는 그냥 빈 공간이라고 생각하면 됩니다.

 

bottomNavigationBar: BottomAppBar(
  child: Row(
    children: [
      IconButton(icon: Icon(Icons.menu),onPressed: () {},),
      IconButton(icon: Icon(Icons.search),onPressed: () {},),
      IconButton(icon: Icon(Icons.more_vert),onPressed: () {},),
    ],
  ),
)

bottomNavigationBar: BottomAppBar(
  child: Row(
    children: [
      IconButton(icon: Icon(Icons.menu),onPressed: () {},),
      Spacer(),
      IconButton(icon: Icon(Icons.search),onPressed: () {},),
      IconButton(icon: Icon(Icons.more_vert),onPressed: () {},),
    ],
  ),
)

bottomNavigationBar: BottomAppBar(
  child: Row(
    children: [
      IconButton(icon: Icon(Icons.menu),onPressed: () {},),
      Spacer(),
      IconButton(icon: Icon(Icons.search),onPressed: () {},),
      Spacer(),
      IconButton(icon: Icon(Icons.more_vert),onPressed: () {},),
    ],
  ),
)

 

Spacer의 차이에 따라 이런 식으로 변경될 수도 있습니다.

 

상단 AppBar에 대해 궁금하다면 아래의 포스팅을 참고하면 됩니다.

 

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

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