반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- identifierForVender
- Three-fiber
- RouteObserver
- Three js
- jszip
- userevent_tracker
- web track
- Redux
- uint8array
- uint16array
- swagger-typescript-api
- Flutter
- Prism.js
- webrtc
- node
- FirebaseAnalytics
- Raycasting
- Completer
- REST API
- typescript
- KakaoMap
- babel
- Image Resize typescript
- Babel standalone
- Game js
- react
- Excel
- androidId
- code editor
- methodChannel
Archives
- Today
- Total
Never give up
Flutter - When you want to scrol in small widget lists 본문
반응형
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]),
);
},
),
);
}
}
간단하게 위로 조금 더 당겼을때 navigator pop을 하는 예제인데
여기서 위젯들 높이가 낮아서 스크롤이 안되는데
BouncingScrollPhysics의 속성 parent에 AlwaysScrollableScrollPhysics를 넣으면
해당 예제처럼 스크롤이 가능하게 됩니다
반응형
'Flutter' 카테고리의 다른 글
Flutter - Get device Id (uuid) (1) | 2022.09.08 |
---|---|
Flutter - Overlap widget without using stack (0) | 2022.01.29 |
Flutter - Custom Video player(Feat. Transform) (0) | 2022.01.28 |
Flutter - LayoutBuilder with Text widget width (0) | 2021.09.03 |
Flutter - Easy Overlay (feat. toast) (0) | 2021.08.13 |
Comments