본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터 - FloatingActionButton 숨기기, Flutter - Hiding FloatingActionButton

by 베타코드 2023. 9. 29.
반응형

질문


Flutter에서 ListView를 아래로 스크롤할 때 FloatingActionButton을 숨기고, 위로 스크롤할 때 보여주는 내장된 방법이 있을까요?


답변


import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // 이 위젯은 앱의 루트입니다.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter 데모',
      theme: new ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter 데모 홈페이지'),
    );
  }
 }
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
 }

 class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  ScrollController _hideButtonController;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  var _isVisible;
  @override
  initState(){
    super.initState();
    _isVisible = true;
    _hideButtonController = new ScrollController();
    _hideButtonController.addListener((){
      if(_hideButtonController.position.userScrollDirection == ScrollDirection.reverse){
        if(_isVisible == true) {
            /* 이전 상태가 false일 때만 설정
             * 위젯 재구성을 줄임
             */
            print("**** ${_isVisible} up"); // IO를 setState에서 분리
            setState((){
              _isVisible = false;
            });
        }
      } else {
        if(_hideButtonController.position.userScrollDirection == ScrollDirection.forward){
          if(_isVisible == false) {
              /* 이전 상태가 false일 때만 설정
               * 위젯 재구성을 줄임
               */
               print("**** ${_isVisible} down"); // IO를 setState에서 분리
               setState((){
                 _isVisible = true;
               });
           }
        }
    }});
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new CustomScrollView(
          controller: _hideButtonController,
          shrinkWrap: true,
          slivers: <Widget>[
            new SliverPadding(
              padding: const EdgeInsets.all(20.0),
              sliver: new SliverList(
                delegate: new SliverChildListDelegate(
                  <Widget>[
                    const Text('I\'m dedicating every day to you'),
                    const Text('Domestic life was never quite my
반응형

댓글