how to overlap image on custompaint in Flutter? - flutter

I'm a beginner at flutter. So I don't know if I'm doing this right or not!
I want to design like this -> design
Here's my custom paint ->
class RPSCustomPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint_0 = Paint()
..color = Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.fill;
Path path_0 = Path();
path_0.moveTo(size.width * 0.04, size.height * 1.04);
path_0.lineTo(size.width * 0.8, size.height * 1.04);
path_0.quadraticBezierTo(size.width * 0.79, size.height * 0.21,
size.width * 0.79, size.height * 0.16);
path_0.cubicTo(size.width * 0.79, size.height * -0.01, size.width * 0.27,
size.height * -0.18, size.width * 0.04, size.height * -0.4);
path_0.quadraticBezierTo(size.width * 0.05, size.height * -0.10,
size.width * 0.04, size.height * 1.04);
path_0.close();
canvas.drawPath(path_0, paint_0);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
I tried to get the image on top of my CustomPaint but can't do it.
Here's the method I tried :
Image in customPaint
CustomPaint(
painter: RPSCustomPainter(),
child: Image.asset(
'assets/images/avater/cod2.png',
fit: BoxFit.fitHeight,
alignment: Alignment.center,
),
),
Custompaint and image in a Stack
Stack(
children: [
CustomPaint(
child: Container(),
painter: RPSCustomPainter(),
),
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.black,
),
child: Image.asset(
'assets/images/avater/pubg2.png',
fit: BoxFit.fill,
),
),
],
),
I implemented a Gridview.Count and I passed those methods on its children.
Here's the output :my output

Related

How to implement clip toolbar widget in flutter

I need your help and assistance to how to implement the curved tab as shown in below picture .
This can easily be achieved by custompainter or customclipper. here is an example. I believe you can improve it to better.
Widget for bottom navbar:
Positioned(
bottom: 0,
child: Container(
height: 100,
width: MediaQuery.of(context).size.width,
color: Colors.amber,
child: Stack(children: [
AnimatedPositioned(
curve: Curves.bounceOut,
duration: const Duration(milliseconds: 300),
top: 10,
left: (MediaQuery.of(context).size.width / 3) * tab,
child: SizedBox(
width: MediaQuery.of(context).size.width / 3,
height: 50,
child: CustomPaint(
size: Size(MediaQuery.of(context).size.width / 3, 50),
painter: TabPainter(),
),
),
),
Positioned(
top: 59,
child: Container(
height: 2,
width: MediaQuery.of(context).size.width,
color: Colors.white,
),
),
Positioned(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: 80,
child: Row(
children: [
Expanded(
child: IconButton(
icon: const Icon(Icons.abc),
onPressed: () {
setState(() {
tab = 0;
});
},
),
),
Expanded(
child: IconButton(
icon: const Icon(Icons.add_box),
onPressed: () {
setState(() {
tab = 1;
});
},
),
),
Expanded(
child: IconButton(
icon: const Icon(Icons.air),
onPressed: () {
setState(() {
tab = 2;
});
},
),
)
],
),
),
),
]),
),
)
Painter code:
class TabPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint = new Paint()
..color = Colors.white
..style = PaintingStyle.fill;
Path path = Path()
..moveTo(0, size.height)
..quadraticBezierTo(
size.width * 0.2, size.height, size.width * 0.15, size.height * 0.5)
..quadraticBezierTo(size.width * 0.1, 0, size.width * 0.3, 0)
..lineTo(size.width * 0.7, 0)
..quadraticBezierTo(
size.width * 0.9, 0, size.width * 0.85, size.height * 0.5)
..quadraticBezierTo(
size.width * 0.8, size.height, size.width * 1.1, size.height)
..close();
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
tab is just a integer variable
Output

How to create a button like this in flutter?

I have wrote this much code. I am trying to use custom painter here to draw those lines. But I don't know how to fill cooler inside them. I am using row to divide these 3 sections. But I am not sure if this is the right way.
Container(
height: 10.0.h,
padding: EdgeInsets.only(left: 20),
color: Color.fromRGBO(211, 237, 241, 1),
child: Row(
children: [
Container(
width: 70.0.w,
child: Text(
"Create an Event",
textAlign: TextAlign.left,
style: TextStyle(fontSize: 22.0.sp),
),
),
Flexible(
child: Container(
width: double.infinity,
height: double.infinity,
color: Colors.blue,
child: CustomPaint(
painter: CurvedPainter(),
),
),
)
],
),
)
class CurvedPainter extends CustomPainter { #override void paint(Canvas canvas, Size size) {
print(size.width);
print(size.height);
var paint = Paint();
var path = Path();
paint.color = Colors.red;
paint.style = PaintingStyle.stroke;
paint.strokeWidth = 2.0;
path.arcToPoint(Offset(-20, size.height * 0.5),
radius: Radius.circular(100), clockwise: false);
path.arcToPoint(Offset(-30, size.height),
radius: Radius.circular(70), clockwise: true);
canvas.drawPath(path, paint); }
}
I have made this with custom painter you can edit the values to customize the shape
Add this as a body of your Widget
Container(
height: 50,
width: 250,
decoration: BoxDecoration(
color: Colors.blue.shade50,
borderRadius: BorderRadius.all(Radius.circular(20))),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: Row(
children: [
Expanded(
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
height: 50,
color: Colors.blue.shade50,
child: Text('Hello'),
),
),
Container(
width: 70,
height: 50,
child: Stack(
children: [
Container(
width: 70,
height: 50,
child: CustomPaint(
painter: buttonBackground(),
),
),
Align(
alignment: Alignment(.8,1),
child: IconButton(icon: Icon(Icons.arrow_forward_ios_rounded), onPressed: (){})),
],
),
),
],
),
),
),
And you can change the value and color of the button background in this class
class buttonBackground extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
var sw = size.width;
var sh = size.height;
var paint = Paint();
Path mainBackground = Path();
mainBackground.addRect(Rect.fromLTRB(0, 0, sw, sh));
paint.color = Colors.blue.shade50;
canvas.drawPath(mainBackground, paint);
Path greyWave = Path();
greyWave.lineTo(sw, 0);
greyWave.lineTo(sw, sh);
greyWave.cubicTo(sw * 0.15, sh, sw * 0.5, sh, sw * .6, sh * 0.5);
greyWave.cubicTo(sw * 0.92, sh * 01.2, 0, sh * 0.15, sh * .4, sh * 0);
greyWave.close();
paint.color = Colors.blue.shade200;
canvas.drawPath(greyWave, paint);
Path blueWave2 = Path();
greyWave.lineTo(sw, 0);
greyWave.lineTo(sw, sh);
greyWave.cubicTo(sw * 0.05, sh, sw * 0.3, sh, sw * .4, sh * 0.5);
greyWave.cubicTo(sw * 0.62, sh * 0.92, 0, sh * 0.15, sh * .3, sh * 0);
greyWave.close();
paint.color = Colors.blue.withOpacity(.3);
canvas.drawPath(greyWave, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return oldDelegate != this;
}
}
I don't have access right now in an IDE to write flutter code. But I guess you can use a GestureDetector where inside of it you can add the button functionality in the onTap argument and as a child you can use the Image that you have created and want to use for the button.
Something like this below:
GestureDetector(
onTap: () {print('put a method here that runs the code that you want to be executed on tap');},
child: Image(
image: AssetImage('path/to/your/img'),
fit: BoxFit.cover,
height: 30,
),
)

Flutter: Can't make a ClipPath

Can someone help me with this ClipPath in Flutter?
I can't make the bottom border.
Also, how can I make it visible as a Row child?
I noticed that it works in Container, but it doesn't in when I drag the Container(or Flexible) in Row or without the widgets.
UPDATE
This is the return when the ClipPath is not visible
Scaffold(
body: SafeArea(
child: Row(
children: [
Flexible(
child: ClipPath(
clipper: AuthClipPath(),
child: Container(
height: size.height * .75,
decoration: BoxDecoration(gradient: gradient),
child: authForm(),
),
),
)
],
),
),
)
And this is the return when the ClipPath is visible
Scaffold(
body: SafeArea(
child: Container(
child: ClipPath(
clipper: AuthClipPath(),
child: Container(
height: size.height * .75,
decoration: BoxDecoration(gradient: gradient),
child: authForm(),
),
),
)
)
This is clipper class from ClipPath
class AuthClipPath extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path();
path.lineTo(0.0, size.height - 30);
Offset firstControlPoint = Offset(size.width / 4, size.height);
Offset firstPoint = Offset(size.width / 2, size.height);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
firstPoint.dx, firstPoint.dy);
Offset secondControlPoint = Offset(size.width / 4 * 3, size.height);
Offset secondPoint = Offset(size.width, size.height - 30);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondPoint.dx, secondPoint.dy);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
The Flexible Widget is not relevant for the visibility.
Thank you!
Use your AuthClipPath() like this inside Row()
home: Scaffold(
body: SafeArea(
child: Row(
children: [
Flexible(
child: ClipPath(
clipper: AuthClipPath(),
child: Container(
height: 300,
color: Colors.amber.shade200,
),
),
),
],
),
),
),
You can achieve the wave effect like this. And you can always tweak according to your needs.
Path path = Path();
path.moveTo(size.width, 0);
path.lineTo(0, 0);
path.quadraticBezierTo(
0, size.height * 0.4500000, 0, size.height * 0.6000000);
path.cubicTo(
size.width * 0.3000000,
size.height * 0.9000000,
size.width * 0.7000000,
size.height * 0.3000000,
size.width,
size.height * 0.6000000);
path.quadraticBezierTo(
size.width, size.height * 0.4500000, size.width, 0);
path.close();
return path;

How to use place row inside custompainter rectangle in flutter?

[![want to place fb, twitter icons inside rectangle][1]][1]
[1]: https://i.stack.imgur.com/psDqQ.jpg
class _Frame1State extends State<Frame1> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(children: [
Container(
width: double.infinity,
height: containerHeight,
decoration: BoxDecoration(color: kcolorframe1BgColor),
),
Positioned(
top: 10,
right: 10,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill, image: AssetImage(kimageLoveImage))),
)),
Positioned(
bottom: 2,
height: bottomBaseHeight,
width: bottomBaseWidth,
child: CustomPaint(
size: Size.infinite,
painter: PathPainterLine(),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
icon: Icon(
FontAwesomeIcons.facebook,
),
),
IconButton(
icon: Icon(
FontAwesomeIcons.twitter,
),
),
.
.
.
}
class PathPainterLine extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.red
..style = PaintingStyle.stroke
..strokeWidth = 2.0;
Path path = Path();
path.moveTo(0, 0);
path.lineTo(2 * size.width / 3, 0);
path.moveTo(0, 0);
path.addRRect(RRect.fromRectXY(
Rect.fromLTRB(2 * size.width / 3, -10, size.width, 10), 10, 10));
canvas.drawPath(path, paint);
}
}
How to use place row inside custompainter rectangle in flutter?
How to place row of icons inside custom-painter rectangle created, the child property of CustomPaint doesn't work as it shifts the Row to bottom,please help ?
Your PathPainterLine is painting outside of the Canvas:
1. Fix your PathPainterLine:
class PathPainterLine extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.red
..style = PaintingStyle.stroke
..strokeWidth = 2.0;
Path path = Path();
path.moveTo(0, size.height / 2);
path.lineTo(2 * size.width / 3, size.height / 2);
path.addRRect(RRect.fromRectXY(
Rect.fromLTRB(2 * size.width / 3, 0, size.width, size.height), 10, 10));
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
2. Properly size and position your Row
child: CustomPaint(
painter: PathPainterLine(),
child: Align(
alignment: Alignment.centerRight,
child: Container(
padding: EdgeInsets.symmetric(horizontal: frameWidth / 50),
width: frameWidth / 3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.train, size: 16),
Icon(Icons.flight, size: 16),
],
),
),
),
),
Result

How to design tile like given image?

I'm trying to making tile like below image.
This is the piece of code that I have tried:
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
ListTile(
leading: Container(
alignment: Alignment.center,
height: MediaQuery.of(context).size.height/20,
width: MediaQuery.of(context).size.height/20,
decoration: BoxDecoration(
color: index.isEven?Colors.yellow:Colors.orange,
shape: BoxShape.circle,
image: snapshot.data.content[index].image != null? DecorationImage(
image: NetworkImage(snapshot.data.content[index].image.fileUrl),
fit: BoxFit.cover
):null
),
child: snapshot.data.content[index].image == null?
Icon(Icons.person):Container()
),
title:Text(
snapshot.data.content[index].name, style: TextStyle(
fontWeight: FontWeight.bold)
),
subtitle: Text(snapshot.data.content[index].phoneNumber),
trailing: Container(
alignment: Alignment.centerRight,
width: MediaQuery.of(context).size.width/5.5,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset('assets/icons/reminder.png',fit: BoxFit.cover,
),
Image.asset('assets/icons/calendar_soon.png',fit: BoxFit.cover,),
],
),
),
onTap: (){
//
},
),
Container(
alignment: Alignment.center,
height: MediaQuery.of(context).size.height/25,
width: MediaQuery.of(context).size.width/1.5,
decoration: BoxDecoration(
color: Colors.green[100],
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
topLeft: Radius.circular(10),
bottomRight: Radius.circular(30),
)
),
child: Text("12 Mar, Marriage Anniversary",style:TextStyle(color: Colors.green)),
),
SizedBox(height:5),
Divider(height: 0.5,)
],
)
and What I have got from this code:
This is my attempt using a CustomPainter:
class CurvePainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
final radius = 16.0;
final tipHeight = size.height * 0.2;
final paint = Paint()..color = const Color(0xFFDEF8EB);
final path = Path()
..moveTo(0, tipHeight)
..lineTo(0, size.height - radius)
..quadraticBezierTo(0, size.height, radius, size.height)
..lineTo(size.width - radius, size.height)
..quadraticBezierTo(
size.width, size.height, size.width, size.height - radius)
..lineTo(size.width, tipHeight + radius)
..quadraticBezierTo(size.width, 0, size.width - radius, 0)
..quadraticBezierTo(size.width - radius, tipHeight,
size.width - (radius + 8.0), tipHeight)
..lineTo(radius, tipHeight)
..quadraticBezierTo(0, tipHeight, 0, tipHeight + radius);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
To implement it, you need to use the CustomPaint widget:
Container(
height: 50.0,
width: 300,
child: CustomPaint(
painter: CurvePainter(),
),
),