-
-
Notifications
You must be signed in to change notification settings - Fork 558
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.
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
Action pane with rounded corners #173
Comments
Ok I will look at it for while doing the refactoring. |
I was able to accomplish this by wrapping the Action in an OverflowBox w/LayoutBuilder:
hope this helps! |
Should be ok with 1.0. Can you test it? |
This solution doesn't work any more
|
There is a |
@letsar I am not sure this is enough, if you take a look at his screenshot, it has the radius to the opposite side. |
Hi, I also made my own attempt, but IT ONLY WORKS BY ADDING ActionPane(
motion: const BehindMotion(),
extentRatio: 0.25,
children: [
Expanded(
child: LayoutBuilder(builder: (context, constraints) {
return OverflowBox(
alignment: Alignment.centerLeft,
maxWidth: constraints.maxWidth + 15,
child: GestureDetector(
onTap: () {},
child: Container(
padding: const EdgeInsets.only(right: 15),
decoration: const BoxDecoration(
borderRadius: BorderRadius.horizontal(left: Radius.circular(15)),
color: Colors.blue,
),
alignment: Alignment.center,
child: const Icon(Icons.copy, color: Colors.white),
),
),
);
}),
),
],
) |
Did it by overflowing the LayoutBuilder(builder: (context, constraints) {
return Slidable(
startActionPane: _buildStartActionPane,
endActionPane: _buildEndActionPane,
child: OverflowBox(
alignment: Alignment.center, // Alignment.center for both sides (Alignment.centerRight for startActionPane only and Alignment.centerLeft for endActionPane only)
maxWidth: constraints.maxWidth + 30, // 2 times the borderRadius for left and right
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.white,
boxShadow: const [
BoxShadow(
color: Colors.black26,
blurRadius: 3,
offset: Offset(1, 3),
),
],
),
child: _content,
),
),
);
}) The only issue is that the |
I have
Card
s that are wrapped withSlidable
widgets.What I want
When the cards slide I want the action pane corners to be rounded as the Card:
(From material design documentation, specifically this video)
What I tried
Wrapping the action pane (
SlidableBehindActionPane
in this case) withClipRRect
.What happened
the behaviour is inconsistent.
Initially, the child is also clipped, but after sliding and sliding back the child is no longer clipped.
The text was updated successfully, but these errors were encountered: