[Flutter] AppBar height(높이) 조절하기

Flutter에서 Scaffold 위젯을 사용할 때 AppBar의 높이를 조절하는 방법에 대해 알아보겠습니다. 기본적으로 AppBar는 PreferredSizeWidget을 상속받아야 하며, preferredSize를 통해 원하는 높이를 지정할 수 있습니다.

 

 

1. 기본적인 AppBar 높이 조절 방법

Flutter에서 AppBar의 높이를 조절하기 위해서 PreferredSize 위젯을 사용해야 합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(80.0), // 원하는 높이 지정
          child: AppBar(
            title: Text('Custom AppBar Height'),
            backgroundColor: Colors.blue,
          ),
        ),
        body: Center(child: Text('Hello, Flutter!')),
      ),
    );
  }
}

위 코드에서는 PreferredSize를 사용하여 AppBar의 높이를 80dp로 설정하였습니다.

 

 

2. 커스텀 위젯을 사용하여 AppBar 높이 조절

PreferredSize를 직접 사용하지 않고, 커스텀 AppBar 위젯을 만들어서 활용할 수도 있습니다.

import 'package:flutter/material.dart';

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final double height;

  CustomAppBar({required this.title, this.height = 100.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      color: Colors.blue,
      child: Center(
        child: Text(
          title,
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(height);
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: CustomAppBar(title: 'Custom AppBar', height: 120.0),
        body: Center(child: Text('Hello, Flutter!')),
      ),
    );
  }
}

위 코드에서는 CustomAppBar 클래스를 만들어 preferredSize를 조절할 수 있도록 구성하였습니다.