Rounded corner Card Widget with right border in flutterHow do I add a border to a widget, in Flutter?Building a card widget [Flutter]Flutter Cards - How to Loop a card widgets in FlutterHow to offset a scaffold widget in Flutter?Adding Card to ListViewRounded Corners Image in FlutterFlutter: How can I select an image icon in a list without all icons in the list being selected?Is this the best choice of flutter widgets to get the ListView I have in mind & in the diagram attached?Pass data to another screen when Gridview item is clickedRound corners of WebView widget
Good examples of "two is easy, three is hard" in computational sciences
At what point can a confirmation be established between words of similar meaning in context?
Cycling to work - 30mile return
Have GoT's showrunners reacted to the poor reception of the final season?
Working hours and productivity expectations for game artists and programmers
When did Britain learn about the American Declaration of Independence?
Alternative classical explanation of the Stern-Gerlach Experiment?
FIFO data structure in pure C
How can sister protect herself from impulse purchases with a credit card?
Is it a good idea to teach algorithm courses using pseudocode instead of a real programming language?
Is my company merging branches wrong?
How to say "that" as in "the cow that ate" in Japanese?
Why does the setuid bit work inconsistently?
Save my secrets!
Hotel booking: Why is Agoda much cheaper than booking.com?
What's is the easiest way to purchase a stock and hold it
How come Arya Stark wasn't hurt by this in Game of Thrones Season 8 Episode 5?
What were the "pills" that were added to solid waste in Apollo 7?
Parse a C++14 integer literal
How do you cope with rejection?
Is my homebrew Awakened Bear race balanced?
Driving a school bus in the USA
Is it possible to determine from only a photo of a cityscape whether it was taken close with wide angle or from a distance with zoom?
Is there a language that let's you use a try block without a catch block?
Rounded corner Card Widget with right border in flutter
How do I add a border to a widget, in Flutter?Building a card widget [Flutter]Flutter Cards - How to Loop a card widgets in FlutterHow to offset a scaffold widget in Flutter?Adding Card to ListViewRounded Corners Image in FlutterFlutter: How can I select an image icon in a list without all icons in the list being selected?Is this the best choice of flutter widgets to get the ListView I have in mind & in the diagram attached?Pass data to another screen when Gridview item is clickedRound corners of WebView widget
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I have to create a Card like this, I had written below code to achieve the desired UI, but it didn't work as expected,
Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10),
topRight: Radius.circular(10)),
side: BorderSide(width: 5, color: Colors.green)),
child: ListTile(),
)
the above code produced this, whereas using below code
Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
)
generated this output. How can I create the required UI in flutter?
dart
flutter asked Mar 23 at 17:36
David BronnDavid Bronn
613
add a comment |
I have to create a Card like this, I had written below code to achieve the desired UI, but it didn't work as expected,
Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10),
topRight: Radius.circular(10)),
side: BorderSide(width: 5, color: Colors.green)),
child: ListTile(),
)
the above code produced this, whereas using below code
Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
)
generated this output. How can I create the required UI in flutter?
dart
flutter asked Mar 23 at 17:36
David BronnDavid Bronn
613
Maybe you can try wrapping your card with ClipOval
– mirkancal
Mar 23 at 18:16
add a comment |
I have to create a Card like this, I had written below code to achieve the desired UI, but it didn't work as expected,
Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10),
topRight: Radius.circular(10)),
side: BorderSide(width: 5, color: Colors.green)),
child: ListTile(),
)
the above code produced this, whereas using below code
Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
)
generated this output. How can I create the required UI in flutter?
dart
flutter asked Mar 23 at 17:36
David BronnDavid Bronn
613
I have to create a Card like this, I had written below code to achieve the desired UI, but it didn't work as expected,
Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10),
topRight: Radius.circular(10)),
side: BorderSide(width: 5, color: Colors.green)),
child: ListTile(),
)
the above code produced this, whereas using below code
Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
)
generated this output. How can I create the required UI in flutter?
dart
flutter dart
flutter asked Mar 23 at 17:36
David BronnDavid Bronn
613
asked Mar 23 at 17:36
David BronnDavid Bronn
613
asked Mar 23 at 17:36
David BronnDavid Bronn
613
asked Mar 23 at 17:36
David BronnDavid Bronn
613
asked Mar 23 at 17:36
David BronnDavid Bronn
613
613
Maybe you can try wrapping your card with ClipOval
– mirkancal
Mar 23 at 18:16
add a comment |
Maybe you can try wrapping your card with ClipOval
– mirkancal
Mar 23 at 18:16
Maybe you can try wrapping your card with ClipOval
– mirkancal
Mar 23 at 18:16
Maybe you can try wrapping your card with ClipOval
– mirkancal
Mar 23 at 18:16
add a comment |
2 Answers
2
active
oldest
votes
I have used ClipPath to achieve the UI asked in the question, check out the below code.
Card(
elevation: 2,
child: ClipPath(
child: Container(
height: 100,
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.green, width: 5))),
),
clipper: ShapeBorderClipper(shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(3))),
),
)
This gives the below output,
If there is a better way to achieve said result kindly do answer.
answered Mar 23 at 19:53
David BronnDavid Bronn
613
add a comment |
You should place your Card inside a ClipRRect widget :
return ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
),
);
But I advise you to reduce the value of elevation because it is distorting the small circular borders.
answered Mar 23 at 18:16
Mazin IbrahimMazin Ibrahim
1,6972817
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55316539%2frounded-corner-card-widget-with-right-border-in-flutter%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I have used ClipPath to achieve the UI asked in the question, check out the below code.
Card(
elevation: 2,
child: ClipPath(
child: Container(
height: 100,
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.green, width: 5))),
),
clipper: ShapeBorderClipper(shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(3))),
),
)
This gives the below output,
If there is a better way to achieve said result kindly do answer.
answered Mar 23 at 19:53
David BronnDavid Bronn
613
add a comment |
I have used ClipPath to achieve the UI asked in the question, check out the below code.
Card(
elevation: 2,
child: ClipPath(
child: Container(
height: 100,
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.green, width: 5))),
),
clipper: ShapeBorderClipper(shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(3))),
),
)
This gives the below output,
If there is a better way to achieve said result kindly do answer.
answered Mar 23 at 19:53
David BronnDavid Bronn
613
add a comment |
I have used ClipPath to achieve the UI asked in the question, check out the below code.
Card(
elevation: 2,
child: ClipPath(
child: Container(
height: 100,
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.green, width: 5))),
),
clipper: ShapeBorderClipper(shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(3))),
),
)
This gives the below output,
If there is a better way to achieve said result kindly do answer.
answered Mar 23 at 19:53
David BronnDavid Bronn
613
I have used ClipPath to achieve the UI asked in the question, check out the below code.
Card(
elevation: 2,
child: ClipPath(
child: Container(
height: 100,
decoration: BoxDecoration(
border: Border(right: BorderSide(color: Colors.green, width: 5))),
),
clipper: ShapeBorderClipper(shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(3))),
),
)
This gives the below output,
If there is a better way to achieve said result kindly do answer.
answered Mar 23 at 19:53
David BronnDavid Bronn
613
answered Mar 23 at 19:53
David BronnDavid Bronn
613
answered Mar 23 at 19:53
David BronnDavid Bronn
613
answered Mar 23 at 19:53
David BronnDavid Bronn
613
613
add a comment |
add a comment |
You should place your Card inside a ClipRRect widget :
return ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
),
);
But I advise you to reduce the value of elevation because it is distorting the small circular borders.
answered Mar 23 at 18:16
Mazin IbrahimMazin Ibrahim
1,6972817
add a comment |
You should place your Card inside a ClipRRect widget :
return ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
),
);
But I advise you to reduce the value of elevation because it is distorting the small circular borders.
answered Mar 23 at 18:16
Mazin IbrahimMazin Ibrahim
1,6972817
add a comment |
You should place your Card inside a ClipRRect widget :
return ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
),
);
But I advise you to reduce the value of elevation because it is distorting the small circular borders.
answered Mar 23 at 18:16
Mazin IbrahimMazin Ibrahim
1,6972817
You should place your Card inside a ClipRRect widget :
return ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Card(
elevation: 5,
shape: Border(right: BorderSide(color: Colors.red, width: 5)),
child: ListTile(),
),
);
But I advise you to reduce the value of elevation because it is distorting the small circular borders.
answered Mar 23 at 18:16
Mazin IbrahimMazin Ibrahim
1,6972817
answered Mar 23 at 18:16
Mazin IbrahimMazin Ibrahim
1,6972817
answered Mar 23 at 18:16
Mazin IbrahimMazin Ibrahim
1,6972817
answered Mar 23 at 18:16
Mazin IbrahimMazin Ibrahim
1,6972817
1,6972817
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55316539%2frounded-corner-card-widget-with-right-border-in-flutter%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Maybe you can try wrapping your card with ClipOval
– mirkancal
Mar 23 at 18:16