[flutter] 플러터 Scaffold에서 AppBar의 위치를 변경하는 방법은 어떻게 되나요?

12 Dec 2023

flutter

Scaffold의 appBar 속성을 null로 설정하여 기본 AppBar를 제거합니다.
원하는 위치에 AppBar 위젯을 추가합니다. 이때 원하는 위치에 AppBar를 배치하기 위해 Stack 또는 Positioned 위젯을 사용할 수 있습니다.

아래는 AppBar를 Scaffold의 상단이 아닌 원하는 위치에 배치하는 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Container(
              // 다른 컨텐츠들을 포함하는 부분
            ),
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: AppBar(
                title: Text('Custom AppBar'),
                backgroundColor: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

이 코드는 AppBar를 원하는 위치에 배치하고 싶을 때 사용할 수 있는 방법을 보여줍니다. MaterialApp과 Scaffold를 포함한 소스코드는 간단하게 AppBar를 사용하는 방법을 보여주기 위한 예시이며, 실제 앱에 적용할 때에는 상황과 요구사항에 맞게 알맞게 수정하여 사용하셔야 합니다.

더 자세한 정보는 Flutter 공식 문서의 AppBar 클래스를 참고하시기 바랍니다.