flutter 안드로이드 stretch 오버스크롤 효과

오버스크롤 효과  |  Android 개발자  |  Android Developers

 

안드로이드 12 이상인 기기에서 오버스크롤이 된 경우 조금 늘어나는 스트레치 효과가 도입되었다.

 

플러터 3.10.6 을 사용하지만 아직 안드로이드 기기에서 glow효과가 나오고 있었다.
glow시 나오는 파란색이 싫어서 아래 코드로 대체했었다.

 body: ScrollConfiguration(
    behavior: NoGlowScrollBehavior(), // 안드로이드 스크롤 시 푸른 빛 없애기
    child: CustomScrollView(
      controller: widget.scrollController,
      slivers: widget.slivers,
    ),
  ),
  
  
  
  
  
import 'package:flutter/material.dart';

class NoGlowScrollBehavior extends ScrollBehavior {
  @override
  Widget buildViewportChrome(
    BuildContext context,
    Widget child,
    AxisDirection axisDirection,
  ) {
    return child;
  }
}

 

 

안드로이드 스트레치 효과를 주기 위해서는 Material3 디자인을 사용하도록 설정하면 된다.

 

@override
  Widget build(BuildContext context) {

    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true
      ),
    );
  }

 

 

또는 StretchingOverscrollIndicator 를 덮어씌어주면 된다.

 

body: ScrollConfiguration(
    behavior: NoGlowScrollBehavior(), // 안드로이드 스크롤 시 푸른 빛 없애기
    child: StretchingOverscrollIndicator( // 스트레치 효과
      axisDirection: AxisDirection.down,
      child: CustomScrollView(
        controller: widget.scrollController,
        slivers: widget.slivers,
      ),
    ),
  ),