Flutter User ColorFiltered to dark image with matrix - flutter

I want in flutter to user ColorFiltered, so i can make jpg image dark here is my code but i didn't get the right result, i don't understand matrix and how to change color this code was from internet, please any idea will be welcome.
ColorFiltered(
child: ColorFiltered(
child: Image.asset(
'myimage.jpg',
fit: BoxFit.fill,
),
colorFilter: ColorFilter.matrix(
[
//R G B A Const
-1, 0, 0, 0, 190, //
0, -1, 0, 0, 255, //
0, 0, -1, 0, 255, //
0, 0, 0, 1, 0, //
],
),
),
colorFilter: ColorFilter.mode(
Colors.white,
BlendMode.darken,
),
)

If you just want to make your image darker the better solution is probably just putting a transparent black Container over your image with a Stack widget:
Stack(children: <Widget>[
Image.network('https://picsum.photos/250?image=9'),
Positioned.fill(
child: Opacity(
opacity: 0.5,
child: Container(
color: const Color(0xFF000000),
),
),
),
]),
If you really want to use ColorFiltered let me know but you can do something like this:
ColorFiltered(
child: Image.network('https://picsum.photos/250?image=9'),
colorFilter: const ColorFilter.mode(
Color(0xFF3D3D3D),
BlendMode.darken,
),
),
Keep in mind that ColorFiltered will not just add a new grey layer over the image. It transforms every pixel of the image separately.
As per the documentation:
This widget applies a function independently to each pixel of child's content, according to the ColorFilter specified.

there is the result based on my search and a little refactoring :
static ColorFilter brightnessAdjust(double value) {
if (value >= 0.0) {
value = value * 255;
} else {
value = value * 100;
}
List<double> matrix;
if (value == 0) {
matrix = identityMatrix;
} else {
matrix = [
1,
0,
0,
0,
value,
0,
1,
0,
0,
value,
0,
0,
1,
0,
value,
0,
0,
0,
1,
0
];
}
return ColorFilter.matrix(matrix);
}
positive value to lighten and negative value to darken (-1 to 1), zero no change anything

Related

Flutter - How to place card back in the stack after left swipe

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.

How to get InteractiveViewer image pixel coordinate in flutter?

i want to get pixel coordinate when i tapped the screen, i use interactiveView and GestureDetect in Fultter, i am so confused about the matrix transform , i am new to App develop, please give some advice if you could, very appraciate, Below is my code, which now i can zoom the image, but i can't calculate the coorect pixel coordiante when i click the screen. and since i have no idea how to calculate the ratio between pixel distance<->screen distance, i was stucked there. please help me.
What i am doing is i need pick a pixel position from the image, so i need zoom image first to get precise position,that's why i need ineractiveViewer . and at the same time i need record the gesture behavior, to monitor the behavior, then i wrapper InteractiveView to GestureDetect.
it look like this for now:
enter image description here
Widget mapView() {
double offsetX, offsetY;
return Stack(
children: <Widget>[
Positioned.fill(
child:
GestureDetector(
onTapUp: (TapUpDetails details) {
offsetX = details.localPosition.dx;
offsetY = details.localPosition.dy;
// print(
//"tap local pos, X: ${details.localPosition.dx}, Y: ${details.localPosition.dy}");
// print(
// "tap global pos, X: ${details.globalPosition.dx}, Y: ${details.globalPosition.dy}");
_childWasTappedAt = _transformationController!.toScene(details.localPosition);
// print(
// "child pos to scene , X: ${_childWasTappedAt!.dx}, Y: ${_childWasTappedAt!.dy}");
//double origin_scree_pixel_radio = 17;
MediaQueryData queryData;
queryData = MediaQuery.of(context);
double pixel_ratio = queryData.devicePixelRatio;
double scree_pixel_radio = (1.0 / _cur_scale_value!)*pixel_ratio;
double trans_x = -1.0 * _transformationController!.value.getTranslation().x;
double local_offset_x = offsetX;
double pixel_x = trans_x + local_offset_x * scree_pixel_radio;
print("scale: ${_cur_scale_value}");
print("radio: ${pixel_ratio}");
print("view tran x: ${trans_x}");
print("offset x: ${local_offset_x}");
//print("image_Info: ${_image_info.toString()}");
print("Pixel X: ${pixel_x}");
},
child:
InteractiveViewer(
transformationController: _transformationController,
minScale: 0.001,
maxScale: 200.0,
constrained: false,
child: Image.asset(
imagePath,
filterQuality:FilterQuality.high,
),
onInteractionEnd: (ScaleEndDetails details) {
_cur_scale_value = _transformationController!.value.getMaxScaleOnAxis();
//print("current scale: ${_cur_scale_value}");
},
onInteractionUpdate: (ScaleUpdateDetails details){
//print('onInteractionUpdate----' + details.toString());
},
),
),
),
Positioned(
top: 0.0,//_vehicle_y,
left: 0.0,//_vehicle_x,
child: Icon(Icons.favorite, color: Colors.red,),
),
],
);
}
Use this onInteractionUpdate method to get Coordinates. use also use different methods.
Vist This site for more info:-
https://api.flutter.dev/flutter/widgets/InteractiveViewer/onInteractionUpdate.html
https://api.flutter.dev/flutter/gestures/ScaleStartDetails/localFocalPoint.html
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: InteractiveViewer(
onInteractionUpdate: (v) {
print(v.localFocalPoint.dx);
print(v.localFocalPoint.dy);
},
child: Image.network(
"https://images.unsplash.com/photo-1643832678771-fdd9ed7638ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDd8Ym84alFLVGFFMFl8fGVufDB8fHx8&auto=format&fit=crop&w=2400&q=60",
fit: BoxFit.fitHeight,
),
),
),
);
}

how to make multi color gauge in flutter?

How to make this type of gauge in flutter application?
Image
check this library :- fl_chart
it has all the charts and graph and you can customise it as you want
you can use this package :
syncfusion_flutter_gauges
then import this package in your dart file:
import 'package:syncfusion_flutter_gauges/gauges.dart';
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfRadialGauge(),
),
);
}
Normal radial slider
To create a normal radial slider, we need to disable the labels and ticks properties in the RadialAxis class and set the axis range values in the minimum and maximum properties based on our design needs.
To show 100 percent progress, we need to define the axis’s minimum value as 0 and maximum value as 100 as in the following code example.
SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(minimum: 0,
maximum: 100,
showLabels: false,
showTicks: false,
axisLineStyle: AxisLineStyle(
cornerStyle: CornerStyle.bothCurve,
color: Colors.white30,
thickness: 25),
)
]
)
The range pointer will be the track and the marker pointer will be the thumb for the radial slider. You can also set a gradient for the range pointer as shown in the following code example.
SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(
pointers: <GaugePointer>[
RangePointer(
value: 50,
cornerStyle: CornerStyle.bothCurve,
width: 25,
sizeUnit: GaugeSizeUnit.logicalPixel,
gradient: const SweepGradient(
colors: <Color>[
Color(0xFFCC2B5E),
Color(0xFF753A88)
],
stops: <double>[0.25, 0.75]
)),
MarkerPointer(
value: 50,
enableDragging: true,
markerHeight: 34,
markerWidth: 34,
markerType: MarkerType.circle,
color: Color(0xFF753A88),
borderWidth: 2,
borderColor: Colors.white54)
], )
]
)

How to conditionally render in Flutter

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.

GestureDetector doesn't work when i use ListView.builder with Transform

I'm trying to position the containers in the center of the screen using Transform and I want GestureDetector to work on each Container, but, in this case, when I click on one of these containers it doesn't work, it's like there's something on top of it and that doesn't allow onTap to work.
When my Matrix4 looks like this GestureDetector works:
Matrix4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
)..rotateZ(_rotate[index].value),
But when I add 100 to Matrix4 it doesn't work:
Matrix4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 100, 0, 1,
)..rotateZ(_rotate[index].value),
Full code:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class TransformPage extends StatefulWidget {
#override
_TransformState createState() => _TransformState();
}
class _TransformState extends State<TransformPage>
with TickerProviderStateMixin {
//Variables
AnimationController _animationController;
List<Color> _color = [Colors.red, Colors.blue, Colors.indigo, Colors.green];
List<Animation> _rotate = List<Animation>(4),
_sizeWidth = List<Animation>(4),
_sizeHeight = List<Animation>(4);
Animation _curve;
#override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: Duration(seconds: 2));
_curve = CurvedAnimation(parent: _animationController, curve: Curves.ease);
for (int i = 0; i < 4; i++) {
_sizeWidth[i] = Tween<double>(begin: 0, end: 120).animate(_curve);
_sizeHeight[i] = Tween<double>(begin: 0, end: 120).animate(_curve);
_rotate[i] = Tween<double>(begin: 0, end: 2.35).animate(_curve);
}
_animationController.addListener(() {
setState(() {});
});
_animationController.forward();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: CupertinoNavigationBar(
middle: Text("Testing"),
backgroundColor: Colors.grey.shade200,
),
body: ListView.builder(
itemCount: 4,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
print(index);
},
behavior: HitTestBehavior.translucent,
child: Stack(
alignment: Alignment.center,
children: [
Transform(
transform:
Matrix4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 100, 0, 1,
)..rotateZ(_rotate[index].value),
child: Container(
width: _sizeWidth[index].value,
height: _sizeHeight[index].value,
color: _color[index],
),
alignment: Alignment.center,
),
],
),
);
},
),
);
}
}
I already tried using Positioned, but the result is the same :(
the Transform widget, has a special way to deal with his child, It changes its content the way you want it to be, but its reference remains on the main widget, I had the same thing when I used Transform.scale.
If you want the ListView widget to move away from the top edge, use the Padding widget,
it is worked, I copied your code to my project and Show debug paint, The result was like this :
with this code :
Matrix4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 100, 0, 1,
)..rotateZ(_rotate[index].value),
the result is :
As for this code:
Matrix4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
)..rotateZ(_rotate[index].value),
the result is :
the result with Padding widget is:
Note: onTap It actually works in the middle square