Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Made MergeableMaterial dividers animated seamlessly. #5857

Merged
merged 1 commit into from
Sep 14, 2016
Merged

Made MergeableMaterial dividers animated seamlessly. #5857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
81 changes: 49 additions & 32 deletions packages/flutter/lib/src/material/mergeable_material.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ class _MergeableMaterialState extends State<MergeableMaterial> {
_animationTuples[child.key] = null;
}

bool _closingGap(int index) {
bool _isClosingGap(int index) {
if (index < _children.length - 1 && _children[index] is MaterialGap) {
return _animationTuples[_children[index].key].controller.status ==
AnimationStatus.reverse;
Expand Down Expand Up @@ -284,7 +284,7 @@ class _MergeableMaterialState extends State<MergeableMaterial> {
i += 1;

// Skip old keys.
while (oldOnly.contains(_children[j].key) || _closingGap(j))
while (oldOnly.contains(_children[j].key) || _isClosingGap(j))
j += 1;

final int newLength = i - startNew;
Expand Down Expand Up @@ -479,28 +479,12 @@ class _MergeableMaterialState extends State<MergeableMaterial> {
);
}

List<Widget> _divideSlices(BuildContext context, List<Widget> slices, List<Key> keys) {
if (config.hasDividers) {
List<Widget> divided = <Widget>[];

for (int i = 0; i < slices.length; i += 1) {
divided.add(
new DecoratedBox(
key: keys[i],
decoration: i != slices.length - 1 ? new BoxDecoration(
border: new Border(
bottom: new BorderSide(color: Theme.of(context).dividerColor)
)
) : new BoxDecoration(),
child: slices[i]
)
);
}

return divided;
} else {
return slices;
}
bool _willNeedDivider(int index) {
if (index < 0)
return false;
if (index >= _children.length)
return false;
return _children[index] is MaterialSlice || _isClosingGap(index);
}

@override
Expand All @@ -509,7 +493,6 @@ class _MergeableMaterialState extends State<MergeableMaterial> {

final List<Widget> widgets = <Widget>[];
List<Widget> slices = <Widget>[];
List<Key> keys = <Key>[];
int i;

for (i = 0; i < _children.length; i += 1) {
Expand All @@ -524,12 +507,11 @@ class _MergeableMaterialState extends State<MergeableMaterial> {
),
child: new BlockBody(
mainAxis: config.mainAxis,
children: _divideSlices(context, slices, keys)
children: slices
)
)
);
slices = <Widget>[];
keys = <Key>[];

widgets.add(
new SizedBox(
Expand All @@ -539,14 +521,50 @@ class _MergeableMaterialState extends State<MergeableMaterial> {
);
} else {
MaterialSlice slice = _children[i];
Widget child = slice.child;

if (config.hasDividers) {
final bool hasTopDivider = _willNeedDivider(i - 1);
final bool hasBottomDivider = _willNeedDivider(i + 1);

Border border;
final BorderSide divider = new BorderSide(
color: Theme.of(context).dividerColor,
width: 0.5
);

if (i == 0) {
border = new Border(
bottom: hasBottomDivider ? divider : BorderSide.none
);
} else if (i == _children.length - 1) {
border = new Border(
top: hasTopDivider ? divider : BorderSide.none
);
} else {
border = new Border(
top: hasTopDivider ? divider : BorderSide.none,
bottom: hasBottomDivider ? divider : BorderSide.none
);
}

assert(border != null);

child = new AnimatedContainer(
key: new _MergeableMaterialSliceKey(_children[i].key),
decoration: new BoxDecoration(border: border),
duration: kThemeAnimationDuration,
curve: Curves.fastOutSlowIn,
child: child
);
}

slices.add(
new Material(
type: MaterialType.transparency,
child: slice.child
child: child
)
);
keys.add(new _MergeableMaterialSliceKey(_children[i].key));
}
}

Expand All @@ -560,12 +578,11 @@ class _MergeableMaterialState extends State<MergeableMaterial> {
),
child: new BlockBody(
mainAxis: config.mainAxis,
children: _divideSlices(context, slices, keys)
children: slices
)
)
);
slices = <Widget>[];
keys = <Key>[];
}

return new _MergeableMaterialBlockBody(
Expand All @@ -578,7 +595,7 @@ class _MergeableMaterialState extends State<MergeableMaterial> {
}

// The parent hierarchy can change and lead to the slice being
// rebuilt. Usinga global key solves the issue.
// rebuilt. Using a global key solves the issue.
class _MergeableMaterialSliceKey extends GlobalKey {
const _MergeableMaterialSliceKey(this.value) : super.constructor();

Expand Down
25 changes: 15 additions & 10 deletions packages/flutter/test/material/mergeable_material_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1014,12 +1014,14 @@ void main() {
matches(getBorderRadius(tester, 1), RadiusType.Round, RadiusType.Round);
});

bool isDivider(Widget widget) {
bool isDivider(Widget widget, bool top, bool bottom) {
final DecoratedBox box = widget;
final BorderSide side = new BorderSide(color: const Color(0x1F000000), width: 0.5);

return box.decoration == new BoxDecoration(
border: new Border(
bottom: new BorderSide(color: const Color(0x1F000000))
top: top ? side : BorderSide.none,
bottom: bottom ? side : BorderSide.none
)
);
}
Expand Down Expand Up @@ -1068,10 +1070,10 @@ void main() {
List<Widget> boxes = tester.widgetList(find.byType(DecoratedBox)).toList();
int offset = 3;

expect(isDivider(boxes[offset]), isTrue);
expect(isDivider(boxes[offset + 1]), isTrue);
expect(isDivider(boxes[offset + 2]), isTrue);
expect(isDivider(boxes[offset + 3]), isFalse);
expect(isDivider(boxes[offset], false, true), isTrue);
expect(isDivider(boxes[offset + 1], true, true), isTrue);
expect(isDivider(boxes[offset + 2], true, true), isTrue);
expect(isDivider(boxes[offset + 3], true, false), isTrue);

await tester.pumpWidget(
new Scaffold(
Expand Down Expand Up @@ -1116,13 +1118,16 @@ void main() {
)
);

// Wait for dividers to shrink.
await tester.pump(const Duration(milliseconds: 200));

boxes = tester.widgetList(find.byType(DecoratedBox)).toList();
offset = 3;

expect(isDivider(boxes[offset]), isTrue);
expect(isDivider(boxes[offset + 1]), isFalse);
expect(isDivider(boxes[offset], false, true), isTrue);
expect(isDivider(boxes[offset + 1], true, false), isTrue);
// offset + 2 is gap
expect(isDivider(boxes[offset + 3]), isTrue);
expect(isDivider(boxes[offset + 4]), isFalse);
expect(isDivider(boxes[offset + 3], false, true), isTrue);
expect(isDivider(boxes[offset + 4], true, false), isTrue);
});
}