Flutter 화면 스크롤 상태에 따라 AppBar 그림자 효과 변경하기

화면의 스크롤상태에 따라 앱바의 그림자효과를 설정하는 방법입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: HomePage()));
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  /// 스크롤 상태확인용
  ScrollController _controller;

  /// elevation효과 사용여부
  bool _elevation = false;

  @override
  void initState() {
    super.initState();

    _controller = ScrollController();

    _controller.addListener(() {
      // 스크롤 위치가 최상단인지 확인
      final reachTop =
          (_controller.offset <= _controller.position.minScrollExtent &&
              !_controller.position.outOfRange);

      // 최상단이 아닐때만 그림자효과 사용
      final elevation = reachTop ? false : true;

      if (elevation != _elevation) {
        setState(() => _elevation = elevation);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final children = List<Text>.filled(200, Text('listitem'));
    return Scaffold(
        appBar: AppBar(title: Text('HomePage'), elevation: _elevation ? 10 : 0),
        body: ListView(controller: _controller, children: children));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}