mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
f794cf9d97
fixes [Expose animation parameters for the [ExpansionTile] widget](https://github.com/flutter/flutter/issues/138047) ### Description Add `AnimationStyle` to the `ExpansionTile` widget to override the default expand and close animation. Syntax: ```dart child: ExpansionTile( title: const Text('Tap to expand'), expansionAnimationStyle: AnimationStyle( duration: Durations.extralong1, curve: Easing.emphasizedAccelerate, ), children: const <Widget>[FlutterLogo(size: 200)], ), ``` ### Code sample <details> <summary>expand to view the code sample</summary> ```dart // Copyright 2014 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import 'package:flutter/material.dart'; /// Flutter code sample for [ExpansionTile] and [AnimationStyle]. void main() { runApp(const ExpansionTileAnimationStyleApp()); } enum AnimationStyles { defaultStyle, custom, none } const List<(AnimationStyles, String)> animationStyleSegments = <(AnimationStyles, String)>[ (AnimationStyles.defaultStyle, 'Default'), (AnimationStyles.custom, 'Custom'), (AnimationStyles.none, 'None'), ]; class ExpansionTileAnimationStyleApp extends StatefulWidget { const ExpansionTileAnimationStyleApp({super.key}); @override State<ExpansionTileAnimationStyleApp> createState() => _ExpansionTileAnimationStyleAppState(); } class _ExpansionTileAnimationStyleAppState extends State<ExpansionTileAnimationStyleApp> { Set<AnimationStyles> _animationStyleSelection = <AnimationStyles>{AnimationStyles.defaultStyle}; AnimationStyle? _animationStyle; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ SegmentedButton<AnimationStyles>( selected: _animationStyleSelection, onSelectionChanged: (Set<AnimationStyles> styles) { setState(() { _animationStyleSelection = styles; switch (styles.first) { case AnimationStyles.defaultStyle: _animationStyle = null; case AnimationStyles.custom: _animationStyle = AnimationStyle( curve: Easing.emphasizedAccelerate, duration: Durations.extralong1, ); case AnimationStyles.none: _animationStyle = AnimationStyle.noAnimation; } }); }, segments: animationStyleSegments .map<ButtonSegment<AnimationStyles>>(((AnimationStyles, String) shirt) { return ButtonSegment<AnimationStyles>(value: shirt.$1, label: Text(shirt.$2)); }) .toList(), ), const SizedBox(height: 20), ExpansionTile( expansionAnimationStyle: _animationStyle, title: const Text('ExpansionTile'), children: const <Widget>[ ListTile(title: Text('Expanded Item 1')), ListTile(title: Text('Expanded Item 2')), ], ) ], ), ), ), ); } } ``` </details> Related to https://github.com/flutter/flutter/pull/138721.
64 lines
1.8 KiB
Dart
64 lines
1.8 KiB
Dart
// Copyright 2014 The Flutter Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_api_samples/material/expansion_tile/expansion_tile.2.dart' as example;
|
|
import 'package:flutter_test/flutter_test.dart';
|
|
|
|
void main() {
|
|
testWidgets('ExpansionTile animation can be customized using AnimationStyle', (WidgetTester tester) async {
|
|
await tester.pumpWidget(
|
|
const example.ExpansionTileAnimationStyleApp(),
|
|
);
|
|
|
|
double getHeight(WidgetTester tester) {
|
|
return tester.getSize(find.byType(ExpansionTile)).height;
|
|
}
|
|
|
|
expect(getHeight(tester), 58.0);
|
|
|
|
// Test the default animation style.
|
|
await tester.tap(find.text('ExpansionTile'));
|
|
await tester.pump();
|
|
await tester.pump(const Duration(milliseconds: 100));
|
|
|
|
expect(getHeight(tester), closeTo(93.4, 0.1));
|
|
|
|
await tester.pumpAndSettle();
|
|
|
|
expect(getHeight(tester), 170.0);
|
|
|
|
// Tap to collapse.
|
|
await tester.tap(find.text('ExpansionTile'));
|
|
await tester.pumpAndSettle();
|
|
|
|
// Test the custom animation style.
|
|
await tester.tap(find.text('Custom'));
|
|
await tester.pumpAndSettle();
|
|
|
|
await tester.tap(find.text('ExpansionTile'));
|
|
await tester.pump();
|
|
await tester.pump(const Duration(milliseconds: 100));
|
|
|
|
expect(getHeight(tester), closeTo(59.2, 0.1));
|
|
|
|
await tester.pumpAndSettle();
|
|
|
|
expect(getHeight(tester), 170.0);
|
|
|
|
// Tap to collapse.
|
|
await tester.tap(find.text('ExpansionTile'));
|
|
await tester.pumpAndSettle();
|
|
|
|
// Test the no animation style.
|
|
await tester.tap(find.text('None'));
|
|
await tester.pumpAndSettle();
|
|
|
|
await tester.tap(find.text('ExpansionTile'));
|
|
await tester.pump();
|
|
|
|
expect(getHeight(tester), 170.0);
|
|
});
|
|
}
|