[![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
Related
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
There is a card widget. As seen in the picture, I want lines on this card widget. But I don't know how to do this. I would be glad if you could help me with this.
Problem Solved!
This Card Widget Code
Container(
height: 190.sp, //
width: 360.sp,
padding: EdgeInsets.symmetric(horizontal: 5.sp),
child: Card(
color: Colors.orange,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
child: Stack(
children: [
Align(
alignment: Alignment.bottomRight,
child: Transform.rotate(
angle: -pi / 2,
child: CustomPaint(
painter: MyPainter(),
child: SizedBox(width: 65, height: 65),
),
),
),
Align(
alignment: Alignment.bottomRight,
child: Transform.rotate(
angle: -pi / 2,
child: Transform.translate(
offset: Offset(25, 0),
child: CustomPaint(
painter: MyPainter(),
child: SizedBox(width: 30, height: 30),
),
),
),
),
],
),
));
THIS CUSTOM PAINTER
class MyPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
final redCircle = Paint()
..color = Colors.white
..style = PaintingStyle.stroke;
final arcRect = Rect.fromCircle(
center: size.bottomCenter(Offset.zero), radius: size.shortestSide);
canvas.drawArc(arcRect, 0, -pi, false, redCircle);
}
#override
bool shouldRepaint(MyPainter oldDelegate) => false;
}
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,
),
)
I am trying to make a triangle from a custom painter have a rounded corner.
Image on the left is what I have so far and Image on the right is what I am tring to do.
Here's is my code.
class Triangle extends StatelessWidget {
const Triangle({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return CustomPaint(
painter: MyPainter(),
child: Container(
height: MySize.yMargin(10),
width: MySize.xMargin(20),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(30)),
child: Center(
child: Padding(
padding: const EdgeInsets.only(left: 30.0, bottom: 16),
child: Transform.rotate(
angle: math.pi / 4,
child: Text('New',
style: TextStyle(
color: Colors.white,
fontSize: MySize.textSize(5),
fontWeight: FontWeight.bold,
)))))));
}
}
class MyPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
final paint = Paint();
paint.color = Colors.yellow;
var path = Path();
path.lineTo(size.width, 0);
path.lineTo(size.height, size.width);
path.close();
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
You can try to check out this package
try this:
import 'package:vector_math/vector_math.dart' as vector;
child: Container(
color: Colors.yellow,
width: 300,
height: 100,
child: Stack(
children: [
Positioned(
top: -20,
right: -20,
child: Transform.rotate(
angle: vector.radians(45),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Container(
alignment: Alignment.bottomCenter,
height: 50,
width: 50,
color: Color(0xff2DD485),
child: Text('NEW'),
),
),
),
),
],
),
),
How to draw custom shape for the appBar in my application to look like the image?
I think it is not the appBar's shape.
I think it's the white container below the green-colored appBar that has the rounded corner.
Here's the example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightBlueAccent,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(
top: 60.0, left: 30.0, right: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Hello',
style: TextStyle(
color: Colors.white,
fontSize: 50.0,
fontWeight: FontWeight.w700,
),
),
],
),
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
),
),
),
],
),
);
}
}
I built something similar with a CustomScrollView and SliverPersistenHeader, to get the curved effect your header can have a maxExtent and minExtent. When not scrolled the header height will show the curve otherwise when you start scrolling it will also shrink to a set height.
You can check out this tutorial from around 2:50 to get an idea of how to implement the header and then design your background containers accordingly.
As answer above. It is not part of the appbar programatically. Here is how I do it.
Create a class as such:
import 'dart:ui';
import 'package:flutter/material.dart';
class AppBarPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint_1 = Paint()
..color = const Color(0xffF57752)
..style = PaintingStyle.fill;
Path path_1 = Path()
..moveTo(0, 0)
..lineTo(size.width * .08, 0.0)
..cubicTo(
size.width * 0.04, 0.0, //x1,y1
0.0, 0.04, //x2,y2
0.0, 0.1 * size.width //x3,y3
);
Path path_2 = Path()
..moveTo(size.width, 0)
..lineTo(size.width * .92, 0.0)
..cubicTo(
size.width * .96, 0.0, //x1,y1
size.width, 0.96, //x2,y2
size.width, 0.1 * size.width //x3,y3
);
Paint paint_2 = Paint()
..color = const Color(0xffF57752)
..strokeWidth = 1
..style = PaintingStyle.stroke;
Path path_3 = Path()
..moveTo(0, 0)
..lineTo(size.width, 0);
canvas.drawPath(path_1, paint_1);
canvas.drawPath(path_2, paint_1);
canvas.drawPath(path_3, paint_2);
}
And then use it in your screen by stacking it ontop of body widget.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarHeight: 80.0,
backgroundColor: const Color(0xffF57752),
elevation: 0.0,
title: const Text('Title'),
),
body: Stack(
children: [
Container(
color: Colors.white,
child: Text(' text here'),
),
CustomPaint(
painter: AppBarPainter(),
child: Container(height: 0),
),
],
),
);
}