I would like to make a Carousel slider in flutter with lines (look at the image), but always finding with dots.
Thanks in advance
Carousel slider with lines
I found a solution with dots_indicator https://pub.dev/packages/dots_indicator
DotsIndicator(
dotsCount: length ?? 0,
position: currentIndexPage.toDouble(),
decorator: DotsDecorator(
spacing: EdgeInsets.only(left: 3, right: 3),
shape: Border(),
activeShape: Border(),
size: Size(
(width - 50) / length, 5),
activeSize: Size(
(width - 50) / length, 5),
color: Colores().blanco(opacity: 0.4),
activeColor: Colores().blanco()),
)
Related
I am using swipe_stack.
It pretty much serves the purpose for me except that I want to place the swiped card back at the bottom of the stack on left swipe. I don't know how to achieve this.
Here is the git for this repo:
SwipeStack
I have imported the repo in my project so I can make changes to it. However, I don't how to achieve it.
child: SwipeStack(
key: dashboardController.swipeKeyFlashDeals,
padding: const EdgeInsets.only(
top: 10,
bottom: 20,
left: 5,
right: 10,
),
children: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((int index) {
return SwiperItem(
builder: (SwiperPosition position, double progress) {
return FlipCard(
direction: FlipDirection.HORIZONTAL,
speed: 500,
onFlipDone: (status) {
print(status);
},
/// FRONT SIDE
front: Material(
elevation: 4,
borderRadius: const BorderRadius.all(Radius.circular(20)),
child: Stack(children: [
….
]),
….
///BACK SIDE
back: ClipRRect(
borderRadius: BorderRadius.circular(25),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 75,
sigmaY: 75,
),
child: …
))
}).toList(),
visibleCount: 3,
stackFrom: StackFrom.Right,
translationInterval: 10,
scaleInterval: 0.03,
onEnd: () => debugPrint("onEnd"),
onSwipe: (int index, SwiperPosition position) {
return debugPrint("onSwipe $index $position");
},
onRewind: (int index, SwiperPosition position) =>
debugPrint("onRewind $index $position"),
),
Have you considered adding a function to the onSwipe property that adds the child you are swiping, back to the first position of the SwipeStack children?
The best way should be to change the implementation of the SwipeStack itself. Instead of removing the child from the children's list add him back to the top of the list. And create a bool keepChildrenOnSwipeLeft to control that.
I have a complex design, I don't know what to do with flutter, is there any help on how to implement this design?
Usually to create complex designs I prefer using Flutter Shape Maker.
All you need is to upload your svg picture and it will convert it to CustomPaint code in flutter. Perhaps this may help you.
I have tried to achieve a shape and the center painter here. Few things, I am able to achieve but for complete part, I think you need to use pie chart https://pub.dev/packages/syncfusion_flutter_charts specially Doughnut type.
Please check my sample as below:
This painter is used to prepare the pie.
class WheelPainter extends CustomPainter {
Path getWheelPath(double wheelSize, double fromRadius, double toRadius) {
return new Path()
..moveTo(wheelSize, wheelSize)
..arcTo(
Rect.fromCircle(
radius: wheelSize, center: Offset(wheelSize, wheelSize)),
fromRadius,
toRadius,
false)
..close();
}
Paint getColoredPaint(Color color) {
Paint paint = Paint();
paint.color = color;
return paint;
}
#override
void paint(Canvas canvas, Size size) {
double wheelSize = 150;
double nbElem = 6;
double radius = (2 * pi) / nbElem;
// canvas.drawPath(getWheelPath(wheelSize, 0, radius), getColoredPaint(Colors.red));
canvas.drawShadow(getWheelPath(wheelSize, radius * 0.5, radius * 2).shift(Offset(0, -10)), Colors.black, 10.0, true);
canvas.drawPath(getWheelPath(wheelSize, radius * 0.5, radius * 2),
getColoredPaint(Colors.purple));
// canvas.drawPath(getWheelPath(wheelSize, radius * 2, radius), getColoredPaint(Colors.blue));
canvas.drawShadow(getWheelPath(wheelSize, radius * 2.7, radius * 1.7).shift(Offset(0, -10)), Colors.black, 10.0, true);
canvas.drawPath(getWheelPath(wheelSize, radius * 2.7, radius * 1.7),
getColoredPaint(Colors.green));
// canvas.drawPath(getWheelPath(wheelSize, radius * 4, radius), getColoredPaint(Colors.yellow));
canvas.drawShadow(getWheelPath(wheelSize, radius * 4.6, radius * 1.7).shift(Offset(0, -10)), Colors.black, 10.0, true);
canvas.drawPath(getWheelPath(wheelSize, radius * 4.6, radius * 1.7),
getColoredPaint(Colors.orange));
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return oldDelegate != this;
}
}
Below is the sample to use it.
Stack(alignment: Alignment.center, children: [
CustomPaint(
size: Size(300, 300),
painter: WheelPainter(),
),
Container(
width: 150,
height: 150,
decoration:
BoxDecoration(shape: BoxShape.circle, color: Colors.white),
),
Container(
width: 110,
height: 110,
decoration:
BoxDecoration(shape: BoxShape.circle, color: Colors.white, boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 10.0,
blurStyle: BlurStyle.outer,
spreadRadius: 3.0,
offset: Offset(1.0,1.0)
)
]),
)
]),
This is how it will look like.
Hope it may help you.
You can take two container in Stack Widget
and implement customPaint
customPaint
You can try packges from pub.dev for this and you can customise as you need in app this designs.
syncfusion_flutter-chart
Try above package for your requirements
I am using Marquee widget to scroll texts.
I have made a lists of some texts, but some text contains only two or three words, and some text contains more words.
I just want to scroll the texts which have more words, not every texts.
Container(
color: Colors.green,
width: MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.width * 0.1,
child: Marquee(
showFadingOnlyWhenScrolling: true,
startAfter: Duration(seconds: 5),
pauseAfterRound: Duration(seconds: 2),
fadingEdgeEndFraction: 0.3,
blankSpace: 100,
velocity: 50,
text: title,
style: TextStyle(
color: Colors.white,
fontSize: 25,
decoration: isDone
? TextDecoration.lineThrough
: TextDecoration.none)),
),
first you need to know how long your String is. For that you can save your String in a variable.
then you can get the length from the string like this:
String myString = "abc";
// this will print 3
print(myString.length);
so after this you can use a simple if:
String myString = "abc";
if(myString.length > 10) {
scroll();
}
you also can do:
String myString = "abc";
...
// if else
myString.length > 10 ? Widget1(...) : Widget2(...)
flutter reduces padding SleekCircularSlider and text. It's sowing too much space between bar and text.
my code
SleekCircularSlider(
min: 0,
max: 120.0,
initialValue: 60,
appearance: CircularSliderAppearance(
startAngle: 110,
angleRange: 70,
animationEnabled: true,
infoProperties: InfoProperties(
bottomLabelText: 'kg',
bottomLabelStyle: TextStyle(
fontSize: 20,
),
mainLabelStyle: TextStyle(
fontSize: 25,
fontFamily: 'RalewaySemiBold',
),
modifier: (double value) {
final roundedValue = value.ceil().toInt().toString();
return '$roundedValue ';
},
),
customColors: CustomSliderColors(
hideShadow: true,
trackColor: Color(0xffCFE7FB),
dotColor: Color(0XFFFAFAFA),
progressBarColor: kPrimaryColor,
),
customWidths: CustomSliderWidths(
trackWidth: 4,
progressBarWidth: 12,
handlerSize: 3,
)
),
onChangeEnd: (double weight){
return weight;
},
),
Look like this
I need to reduce the gap between bar and text.
You can use the size parameter on the CircularSliderAppearance to control how much width and height is allotted to your SleekCircularSlider widget.
For example, I added,
appearance: CircularSliderAppearance(
size: 100, // Added this
startAngle: 110,
and the output is this,
Play around and check what size suits you best. :)
I have a wallet circle which is responsive to the payments that are done. What my issue is when ever the wallet amount is zero, I want the widget that draws the circle to be non visible.
What I did now, is that I used a ternary operatior for checking it inside Custompaint Widget. What am I missing?.
CustomPaint(
painter: (this.total <= 0)
? CurvePainter(colors: [
// To test if the color changes
Colors.red.withOpacity(0.9),
Colors.red.withOpacity(0.9)
], angle: 0, strokeWidth: 0)
: CurvePainter(
colors: [
Colors.white.withOpacity(0.9),
Colors.white.withOpacity(0.9),
],
angle: 360 - ((this.used / this.total) * 360),
strokeWidth: this.strokeWidth,
),
size: Size.fromRadius(strokeWidth),
child: SizedBox(
width: this.radius,
height: this.radius,
),
)
If you want to paint widget conditionally you can use ternary operator like this:
(this.total <= 0)
? CustomPaint(
painter:CurvePainter(
colors: [
Colors.white.withOpacity(0.9),
Colors.white.withOpacity(0.9),
],
angle: 360 - ((this.used / this.total) * 360),
strokeWidth: this.strokeWidth,
),
size: Size.fromRadius(strokeWidth),
child: SizedBox(
width: this.radius,
height: this.radius,
),
) : Container(), // <--- Use it here, not inside CustomPainter
Do you change the variable inside setState?
setState((){
total = 0;
});
setstate rerenders the screen.