Is there any way we can add custom margin around 'CupertinoSwitch' thumb? Below is how I am using 'CupertinoSwitch', I don't find any property for the same available for this widget.
`CupertinoSwitch(
onChanged: onChanged,
value: value,
activeColor:
MyColors.primaryColor.platformBrightnessColor(context),
trackColor:
MyColors.greyColor.platformBrightnessColor(context),
),`
And below is how it is looking--
Bydefault the (white-circular thumb) margin is 1px, I want to make it custom as per the business needs. Please suggest if there is any workaround available for this, also let me know if more details required on the same. Thanks in advance!
this is flutter source code form thumb_painter.dart && geometry.dart.
you can edit #param delta for you need.
/// Returns a new [RRect] with edges and radii moved outwards by the given
/// delta.
RRect inflate(double delta) {
return RRect._raw(
left: left - delta,
top: top - delta,
right: right + delta,
bottom: bottom + delta,
tlRadiusX: math.max(0, tlRadiusX + delta),
tlRadiusY: math.max(0, tlRadiusY + delta),
trRadiusX: math.max(0, trRadiusX + delta),
trRadiusY: math.max(0, trRadiusY + delta),
blRadiusX: math.max(0, blRadiusX + delta),
blRadiusY: math.max(0, blRadiusY + delta),
brRadiusX: math.max(0, brRadiusX + delta),
brRadiusY: math.max(0, brRadiusY + delta),
);
}
' Container(
// margin:EdgeInsets.only(left: 10,right: 5,top: 50,bottom: 20),
//margin: EdgeInsets.all(50),
//margin: EdgeInsets.symmetric(vertical: 50,horizontal: 50),
child:CupertinoSwitch(
onChanged: onChanged,
value: value,
activeColor:
MyColors.primaryColor.platformBrightnessColor(context),
trackColor:
MyColors.greyColor.platformBrightnessColor(context),)) `
Related
In Flutter, if we use the ColorFilter widget, it takes a ColorFilter.matrix and an Image, on which it applies the ColorFilter.matrix.
const ColorFilter sepia = ColorFilter.matrix(<double>[
0.393, 0.769, 0.189, 0, 0,
0.349, 0.686, 0.168, 0, 0,
0.272, 0.534, 0.131, 0, 0,
0, 0, 0, 1, 0,
]);
Container _buildFilterThumbnail(int index, Size size) {
final Image image = Image.file(
widget.imageFile,
width: size.width,
fit: BoxFit.cover,
);
return Container(
padding: const EdgeInsets.all(4.0),
decoration: BoxDecoration(
border: Border.all(color: _selectedIndex == index ? Colors.blue : Theme.of(context).primaryColor, width: 4.0),
),
child: ColorFiltered(
colorFilter: ColorFilter.matrix(filters[index].matrixValues),
child: Container(
height: 80,
width: 80,
child: image,
),
),
);
}
How can we get the underlying image (in pixels/bytes) so that it can be saved on disk. I don't want to save the rendered ColorFiltered area on the screen.
Curretly am forced to use the photofilters library from pub.dev, which does the pixel manipulation to apply the custom filters. However, its not very efficient and essentially applies the pixel level manipulation for every thumbnail, making it very slow. On the other hand, ColorFiltered widget is lightening fast!
Below is internal working of photofilters library
int clampPixel(int x) => x.clamp(0, 255);
// ColorOverlay - add a slight color overlay.
void colorOverlay(Uint8List bytes, num red, num green, num blue, num scale) {
for (int i = 0; i < bytes.length; i += 4) {
bytes[i] = clampPixel((bytes[i] - (bytes[i] - red) * scale).round());
bytes[i + 1] =
clampPixel((bytes[i + 1] - (bytes[i + 1] - green) * scale).round());
bytes[i + 2] =
clampPixel((bytes[i + 2] - (bytes[i + 2] - blue) * scale).round());
}
}
// RGB Scale
void rgbScale(Uint8List bytes, num red, num green, num blue) {
for (int i = 0; i < bytes.length; i += 4) {
bytes[i] = clampPixel((bytes[i] * red).round());
bytes[i + 1] = clampPixel((bytes[i + 1] * green).round());
bytes[i + 2] = clampPixel((bytes[i + 2] * blue).round());
}
}
Any pointers appreciated.
I have a wrap with start alignment and it shows like this.
In my case, I do not want the free space that you see on the right to remain. I can fix this with space between alignment and it looks like this.
But in this case I don't want the last line, having 3 items, to be placed that way, if not in the way that start alignment provides me.
I implemented this by calculating spacing value:
Wrap(
spacing: _calculateSpacing(),
alignment: WrapAlignment.start,
children: tiles,
);
double _calculateSpacing() {
return _calculateSpacingWith(
width: MediaQuery.of(context).size.width,
tileWidth: _TileWidget.width,
minSpacing: 4,
);
}
double _calculateSpacingWith({
required double width,
required double tileWidth,
required double minSpacing,
}) {
// N = tilesInRow
// tileWidth * N + spacing * (N-1) = width
final tilesInRow = ((width + minSpacing) / (tileWidth + minSpacing)).floor();
if (tilesInRow <= 1) {
return 0;
}
final spacing = ((width - tileWidth * tilesInRow) / (tilesInRow - 1)).floorToDouble();
return spacing;
}
Hello guys I have a Listview.builder which display the week days, and I want to make this listview.builder start always from the current days which is highlighted.
This is my Code:
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 7,
itemBuilder: (BuildContext context, int index) {
DateTime now = DateTime.now();
int milliseconds = now.millisecondsSinceEpoch -
(now.weekday - 1) * 24 * 60 * 60 * 1000 +
weekIndex * 7 * 24 * 60 * 60 * 1000 +
index * 24 * 60 * 60 * 1000;
DateTime dayDateTime =
DateTime.fromMillisecondsSinceEpoch(milliseconds);
int monthIndex = dayDateTime.month - 1;
List months = [
'Gennaio',
'Febbraio',
'Marzo',
'Aprile',
'Maggio',
'Giugno',
'Luglio',
'Agosto',
'Settembre',
'Ottobre',
'Novembre',
'Dicembre'
];
List weekdays = [
'Lunedì',
'Martedì',
'Mercoledì',
'Giovedì',
'Venerdì',
'Sabato',
'Domenica'
];
String month = months[monthIndex];
String day = dayDateTime.day.toString();
String weekday = weekdays[dayDateTime.weekday - 1];
String date = weekday + ' ' + day + ' ' + month;
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
Container(
height: 50,
width: MediaQuery.of(context).size.width*0.50,
child: Card(
color: now.weekday == index + 1 && weekIndex == 0 ? Colors.orange[900]: Colors.orange,
child: Center(
child: Text(
date,
style: TextStyle(
fontSize: 13, color: Colors.white),
),
),
),
),
as you can see the current days is controlled by now.weekday == index + 1 && weekIndex == 0
I guess I need to add a controller to Listviewbuilder to achieve my purpose but I dont know how to do.
And I need also to consider when is Sunday it remaine just one day in the list.
Any Input?
You can use add method for dateTime that gets a Duration.
Hope below code helps you:
DateTime dateTime = DateTime.now();
dateTime.add(Duration(days: index));
//
//
String month = months[dateTime.month - 1];
String day = dateTime.day.toString();
String weekday = weekdays[dateTime.weekday - 1];
String date = weekday + ' ' + day + ' ' + month;
//
//
color: index == 0 ? Colors.orange[900]: Colors.orange,
Check out this indexed_list_view package
Similar to a ListView, but lets you programmatically jump to any item, by index. The index jump happens instantly, no matter if you have millions of items.
I need to display a CameraPreview widget and an image (separately) with the contrast adjusted on both. I've been looking into the ColorFiltered and ShaderMask widgets but I'm not sure what blend mode to use or if it will be helpful to change the blend mode. Does anyone have any examples of changing the contrast?
Hey I would recommend you to use you a color matrix to achieve your desired contrast.
You could use following Color matrix within an ColoFiltered widget:
class CustomSubFilters extends ColorFilter {
CustomSubFilters.matrix(List<double> matrix) : super.matrix(matrix);
factory CustomSubFilters.contrast(double c) {
num t = (1.0 - (1 + c)) / 2.0 * 255;
return CustomSubFilters.matrix(<double>[
1 + c,
0,
0,
0,
t,
0,
1 + c,
0,
0,
t,
0,
0,
1 + c,
0,
t,
0,
0,
0,
1,
0,
]);
}
}
Simply just wrap your widget within a ColorFiltered widget and use this colormatrix.
I used Camera plugin and there was no inbuilt feature in package to set contrast/brightness so I have set it by ColorFiltered widget as:
ColorFiltered(
colorFilter: const ColorFilter.mode(
Colors.white,
BlendMode.softLight,
// BlendMode.overlay,
),
child: CameraPreview(camController),
)
It worked for me. I hope, this solution will also help you. Thanks a lot for asking this question.
I have created a chart using dc.js, and I havea a nice label on my Y axis. However, it is running through the number next to the ticks. How can I prevent this?
Code to create the chart:
chart
.x(d3.scale.ordinal().domain(allCodes))
.xUnits(dc.units.ordinal)
.yAxisLabel("Number of actions")
.elasticY(true)
.dimension(runDimension)
.group(openActionCountGroup, "Open")
.stack(closedActionCountGroup, "Closed")
.colors (d2acolors)
.legend(dc.legend().x(540).y(10))
.title(function(d) { return d.key + ": " + d.value; })
;
You are likely looking for the margins method.
Here is an example: http://jsfiddle.net/djmartin_umich/rRVgu/
chart
.x(d3.scale.ordinal().domain(allCodes))
.height(300)
.width(300)
.margins({left: 50, right: 30, top: 0, bottom: 40})
.xUnits(dc.units.ordinal)
.yAxisLabel("Number of actions")
.elasticY(true)
.dimension(runDimension)
.group(openActionCountGroup, "Open")
.stack(closedActionCountGroup, "Closed")
.legend(dc.legend().x(540).y(10))
.title(function(d) { return d.key + ": " + d.value; });
You can change the left margin to give more room for the ticks.