[Flutter 심화] 2. 앱 바 뒤를 배경화면으로 채우는 4가지 방법

Aug 04, 2025

Contents

1. Scaffold 없이 PageView 2. Stack - 그닥 좋은 방법X 3. Scaffold 의 body에 PageView (가장 좋은 방법)4. Sliver (firstBuild는 Sliver를 배우고 난 뒤에)전체 코드

❗

Tips

Scaffold로 시작 안해도 됨

Container에 Scaffold 넣기 가능 → 색상만 투명 처리하면 됨

Scaffold 위에 Scaffold 가능

1. Scaffold 없이 PageView

PageView.builder = 화면 가로 슬라이드로 넘길 수 있음

Scaffold가 없음 = 구조가 없는 화면

문제 = 앱바 밑에 있음

컨테이너의 child에 Scaffold를 거는거임

즉 페이지뷰를 깔고 Scaffold를 얹는것

2. Stack - 그닥 좋은 방법X

(PageView + Positioned AppBar)

3. Scaffold 의 body에 PageView (가장 좋은 방법)

Scaffold extendBodyBehindAppbar 속성 사용

❗

기존의 위젯이 제공하는 기능을 잘 알아야 된다!

4. Sliver (firstBuild는 Sliver를 배우고 난 뒤에)

전체 코드


import 'package:flutter/material.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: HomePage(),
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          foregroundColor: Colors.white,
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;
    double appBarHeight = screenHeight * 0.1; // AppBar 높이 계산
    return _fourBuild();
  }

  Widget _fourBuild() {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            print("클릭됨");
          },
        ),
        title: Text(
          "Around",
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      body: PageView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return Image.network(
            "https://picsum.photos/id/${index + 1}/200/300",
            fit: BoxFit.cover,
          );
        },
      ),
    );
  }

  Widget _thirdBuild(double appBarHeight) {
    return Stack(
      children: [
        PageView.builder(
          itemCount: 5,
          itemBuilder: (context, index) {
            return Image.network(
              "https://picsum.photos/id/${index + 1}/200/300",
              fit: BoxFit.cover,
            );
          },
        ),
        Positioned(
          // IgnorePointer
          left: 0,
          top: 0,
          right: 0,
          height: appBarHeight,
          child: AppBar(
            backgroundColor: Colors.transparent,
            title: Text("Around"),
            leading: IconButton(
              onPressed: () {
                print("클릭됨");
              },
              icon: Icon(Icons.menu),
            ),
          ),
        ),
      ],
    );
  }

  Widget _secondBuild() {
    return PageView.builder(
      itemCount: 5,
      itemBuilder: (context, index) {
        return Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage("https://picsum.photos/id/${index + 1}/200/300"),
              fit: BoxFit.cover,
            ),
          ),
          child: Scaffold(
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              backgroundColor: Colors.transparent,
              title: Text("Around"),
              leading: Icon(Icons.menu),
            ),
            body: Center(
              child: Text("Page ${index + 1}"),
            ),
          ),
        );
      },
    );
  }

  // Sliver의 expandedHeight 사용하기
  Widget _firstBuild(double screenHeight) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            leading: Icon(Icons.menu),
            title: Text("Around"),
            expandedHeight: screenHeight,
            flexibleSpace: PageView.builder(
              itemCount: 5,
              itemBuilder: (context, index) {
                return Image.network(
                  "https://picsum.photos/id/${index + 1}/200/300",
                  fit: BoxFit.cover,
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}