How to clip the corners of Positioned widget in flutter
620
Solution 1
@Ketan if you wrap the Stack with `ClipRRect1 widget and provide it a border radius then it will add border to both green and gray area.
class CustomCard extends StatelessWidget {
final String title;
final double percentage;
final Color color;
CustomCard({this.title, this.percentage, this.color});
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Stack(clipBehavior: Clip.antiAliasWithSaveLayer, children: [
Container(
height: 100.0,
width: width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey,
),
),
Positioned(
left: -(percentage / 100) * width,
top: -(percentage / 100) * width,
child: Container(
height: (percentage / 100) * width * 2,
width: (percentage / 100) * width * 2,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(((percentage / 100) * width)),
color: color,
),
),
),
]),
)),
);
}
}
Solution 2
You can achieve that just using ClipRRect, Check the code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CustomCard(
title: 'Custom Card', percentage: 50.0, color: Colors.green),
);
}
}
class CustomCard extends StatelessWidget {
final String title;
final double percentage;
final Color color;
CustomCard(
{required this.title, required this.percentage, required this.color});
Widget positionedWidget(double width){
return Stack(clipBehavior: Clip.antiAliasWithSaveLayer, children: [
Container(
height: 100.0,
width: width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey,
),
),
Positioned(
left: -(percentage / 100) * width,
top: -(percentage / 100) * width,
child: Container(
height: (percentage / 100) * width * 2,
width: (percentage / 100) * width * 2,
decoration: BoxDecoration(
color: color,
),
),
),
]
);
}
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Padding(padding: EdgeInsets.all(10), child: ClipRRect(borderRadius: BorderRadius.circular(30),
child: positionedWidget(width))));
}
}
Solution 3
class CustomCard extends StatelessWidget {
final String title;
final double percentage;
final Color color;
CustomCard(
{required this.title, required this.percentage, required this.color});
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Stack(children: [
Container(
height: 100.0,
width: width,
color: Colors.grey,
),
Positioned(
left: -(percentage / 100) * width,
top: -(percentage / 100) * width,
child: Container(
height: (percentage / 100) * width * 2,
width: (percentage / 100) * width * 2,
color: color,
),
),
]),
),
),
);
}
}
Author by
Ketan Ramteke
Tech I Love ❤: Flutter, React Native, ReactJS Few Online Profile Links: Codetrace, Codersrank, CodeSignal, Google Developer Profile, Edabit, LinkedIn 🎖️#90 in the city of Pune
Updated on December 02, 2022Comments
-
Ketan Ramteke over 1 year
Here is the output which I am getting:
I want to clip the green Positioned widget on corners with that of grey Container's rounded corners. Any Help will be highly appreciated.
My current code:
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: CustomCard( title: 'Custom Card', percentage: 50.0, color: Colors.green), ); } } class CustomCard extends StatelessWidget { final String title; final double percentage; final Color color; CustomCard( {required this.title, required this.percentage, required this.color}); @override Widget build(BuildContext context) { double width = MediaQuery.of(context).size.width; return Scaffold( appBar: AppBar( title: Text(title), ), body: Padding( padding: const EdgeInsets.all(8.0), child: Stack(clipBehavior: Clip.antiAliasWithSaveLayer, children: [ Container( height: 100.0, width: width, decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), color: Colors.grey, ), ), Positioned( left: -(percentage / 100) * width, top: -(percentage / 100) * width, child: Container( height: (percentage / 100) * width * 2, width: (percentage / 100) * width * 2, decoration: BoxDecoration( borderRadius: BorderRadius.circular(((percentage / 100) * width)), color: color, ), ), ), ]), ), ); } }
Thank You.
-
pskink almost 3 yearsyou cant do that, but instead of
Stack
useContainer
(grey) withclipBehavior
that clips the childContainer
(green) -
Ketan Ramteke almost 3 yearsI tried it. not working. May be I am doing something wrong.
-
PatrickMahomes almost 3 years@KetanRamteke you can wrap your
Stack
in aClipRRect
and then set the borderRadius of ClipRRect to 10 -
Ketan Ramteke almost 3 years@pskink I am getting this output: imgur.com/a/5eJbY3J
-
Ketan Ramteke almost 3 yearsThank you pskink for helping, @TheAlphamerc fixed the issue. Really appreciate the help :)
-
-
Ketan Ramteke almost 3 yearsThank You Mohan for answering, it kinda works but I was hoping to get smoother rounded edges like the parent grey container.
-
Mohan Sai Manthri almost 3 yearsYou can do that by adjusting border radius
-
Mohan Sai Manthri almost 3 years@KetanRamteke Answer Updated
-
Ketan Ramteke almost 3 yearsyes, looks wonderful, but as TheAlphamerc replied with correct ans before, I had to accept his answer. Upvoted though :) Once again, Thanks a lot.