ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Flutter 화면 스크롤 상태에 따라 AppBar 그림자 효과 변경하기
    Programming/Flutter 2020. 11. 13. 11:51
    반응형

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

    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();
      }
    }
    

    반응형
Designed by Tistory.