Horizontal AnimatedSliverLists do not animate
#100931
Labels
a: animation
Animation APIs
f: scrolling
Viewports, list views, slivers, etc.
found in release: 2.10
Found to occur in 2.10
found in release: 2.13
Found to occur in 2.13
framework
flutter/packages/flutter repository. See also f: labels.
has reproducible steps
The issue has been confirmed reproducible and is ready to work on
P2
Important issues not at the top of the work list
team-framework
Owned by Framework team
triaged-framework
Triaged by Framework team
Comments
danagbemava-nc
changed the title
AnimatedSliverLists neither scroll nor animateAnimatedSliverLists do not animate
|
Hi @benthillerkus, the list not scrolling when it is horizontal is due to https://docs.flutter.dev/release/breaking-changes/default-scroll-behavior-drag. If you follow the doc, you can make it scroll horizontally. I can reproduce the listview not animating when the videoScreen.Recording.2022-03-29.at.08.04.48.movcomplete sample// Press add to add new elements to the list
// Press the other button to change the direction from vertical to horizontal
// Observe that the animations break and that the content won't scroll either
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class MyCustomScrollBehavior extends MaterialScrollBehavior {
// Override behavior methods and getters like dragDevices
@override
Set<PointerDeviceKind> get dragDevices => {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
// etc.
};
}
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
scrollBehavior: MyCustomScrollBehavior(),
theme: ThemeData.from(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurpleAccent),
),
darkTheme: ThemeData.from(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.deepPurpleAccent, brightness: Brightness.dark),
),
themeMode: ThemeMode.system,
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _listKey = GlobalKey<SliverAnimatedListState>();
var _scrollDirection = Axis.vertical;
@override
Widget build(BuildContext context) {
return Scaffold(
persistentFooterButtons: [
TextButton.icon(
label: const Text("Add"),
icon: const Icon(Icons.add),
onPressed: () => _listKey.currentState?.insertItem(0),
),
TextButton.icon(
label: const Text("Change direction"),
icon: const Icon(Icons.rotate_left),
onPressed: () => setState(() => _scrollDirection =
_scrollDirection == Axis.vertical
? Axis.horizontal
: Axis.vertical),
)
],
body: CustomScrollView(
scrollDirection: _scrollDirection,
slivers: [
SliverAnimatedList(
key: _listKey,
itemBuilder: (BuildContext context, int index,
Animation<double> animation) =>
SizeTransition(
sizeFactor: animation,
child: const FlutterLogo(),
),
)
],
),
);
}
}
flutter doctor -v |
danagbemava-nc
added
has reproducible steps
|
@benthillerkus Hi, thanks for reporting, you can special the item's axis for your proposal: body: CustomScrollView(
scrollDirection: _scrollDirection,
slivers: [
SliverAnimatedList(
key: _listKey,
itemBuilder: (BuildContext context, int index,
Animation<double> animation) {
print('index $index $animation');
return SizeTransition(
sizeFactor: animation,
axis: _scrollDirection,
child: const FlutterLogo(),
);
},
)
],
), |
xu-baolin
added
the
waiting for customer response
|
Yeah, at some point I got there too 😅 I think the situation could be improved, though, by
|
github-actions
bot
removed
the
waiting for customer response
flutter-triage-bot
bot
added
team-framework
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Steps to Reproduce
flutter runon the code sampleAddbutton to add a lot ofFlutterLogosChange Directionbutton...Expected results:
With both horizontal and vertical scroll direction, adding elements is animated. Also, in both directions the content should be scrollable if it overflows.
Actual results:
Everything works with
scrollDirection == Axis.vertical, but withscrollDirection == Axis.horizontalnew elements won't animate in and the content will just overflow, without the user being able to scroll.Code sample
Example on Dartpad
Logs
The text was updated successfully, but these errors were encountered: