PageView를 이용해서 이미지 위에 앱바를 올리는 방법

1. Stack - Positioned

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

  @override
  Widget firstbuild(BuildContext context) {
    return Scaffold(
        body: Stack( // 스택을 먼저 선언
      children: [
        buildPageView(),
        buildPositioned(),
      ],
    ));
  }
  PageView buildPageView() { // 그림을 바닥에 깔고
    return PageView.builder(
      itemCount: 5,
      itemBuilder: (context, index) {
        return Image.network(
          "https://picsum.photos/id/${index + 1}/200/300",
          fit: BoxFit.cover,
        );
      },
    );
  }
}
  Positioned buildPositioned() { // 앱바를 위로 띄움
    return Positioned(
      top: 0,
      left: 0,
      right: 0,
      child: AppBar(
        backgroundColor: Colors.transparent, // AppBar 배경 투명하게
        title: Text("Around"),
        leading: Icon(Icons.menu),
        elevation: 0, // 그림자 효과, 0 이면 제거
      ),
    );
  }

2. backgroundColor: Colors.transparent

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, // Scaffold를 투명하게
          appBar: AppBar(
            backgroundColor: Colors.transparent, // AppBar도 투명하게
            title: Text("Around"),
            leading: Icon(Icons.menu),
          ),
          body: Center(
            child: Text("Page ${index + 1}"),
          ),
        ),
      );
    },
  );
}

3. Sliver

Widget _thirdBuild(double screenHeight) {
  return Scaffold(
    body: CustomScrollView(
      slivers: [
        SliverAppBar( // 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,
              );
            },
          ),
        ),
      ],
    ),
  );
}

4. extendBodyBehindAppBar

  Widget _fourBuild() {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        leading: IconButton(icon: Icon(Icons.menu), onPressed: (){},),
        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,
        );
      },
    ),
  );
  }