Your First Flutter App: Polishing the App
About this episode
Leave a rating/review
See forum comments
Mark complete
Next episode: 26. Conclusion
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Our slider looks really good, but it would be nice to upgrade the thumb. We want to add a custom image to it that looks like bullseye. Now, there are a couple of challenging aspects when updating the thumb. We first need to get the image from our app bundle.
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
class SliderThumbImage extends SliderComponentShape {
}
final ui.Image? image;
SliderThumbImage(this.image);
@override
Size getPreferredSize(bool isEnabled, bool isDiscrete) {
return const Size(0, 0);
}
@override
void paint(
PaintingContext context,
Offset center, {
required Animation<double> activationAnimation,
required Animation<double> enableAnimation,
required bool isDiscrete,
required TextPainter labelPainter,
required RenderBox parentBox,
required SliderThemeData sliderTheme,
required TextDirection textDirection,
required double value,
required double textScaleFactor,
required Size sizeWithOverflow,
}) {
}
final thumbImage = image;
if (thumbImage != null) {
}
final canvas = context.canvas;
final imageOffset = Offset(
center.dx - (thumbImage.width / 2),
center.dy - (thumbImage.height / 2),
);
var paint = Paint();
paint.filterQuality = FilterQuality.high;
canvas.drawImage(thumbImage, imageOffset, paint);
import 'slider_thumb_image.dart';
import 'dart:ui' as ui;
import 'package:flutter/services.dart';
ui.Image? _sliderImage;
Future<ui.Image> _load(String asset) async {
}
final data = await rootBundle.load(asset);
final codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
final fi = await codec.getNextFrame();
return fi.image;
@override
void initState() {
_load('images/nub.png').then((image) {
setState(() {
_sliderImage = image;
});
});
super.initState();
}
thumbShape: SliderThumbImage(_sliderImage),