How can I add a dotted border for a container but for only one side but also with border radius?
There are packages like dotted_border and fdottedline , but they both do around the whole container.
I'm trying to achieve this
As mentioned in another thread there isn't a default way of implementing this yet, however the method detailed in this answer seems to get you part way there. There are also a few other approaches to this problem in there too which may be of help.
It is not possible with an actual border. especially not since the curved part of the border is still solid in your picture. However, I managed to get the desired result by overlaying a dotted line at the center between two containers with a solid border, using a Stack
class MyWidget extends StatelessWidget {
static const double _height = 500;
static const double _width = 500;
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
width: _width + 30,
height: _height + 30,
child: Center(
child: Stack(
alignment: Alignment.center,
children: [
Row(
children: [
_container(),
_container(),
],
mainAxisAlignment: MainAxisAlignment.center,
),
CustomPaint(
foregroundPainter: DashedLinePainter(),
child: Container(
width: 5, color: Colors.white, height: _height - 30)),
],
),
),
);
}
Widget _container() {
return Container(
height: _height,
width: _width / 2,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blueAccent,
width: 2,
),
borderRadius: BorderRadius.all(Radius.circular(15.0)),
),
);
}
}
class DashedLinePainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
double dashWidth = 9, dashSpace = 5, startX = size.width / 2, startY = 0;
final paint = Paint()
..color = Colors.blueAccent
..strokeWidth = 2;
while (startY < size.height) {
canvas.drawLine(
Offset(startX, startY), Offset(startX, startY + dashWidth), paint);
startY += dashWidth + dashSpace;
}
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
This code renders this:
You can use the plugin dotted_decoration to achieve the required design.
Code:-
Container(
decoration: DottedDecoration(
color: Colors.white,
strokeWidth: 0.5,
linePosition: LinePosition.right,
),
height:120,
width: 50,
),
Related
I'm following this speed code tutorial (https://www.youtube.com/watch?v=KO_PYJKHglo) and currently facing some problems. Where it all started is somewhere at 2:42 in the youtube video.
This is my main.dart file.
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
debugShowCheckedModeBanner: false,
home: PlayerApp(),
),
);
}
class PlayerApp extends StatefulWidget {
const PlayerApp({super.key});
#override
State<PlayerApp> createState() => _PlayerAppState();
}
class _PlayerAppState extends State<PlayerApp> {
#override
Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;
return Scaffold(
body: Stack(
children: <Widget>[
Positioned(
height: height,
width: width,
child: Material(
elevation: 16,
color: const Color(0xFFd6dde5), //Background Color
borderRadius: BorderRadius.circular(20),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 30.0,
),
child: Column(
children: <Widget>[
const SizedBox(
height: 90,
),
const Text(
'Music title',
),
const SizedBox(
height: 15,
),
const Text(
'Music artist',
),
const SizedBox(
height: 75,
),
buildRecordPlayer(),
const SizedBox(
height: 60,
),
Row(
children: <Widget>[
const Text('time'),
const SizedBox(
width: 8,
),
buildWave(),
const SizedBox(
width: 8,
),
const Text('end'),
],
)
],
),
),
),
)
],
),
);
}
Widget buildRecordPlayer() {
return Container(
height: 190,
width: 190,
alignment: Alignment.center,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/vinyl.png'),
fit: BoxFit.fitHeight,
colorFilter: ColorFilter.mode(
Colors.blue,
BlendMode.color,
),
),
shape: BoxShape.circle,
),
child: ClipOval(
child: Image.asset(
'assets/images/SL.png',
height: 150,
width: 150,
fit: BoxFit.fill,
),
),
);
}
Widget buildWave() {
return SizedBox(
width: 260,
height: 40,
child: CustomPaint(
painter: WaveBasePainter(),
),
);
}
}
And this is my wave_base_painter.dart file
import 'package:flutter/material.dart';
import 'dart:math';
class WaveBasePainter extends CustomPainter {
Paint? _paint; //4:03
#override
void paint(Canvas canvas, Size size) {
_paint = Paint()
..color = Colors.grey.withOpacity(0.3)
..style = PaintingStyle.stroke
..strokeWidth = 1.5;
canvas.translate(0, size.height / 2);
canvas.scale(1, -1);
for (int i = 0; i < size.width.toInt(); i++) {
double x = i.toDouble();
double r = 2 * sin(i) - 2 * cos(4 * i) + sin(2 * i - pi * 24);
r = r * 5;
canvas.drawLine(Offset(x, r), Offset(x, -r), _paint!);
}
#override
bool shouldRepaint(WaveBasePainter oldDelegate) => false;
}
}
This is what it resulted and I have no idea why the speed code video that I'm following doesn't show any errors and mine does.
You have defined shouldRepaint function incorrectly.
You can see this file, I have updated it:
class WaveBasePainter extends CustomPainter {
Paint? _paint; //4:03
#override
void paint(Canvas canvas, Size size) {
_paint = Paint()
..color = Colors.grey.withOpacity(0.3)
..style = PaintingStyle.stroke
..strokeWidth = 1.5;
canvas.translate(0, size.height / 2);
canvas.scale(1, -1);
for (int i = 0; i < size.width.toInt(); i++) {
double x = i.toDouble();
double r = 2 * sin(i) - 2 * cos(4 * i) + sin(2 * i - pi * 24);
r = r * 5;
canvas.drawLine(Offset(x, r), Offset(x, -r), _paint!);
}
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
I try to create a border around a container, that is not that difficult ofcourse, but i need also a text IN the border with space around it. Like horizontal divder but i need a complete border.
Attached what i like to achieve.
Any one who can help me how to approach this?
Thanks!
Tried to use the horizontal and vertical divider packages, but then the border is not in full.
You can use CustomPainter like this:
class CustomDraw extends CustomPainter {
late Paint painter;
late double radius;
late double textWidth;
CustomDraw(Color color, this.textWidth, {this.radius = 0}) {
painter = Paint()
..style = PaintingStyle.stroke
..strokeWidth = 2
..color = color;
}
#override
void paint(Canvas canvas, Size size) {
var path = Path();
path.moveTo(size.width - ((size.width - textWidth) / 2), 0);
path.lineTo(size.width - radius, 0);
path.cubicTo(size.width - radius, 0, size.width, 0, size.width, radius);
path.lineTo(size.width, size.height - radius);
path.cubicTo(size.width, size.height - radius, size.width, size.height,
size.width - radius, size.height);
path.lineTo(radius, size.height);
path.cubicTo(radius, size.height, 0, size.height, 0, size.height - radius);
path.lineTo(0, radius);
path.cubicTo(0, radius, 0, 0, radius, 0);
path.lineTo(((size.width - textWidth) / 2), 0);
canvas.drawPath(path, painter);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
and this widget:
class CustomTitleWidget extends StatefulWidget {
final double height;
final double width;
final double? radius;
final String title;
const CustomTitleWidget(
{Key? key,
required this.height,
required this.width,
required this.title,
this.radius})
: super(key: key);
#override
State<CustomTitleWidget> createState() => _CustomTitleWidgetState();
}
class _CustomTitleWidgetState extends State<CustomTitleWidget> {
GlobalKey textKey = GlobalKey();
double textHeight = 0.0;
double textWidth = 0.0;
#override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
final textKeyContext = textKey.currentContext;
if (textKeyContext != null) {
final box = textKeyContext.findRenderObject() as RenderBox;
textHeight = box.size.height;
textWidth = box.size.width;
}
});
});
}
#override
Widget build(BuildContext context) {
return Stack(
clipBehavior: Clip.none,
alignment: Alignment.topCenter,
children: [
CustomPaint(
child: Container(
height: widget.height,
width: widget.width,
),
painter: CustomDraw(
Colors.red,
textWidth,
radius: widget.radius ?? 0,
),
),
Positioned(
top: -textHeight / 2,
child: Padding(
key: textKey,
padding: EdgeInsets.symmetric(horizontal: 8.0),
child: Text(
widget.title,
),
),
)
],
);
}
}
use like this:
CustomTitleWidget(
height: 200,
width: double.infinity,
title: 'asdasdasdasdasd',
radius: 16),
#Maenda, We can implement such kind of structure using Stack, take one container with a border & put the other container over the first one.
Here is an example:
Stack(
children: [
Positioned(
top: 12,
left: 0,
right: 0,
child: Container(
height: 120,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(width: 1.2),
borderRadius: BorderRadius.circular(3)),
)),
Container(
margin: EdgeInsets.symmetric(
horizontal: 21,
),
child: Column(
children: [
Container(
width: 100,
margin: EdgeInsets.only(top: 12, bottom: 5),
alignment: Alignment.center,
color: Colors.blue,
child: Text(
"Any Text",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
),
Text(
"Nature, in the broadest sense, is the physical world or universe. Nature can refer to the phenomena of the physical world, and also to life in general.",
textAlign: TextAlign.center,
),
SizedBox(
height: 8,
)
],
),
),
],
);
Hope this works! You can customize as per the design.
I am working with the scratcher library and it provides a square shape card which works great. However, I want to create a custom shape of cards such as a circle or a heart. I tried with ClipPath but it still counts the outer area as scratchable.
I wonder, is there any way to do it? Thanks in advance.
`ClipPath(
clipper: CustomClipPath(),
clipBehavior: Clip.hardEdge,
child: Container(
width: MediaQuery.of(context).size.width,
height: 200,
color: Colors.red,
child: Scratcher(
brushSize: 30,
threshold: 50,
color: Colors.red,
onChange: (value) => print("Scratch progress: $value%"),
onThreshold: () => print("Threshold reached, you won!"),
child: Container(
height: 300,
width: 300,
color: Colors.blue,
),
),
),
);
class CustomClipPath extends CustomClipper<Path> {
var radius = 5.0;
#override
Path getClip(Size size) {
Path path = Path();
path.lineTo(size.width / 2, size.height);
path.lineTo(size.width, 0.0);
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}`
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 months ago.
Improve this question
Does anyone know how to do filled circle progress bar like on a picture?
You can use CustomPainter
class CirclePaint extends CustomPainter {
final double value;
CirclePaint(this.value);
#override
void paint(Canvas canvas, Size size) {
final area = Rect.fromCircle(
center: size.center(Offset.zero), radius: size.width / 2);
canvas.drawArc(
area, -pi / 2, 2 * pi * value, true, Paint()..color = Colors.amber);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
And play with this widget and change the color you like to have.
double value = .4;
final size = 200.0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: [
Slider(
value: value,
onChanged: (v) {
setState(() {
value = v;
});
},
),
Container(
width: size,
height: size,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.blue,
width: 4,
),
),
child: CustomPaint(
painter: CirclePaint(value),
),
),
],
),
),
);
}
Find more about CustomPaint
With Listenable repaint as pskink mentioned on comment
class Psf extends StatelessWidget {
const Psf({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
ValueNotifier<double> value = ValueNotifier(.3);
const size = 200.0;
return Scaffold(
body: Center(
child: Column(
children: [
Slider(
value: value.value,
onChanged: (v) {
value.value = v;
},
),
Container(
width: size,
height: size,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.blue,
width: 4,
),
),
child: CustomPaint(
painter: CirclePaint(value),
),
),
],
),
),
);
}
}
class CirclePaint extends CustomPainter {
final ValueNotifier<double> value;
CirclePaint(this.value) : super(repaint: value);
#override
void paint(Canvas canvas, Size size) {
final area = Rect.fromCircle(
center: size.center(Offset.zero), radius: size.width / 2);
canvas.drawArc(area, -pi / 2, 2 * pi * value.value, true,
Paint()..color = Colors.amber);
}
#override
bool shouldRepaint(covariant CirclePaint oldDelegate) =>
oldDelegate.value != value;
}
With custom decoration as #pskink included, you need to use some custom snippet for this, check them here
Container(
width: size,
height: size,
decoration: AnimatedDecoration(
listenable: value,
onPaintFrame: (canvas, bounds, double v) {
canvas.drawArc(bounds, -pi / 2, 2 * pi * v, true,
Paint()..color = Colors.amber);
},
),
),
I just want my created shape so that i can stack a widget to achieve the Image below. i am trying to get the transparent shape at the back ground of the X and Love. I Try using the shape maker but my mouse designing is not perfect. here is the code generated from the shape maker
child: CustomPaint(
size: Size(400,(400*0.2857142857142857).toDouble()),
painter: RPSCustomPainter(),
),
class RPSCustomPainter extends CustomPainter{
#override
void paint(Canvas canvas, Size size) {
Paint paint_0 = new Paint()
..color = Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.stroke
..strokeWidth = 1;
Path path_0 = Path();
path_0.moveTo(size.width*0.2137714,size.height*0.2524000);
path_0.cubicTo(size.width*0.1736143,size.height*0.4775500,size.width*0.1973000,size.height*0.6711500,size.width*0.2153286,size.height*0.7510000);
path_0.cubicTo(size.width*0.2270429,size.height*0.7777500,size.width*0.2705286,size.height*0.9439500,size.width*0.3556000,size.height*0.7521500);
path_0.cubicTo(size.width*0.3856000,size.height*0.6504000,size.width*0.3970143,size.height*0.6162000,size.width*0.4283571,size.height*0.7526000);
path_0.cubicTo(size.width*0.4669286,size.height*0.8264000,size.width*0.5172429,size.height*0.9022500,size.width*0.5719714,size.height*0.7500000);
path_0.cubicTo(size.width*0.6146429,size.height*0.5440500,size.width*0.5914429,size.height*0.3101000,size.width*0.5713714,size.height*0.2514000);
path_0.cubicTo(size.width*0.5520714,size.height*0.1778000,size.width*0.4875429,size.height*0.0767500,size.width*0.4296571,size.height*0.2527000);
path_0.cubicTo(size.width*0.4023714,size.height*0.3646000,size.width*0.3816857,size.height*0.3850000,size.width*0.3557143,size.height*0.2523000);
path_0.cubicTo(size.width*0.3438571,size.height*0.2086000,size.width*0.2652143,size.height*0.0579000,size.width*0.2137714,size.height*0.2524000);
path_0.close();
canvas.drawPath(path_0, paint_0);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
what i am trying to achieve
my result. the shape is not perfect.
thanks
At first I wanted to describe you the ways you can achieve the shape you want and so on...
But got carried away with this fun programming challenge and ended up creating an actual widget :)
It depends on the font_awesome_flutter package, so don't forget to install it (for the heart icon). font_awesome_flutter
So the widget's source code is:
import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
extension ToRadians on int {
double get toRadians => this * (math.pi / 180.0);
}
enum _ButtonType { like, dislike }
class LikeOrNot extends StatelessWidget {
final VoidCallback onLike;
final VoidCallback onDislike;
// Percents from total widget width, default - 2%
final _gapSizeRatio = 0.02;
final _likeIconColor = const Color(0xffb85076);
final _dislikeIconColor = Colors.white;
const LikeOrNot({
Key? key,
required this.onLike,
required this.onDislike,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 2,
child: LayoutBuilder(
builder: (context, constraints) {
final buttonPaddings = constraints.maxHeight * 0.1;
final halfWidth = constraints.maxWidth / 2;
return Stack(
children: [
Positioned.fill(
child: CustomPaint(
painter: RPSCustomPainter(
gapSizeRatio: _gapSizeRatio,
),
),
),
Positioned(
left: 0,
bottom: 0,
top: 0,
right: halfWidth + constraints.maxWidth * _gapSizeRatio,
child: SizedBox.expand(
child: Padding(
padding: EdgeInsets.all(buttonPaddings),
child: _buildButton(_ButtonType.dislike),
),
),
),
Positioned(
right: 0,
bottom: 0,
top: 0,
left: halfWidth + constraints.maxWidth * _gapSizeRatio,
child: SizedBox.expand(
child: Padding(
padding: EdgeInsets.all(buttonPaddings),
child: _buildButton(_ButtonType.like),
),
),
),
],
);
},
),
);
}
Widget _buildButton(_ButtonType buttonType) {
final isPositiveAction = buttonType == _ButtonType.like;
return ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const CircleBorder(),
primary: isPositiveAction ? _dislikeIconColor : _likeIconColor,
onPrimary: isPositiveAction ? _likeIconColor : _dislikeIconColor,
padding: EdgeInsets.zero,
elevation: 10,
shadowColor: Colors.black54,
),
onPressed: onDislike,
child: FractionallySizedBox(
widthFactor: 0.35,
heightFactor: 0.35,
child: FittedBox(
child: isPositiveAction
? const FaIcon(FontAwesomeIcons.heart)
: const Icon(Icons.close),
),
),
);
}
}
class RPSCustomPainter extends CustomPainter {
final double gapSizeRatio;
RPSCustomPainter({
required this.gapSizeRatio,
});
#override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.black.withOpacity(0.08)
..style = PaintingStyle.fill
..strokeWidth = 1;
final path = Path();
final gapSize = size.width * gapSizeRatio;
final arcRadius = size.height / 2 - gapSize / 2;
final leftCircleCenter = Offset(
size.width * 0.25 - gapSize / 2,
size.height / 2,
);
final rightCircleCenter = Offset(
size.width * 0.75 + gapSize / 2,
size.height / 2,
);
path.arcTo(
Rect.fromCircle(
center: leftCircleCenter,
radius: arcRadius,
),
45.toRadians,
270.toRadians,
false,
);
final bezierOffset = arcRadius * (105 / 360);
path.quadraticBezierTo(
size.width / 2,
size.height * 0.30,
rightCircleCenter.dx - arcRadius + bezierOffset,
rightCircleCenter.dy - arcRadius + bezierOffset,
);
path.arcTo(
Rect.fromCircle(
center: rightCircleCenter,
radius: arcRadius,
),
225.toRadians,
270.toRadians,
false,
);
path.quadraticBezierTo(
size.width / 2,
size.height * 0.70,
leftCircleCenter.dx + arcRadius - bezierOffset,
leftCircleCenter.dy + arcRadius - bezierOffset,
);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
It's dynamic, the buttons are built-in. You get 2 options to work with - onDislike() and onLike() callbacks.
An example using different sizes.
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xffc0496f), Color(0xffdb6b59)],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
title: const Text('Test'),
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Container(
width: double.infinity,
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
for (final size in List.generate(5, (index) => index++))
FractionallySizedBox(
widthFactor: 1.0 - size * 0.2,
child: LikeOrNot(
onLike: () {},
onDislike: () {},
),
),
],
),
),
),
);
}
}
There's a _gapSize parameter which is the gap between two circles. The one you need is already inside (2% default) but you can get some cool other variations by changing it. For example, here's a gap of 20% total width: