I am trying to recreate this UI:
Collapsed
Expanded
I first created the custom container shape using a ClipPath with a CustomClipper:
class FolderClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
Offset c1 = Offset(size.width * .0825, size.height * .048);
Offset c2 = Offset(size.width * .021, size.height * .0075);
Offset end = Offset(size.width * .12, size.height * 0);
path.moveTo(0, size.height * 0.0775);
path.cubicTo(c1.dx, c1.dy, c2.dx, c2.dy, end.dx, end.dy);
path.lineTo(size.width * .71, end.dy);
Offset c1_2 = Offset(size.width * .829, size.height * .0002);
Offset c2_2 = Offset(size.width * .7497, size.height * .06495);
Offset end_2 = Offset(size.width * .8602, size.height * .0652);
path.cubicTo(c1_2.dx, c1_2.dy, c2_2.dx, c2_2.dy, end_2.dx, end_2.dy);
path.lineTo(size.width, end_2.dy);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return false;
}
This draws the shape as expected when it takes up the full screen:
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(top: 16.0),
child: ClipPath(
clipper: FolderClipper(),
child: Container(
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
color: Colors.grey,
),
child: const Center(
child: Text('Text'),
),
),
),
),
);
shape drawn with a large height
Approach 1
To put this shape into an expandable list, I used the containers with different content (child) in a CustomScrollView. I had to use a collapsed and expanded container, which will basically be the same custom clipped container that I created earlier in the full screen, except the expanded one will have the grid of cards. I set a height when the container is in the collapsed state because otherwise it won't show if it has no children (and if I add a child that takes a large space, the collapsed item will take up a large height, which is not what I want). Setting that height however distorts the shape and so it doesn't look right (it only looks right when it has a relatively large height). I put the custom shape in a stack and added a container with a color that matches the preceding container's color under it so that it looks as if it's stacked.
Issues:
- Given different heights, the custom shape becomes distorted and does not have the same proportions (the curves don't look the same for different heights).
- There are lines that appear between widgets (same colored widgets that touch) that I think might be a bug in flutter (I'm using flutter 2.10.4 and it will be difficult to upgrade). I think these lines are due to the height and pixel density not quite matching and so the background can be seen.
[kinda worked] I tried to fix this by using Transform.translate with a y-axis offset of -8 on the background container that has the color of the preceding list item. This seems to work for the most part (since I don't care about the bottom of the container being shifted up). This however doesn't fix the elevation issue (issue #3).
I also tried to fix this by adding a similar CustomScrollView below the current one so that the background color would always match the expandable panel, but how will I know the size of the panel when it expands so that the scrollview with the background colors would match (I had their scroll controllers linked), but that wasn't the best and added complexity.
- The elevation is not working on the last item (which is supposed to be an inverse-ish shape that I haven't done yet, I'm just reusing the shape I have to test it out). I added a border to try and make it more prominent, but that background line (between same colored widgets) is messing things up.
- In general the shadow/elevation for each item in the list was not showing. I tried wrapping the container in a Material widget and gave it an elevation and I also tried using BoxShadow.
Here's what the code looks like after my fix attempts:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'folder_clipper.dart';
import 'folder_clipper2.dart';
class MyAttempt extends StatelessWidget {
MyAttempt({Key? key}) : super(key: key);
RxInt _selectedIndex = (-1).obs;
final List<Color> colors = [
Color(0xFFBDBDBD),
Colors.grey,
Color(0xFF757575)
];
final int optionsCount = 5;
final int gridOptionCount = 2;
ScrollController sc = ScrollController();
//ScrollController scBack = ScrollController();
@override
Widget build(BuildContext context) {
// sc.addListener(() {
// scBack.jumpTo(sc.offset);
// });
return Padding(
padding: const EdgeInsets.only(top: 16.0),
child: Stack(
children: [
// CustomScrollView(
// controller: sc,
// slivers: [
// SliverList(
// delegate: SliverChildBuilderDelegate(
// (BuildContext context, int index) {
// return Container(
// decoration: BoxDecoration(
// color: index == 0
// ? Colors.transparent
// : colors[(index - 1) % colors.length],
// ),
// width: double.infinity,
// height: _selectedIndex.value == index
// ? null
// : (Get.height * .1),
// child: Obx(() => _selectedIndex.value == index
// ? gridView(index)
// : const SizedBox.shrink()),
// );
// },
// childCount: optionsCount,
// ),
// ),
// SliverFillRemaining(
// child: GestureDetector(
// onTap: () {
// if (_selectedIndex.value == 2)
// _selectedIndex.value = -1;
// else
// _selectedIndex.value = 2;
// },
// child: Stack(
// children: [
// Container(
// color: colors[(optionsCount - 1) % colors.length],
// width: double.infinity,
// ),
// ClipPath(
// clipper: FolderClipper2(),
// child: Material(
// elevation: 10,
// child: Container(
// decoration: BoxDecoration(
// color: colors[(optionsCount - 1) % colors.length],
// border: const Border(
// top:
// BorderSide(width: 1.0, color: Colors.black),
// ),
// ),
// ),
// ),
// ),
// ],
// ),
// ),
// )
// ],
// ),
CustomScrollView(
controller: sc,
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Stack(
children: [
Transform.translate(
offset: Offset(0, -8),
child: Container(
decoration: BoxDecoration(
color: index == 0
? Colors.transparent
: colors[(index - 1) % colors.length],
),
width: double.infinity,
height: ((Get.height * .1)),
),
),
ClipPath(
clipper: FolderClipper(),
child: Material(
child: GestureDetector(
onTap: () {
if (_selectedIndex.value == index) {
_selectedIndex.value = -1;
} else {
_selectedIndex.value = index;
}
},
child: Obx(
() => Stack(
children: [
Container(
decoration: BoxDecoration(
color: colors[index % colors.length],
),
height: _selectedIndex.value != index
? (Get.height * .1)
: null,
width: double.infinity,
child: Obx(() =>
_selectedIndex.value == index
? gridView(index)
: const SizedBox.shrink()),
),
Container(
margin: EdgeInsets.only(
top: Get.height * .025,
left: Get.width * .125),
child: Text(
"Option $index",
style: const TextStyle(
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
),
],
);
},
childCount: optionsCount,
),
),
SliverFillRemaining(
child: Stack(
children: [
Transform.translate(
offset: Offset(0, -8),
child: Container(
color: colors[(optionsCount - 1) % colors.length],
width: double.infinity,
),
),
ClipPath(
clipper: FolderClipper2(),
child: Material(
elevation: 10,
child: Container(
decoration: BoxDecoration(
boxShadow: const [
BoxShadow(
color: Colors.black,
spreadRadius: 5,
blurRadius: 5,
offset:
Offset(0, -8), // changes position of shadow
),
],
color: colors[(optionsCount - 1) % colors.length],
border: const Border(
top: BorderSide(width: 1.0, color: Colors.black),
),
),
),
),
),
],
),
)
],
),
],
),
);
}
gridView(index) {
return GridView.count(
shrinkWrap: true,
primary: true,
padding: EdgeInsets.only(
left: Get.width * .15,
right: Get.width * .15,
top: Get.width * .15,
bottom: 16),
crossAxisSpacing: Get.width * .075, //24,
mainAxisSpacing: Get.width * .075, //16,
crossAxisCount: 2,
children: <Widget>[
for (int i = 0; i < (gridOptionCount * index); i++)
Card(
elevation: 10,
child: Container(
//width: Get.width * .05,
//height: Get.width * .05,
color: Colors.white,
child: Center(
child: Container(
child: Text(
"option $i",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
)),
),
],
);
}
}
and here is what it looks like, it's kind of working, but doesn't look right mainly due to the CustomClipper being distorted due to the height of the container and the shadows not working as expected:
Approach 2
To put this shape into an expandable list, I used the expandable package on pub.dev in a CustomScrollView. I set a header and expanded widget, which will basically be the same custom clipped container that I created, except the expanded one will have the grid of cards. I set a height when the container is in the header only state because otherwise it will be so short if it has no children (and if I add a child that takes a large space, the collapsed item will take up a large height, which is not what I want). Setting that height however distorts the shape and so it doesn't look right (it only looks right when it has a relatively large height). I put the custom shape in a stack and added a container with a color that matches the preceding container's color under it so that it looks as if it's stacked. I did not use the collapsed widget (set it to SizedBox.shrink).
Here's the code:
import 'package:expandable/expandable.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'folder_clipper.dart';
import 'folder_clipper2.dart';
class MyAttempt2 extends StatelessWidget {
MyAttempt2({Key? key}) : super(key: key);
RxInt _selectedIndex = (-1).obs;
final List<Color> colors = [
Color(0xFFBDBDBD),
Colors.grey,
Color(0xFF757575)
];
final int optionsCount = 5;
final int gridOptionCount = 2;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 16.0),
child: CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Stack(
children: [
ExpandableNotifier(
child: Stack(
children: [
Transform.translate(
offset: Offset(0, -8),
child: Container(
decoration: BoxDecoration(
color: index == 0
? Colors.transparent
: colors[(index - 1) % colors.length],
),
width: double.infinity,
height: ((Get.height * .1)),
),
),
ClipPath(
clipper: FolderClipper(),
child: Container(
//height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: colors[index % colors.length],
),
child: ScrollOnExpand(
scrollOnExpand: true,
scrollOnCollapse: false,
child: ExpandablePanel(
theme: const ExpandableThemeData(
headerAlignment:
ExpandablePanelHeaderAlignment.center,
tapBodyToCollapse: true,
),
header: Container(
height: ((Get.height * .1)),
child: Padding(
padding: EdgeInsets.all(10),
child: Text(
"ExpandablePanel",
style: Theme.of(context)
.textTheme
.bodyText2,
)),
),
collapsed: SizedBox.shrink(),
// Text(
// loremIpsum,
// softWrap: true,
// maxLines: 2,
// overflow: TextOverflow.ellipsis,
// ),
expanded: SingleChildScrollView(
child: gridView(index)),
builder: (_, collapsed, expanded) {
return Padding(
padding: EdgeInsets.only(
left: 0, right: 0, bottom: 0),
child: Expandable(
collapsed: collapsed,
expanded: expanded,
theme: const ExpandableThemeData(
crossFadePoint: 0),
),
);
},
),
),
),
//margin: EdgeInsets.zero,
//clipBehavior: Clip.antiAlias,
),
],
),
),
],
);
},
childCount: optionsCount,
),
),
SliverFillRemaining(
child: Stack(
children: [
Container(
color: colors[(optionsCount - 1) % colors.length],
width: double.infinity,
),
ClipPath(
clipper: FolderClipper2(),
child: Material(
elevation: 10,
child: Container(
decoration: BoxDecoration(
boxShadow: const [
BoxShadow(
color: Colors.black,
spreadRadius: 5,
blurRadius: 5,
offset: Offset(0, -8), // changes position of shadow
),
],
color: colors[(optionsCount - 1) % colors.length],
border: const Border(
top: BorderSide(width: 1.0, color: Colors.black),
),
),
),
),
),
],
),
)
],
),
);
}
gridView(index) {
return GridView.count(
shrinkWrap: true,
primary: true,
padding: EdgeInsets.only(
left: Get.width * .15,
right: Get.width * .15,
top: Get.width * .15,
bottom: 16),
crossAxisSpacing: Get.width * .075, //24,
mainAxisSpacing: Get.width * .075, //16,
crossAxisCount: 2,
children: <Widget>[
for (int i = 0; i < (gridOptionCount * index); i++)
Card(
elevation: 10,
child: Container(
//width: Get.width * .05,
//height: Get.width * .05,
color: Colors.white,
child: Center(
child: Container(
child: Text(
"option $i",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
)),
),
],
);
}
}
and this is what it looks like:
Similar issues as approach 1.
UPDATE
I managed to add a height factor to the CustomClipper so that all offsets are relative to the height I based it off of and that seemed to get the shape to be consistent! Will probably do the same for the width.
Here's the new code:
class FolderClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
print("${size.width} - ${size.height}");
double heightFactor = size.height / 667;
double widthFactor = size.width / 375;
Path path = Path();
Offset c1 = Offset(size.width * .0825, size.height * .048);
Offset c2 = Offset(size.width * .021, size.height * .0075);
Offset end = Offset(size.width * .12, size.height * 0);
// if (size.height < 100)
// path.moveTo(0, size.height * .5);
// else if (size.height < 300)
// path.moveTo(0, size.height * .15);
// else
path.moveTo(0, size.height * 0.0775 / heightFactor);
path.cubicTo(c1.dx, c1.dy / heightFactor, c2.dx, c2.dy / heightFactor,
end.dx, end.dy / heightFactor);
path.lineTo(size.width * .71, end.dy / heightFactor);
Offset c1_2 = Offset(size.width * .829, size.height * .0002);
Offset c2_2 = Offset(size.width * .7497, size.height * .06495);
Offset end_2;
// if (size.height < 100)
// end_2 = Offset(size.width * .8602, size.height * .45);
// else if (size.height < 300)
// end_2 = Offset(size.width * .8602, size.height * .15);
// else
end_2 = Offset(size.width * .8602, size.height * .0652);
path.cubicTo(c1_2.dx, c1_2.dy / heightFactor, c2_2.dx,
c2_2.dy / heightFactor, end_2.dx, end_2.dy / heightFactor);
path.lineTo(size.width, end_2.dy / heightFactor);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return false;
}
This is what it looks like now:
expanded state - issue with SliverFillRemaining line on top and shadows
So I believe the main issue remaining here is with the shadow and the space between the last item and the SliverFillRemainingSection (and its shadow as well)