[Flutter] 하단 앱 바(bottomNavigationBar)높이 조절하는 방법

플러터를 활용해서 앱을 만들때 처음 만드는 것은 대부분 세 영역으로 구분되는 Scaffold를 활용해서 만들게 될 것이다

Scaffold는 총 3가지로 구성되어 있는데 appbar, body, bottomNavigationBar로 구성된다

 

내가 만든 첫 앱은 다음과 같이 구성되어 있다

 

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(const Myapp());
}

class Myapp extends StatelessWidget {
  const Myapp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('안녕하세요 테스트앱입니다')),
          body: Text("테스트테스트"),
          bottomNavigationBar: BottomAppBar(
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: [
                 Icon(Icons.star),
                 Icon(Icons.accessible),
                 Icon(Icons.contact_mail),
               ],
             ),
           ),
          ),
    );
  }
}

 

위 코드를 실행하면 다음과 같은 하단 영역이 출력된다

이런 경우 하단 영역의 높이가 너무 낮아서 비중을 조절해야 하는데 이런 경우 아이콘을 구성하고 있는 영역을 감싸고 있는 "BottomAppBar"의 하위 속성을 바꿔줘야 한다 하위 속성을 바꾸려면 "BottomAppBar"과 "Row"사이에 뭘 넣어줘서 바꿔야 하는데 이런경우 "Row"를 새로운 Container또는 SizedBox를 사용해서 감싸준다. Container의 경우 좀 무거운 경향이 있어서 우리가 필요한 기능인 height, Width만 쓴다면 SizedBox가 더 적합하다 그래서 가장 편하게 Row를 감싸는 SizedBox를 생성하는 방법은 다음과 같다

 

1. Row에 마우스 커서를 올린다, 그럼 아래 그림 처럼 옆에 전구가 하나 뜰것이다

 

2. 전구를 클릭한다, 클릭하면 아래 그림처럼 드롭다운 리스트가 나온다 이중에서 우리가 적용하고자하는 "SizedBox"를 클릭한다

 

 

3. 클릭한 결과, SizedBox가 Row를 감싸게된다

그리고 이제 감싼 SizedBox에 height를 사용하여 높이를 설정한다 완성된 코드는 하단에 있다

 

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(const Myapp());
}

class Myapp extends StatelessWidget {
  const Myapp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('안녕하세요 테스트앱입니다')),
          body: Text("테스트테스트"),
          bottomNavigationBar: BottomAppBar(
               child: SizedBox(
                 height: 70,
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                   children: [
                     Icon(Icons.star),
                     Icon(Icons.accessible),
                     Icon(Icons.contact_mail),
                   ],
                 ),
               ),
             ),
           ),
          );
  }
}

<결과>