🙄

【Flutter】スクロールして指定Widgetの透過をいじるチートシート

2025/04/09に公開

スクロールしたらWidget表示

忘れない様にチートシート
flutter_hooksでのやり方

   /// 透過
    final opacity = useState<double>(0);
    ///スクロールコントローラー
    final scrollController = useScrollController();


seEffect(
      () {
        void listener() {
          final offset = scrollController.offset;
          const fadeEnd = 100.0; // どのくらいスクロールしたら完全表示するか
          final newOpacity = (offset / fadeEnd).clamp(0.0, 1.0);
          if (newOpacity != opacity.value) {
            opacity.value = newOpacity;
          }
        }

        scrollController.addListener(listener);
        return () => scrollController.removeListener(listener);
      },
      [scrollController],
    );

//////省略&以下スクロール配下のwidget

 Opacity(
      opacity: opacity.value,
      child: const Text('みえた！！！！'),)

スクロールしたらWidget表示

Discussion