Flutter CustomPaint in SingleChildScrollView not showing

Question

I have some flutter code like this:

class ImagePage extends StatefulWidget {
  final Class clazz;

  ImagePage(this.clazz);

  @override
  _ImagesPageState createState() => _ImagesPageState();
}

class _ImagesPageState extends State<ImagePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      appBar: AppBar(
        title: Text(widget.clazz.name),
      ),
      body: SingleChildScrollView(
          child: CustomPaint(
        painter: _TalentPainter([
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
          "image.png",
        ]),
      )),
    );
  }
}

class _TalentPainter extends CustomPainter {
  Paint _paint;
  List<ui.Image> _images = <ui.Image>[];

  _TalentPainter(List<String> _imagePaths) {
    this._paint = Paint()..isAntiAlias = true;
    _imagePaths.forEach((path) {
      getImage(path).then((image) {
        _images.add(image);
      });
    });
  }

  @override
  void paint(Canvas canvas, Size size) {
    for (int i = 0; i < _images.length; i++) {
      ui.Image image = _images.elementAt(i);
      canvas.drawImage(
          image, Offset(image.width.toDouble(), image.height * i.toDouble()), _paint);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

  Future<ui.Image> getImage(String image) async {
    ByteData data = await rootBundle.load("assets/images/class_icon/$image");
    Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
    ui.FrameInfo fi = await codec.getNextFrame();
    return fi.image;
  }
}

I want to custom a widget to show some images and other things and its content will go beyond the screen, i want it to scroll, now i have done some works above, i'm warp CustomPaint with a SingleChildScrollView but the images all gone, i don't know why, please help me, english is not my first language so please excuse any mistakes, thank you

Answer 1

When you have problems like that you need to isolate the bug. To do that try to make the simplest working feature example.

In this case the simple example would be _TalentPainter class with only one image, without SingleChildScrollView wrap.

The _TalentPainter wouldn't work because, you have Future call in the construction, and at the moment when paint method would be called, _images is empty.

Answer 2

The paint do not work since SingleChildScrollView "hide" the context's layout for the child. So you need to define the size for CustomPaint. And LayoutBuilder will help to get the context's constraints.