Never give up

Flutter - When you want to scrol in small widget lists 본문

Flutter

Flutter - When you want to scrol in small widget lists

대기만성 개발자 2022. 1. 29. 00:33
반응형

ListView, SingleChildView등을 사용할 때

 

위젯 리스트들의 크기가 화면의 크기보다 작으면 physics에 bouncing을 넣어도

 

스크롤이 안되는데 속성하나만 설정하면 가능하게 할 수 있습니다

 

import 'package:flutter/material.dart';

class PhysicsExample extends StatefulWidget {
  const PhysicsExample({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _PhysicsExampleState createState() => _PhysicsExampleState();
}

class _PhysicsExampleState extends State<PhysicsExample> {
  ScrollController _controller = ScrollController();
  List<String> _list = List.generate(3, (index) => 'Index - $index');

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

    bool isCalled = false;

    _controller.addListener(() {
      if ((_controller.offset <= _controller.position.minScrollExtent - 60) &&
          !isCalled) {
        isCalled = true;

        Navigator.pop(context);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        controller: _controller,
        physics: const BouncingScrollPhysics(
          parent: const AlwaysScrollableScrollPhysics(),
        ),
        itemCount: _list.length,
        itemBuilder: (_, index) {
          return ListTile(
            title: Text(_list[index]),
          );
        },
      ),
    );
  }
}

&lt; 작동 영상 &gt;

간단하게 위로 조금 더 당겼을때 navigator pop을 하는 예제인데

 

여기서 위젯들 높이가 낮아서 스크롤이 안되는데

 

BouncingScrollPhysics의 속성 parent에 AlwaysScrollableScrollPhysics를 넣으면

 

해당 예제처럼 스크롤이 가능하게 됩니다

반응형
Comments