Flutter pdf multiple images

Question

I'm trying to load multiple images (from assets or cache) into the pdf, but it does not work. There are no errors, the pdf is created, but is corrupted somehow and does not want to open. Everything is 100% if there is only 1 image, or if all the images are the same image. What am I doing wrong?

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(backgroundColor: Colors.red, title: Text('Images')),
            body: Center(child: HomeScreen())));
  }
}

class HomeScreen extends StatefulWidget {
  HomeScreenState createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: ListView(
        children: <Widget>[
          RaisedButton(
            color: Colors.red,
            onPressed: () async {
              writeOnPdf();
              await savePdf();
            },
            child: Text('Create Pdf'),
          ),
        ],
      ),
    ));
  }
}

final pdf = pw.Document();

writeOnPdf() async {
  var assetImage = PdfImage.file(
    pdf.document,
    bytes: (await rootBundle.load('assets/aa.png')).buffer.asUint8List(),
  );

  var otherImage = PdfImage.file(
    pdf.document,
    bytes: (await rootBundle.load('assets/out.png')).buffer.asUint8List(),
  );

  pdf.addPage(pw.MultiPage(
      pageFormat: PdfPageFormat.a4,
      margin: pw.EdgeInsets.all(32),
      build: (pw.Context context) {
        return <pw.Widget>[
          pw.Column(
              crossAxisAlignment: pw.CrossAxisAlignment.center,
              mainAxisAlignment: pw.MainAxisAlignment.spaceBetween,
              children: <pw.Widget>[
                pw.ClipRect(
                  child: pw.Container(
                    width: 550,
                    height: 250,
                    child: pw.Image(assetImage),
                  ),
                ),
              ]),
          pw.ClipRect(
            child: pw.Container(
              width: 100,
              height: 100,
              child: pw.Image(otherImage),
            ),
          )
        ];
      }));
}

final bool isHTML = false;

Future savePdf() async {
  Directory tempDir = await getTemporaryDirectory();
  String tempPath = tempDir.path;
  File file = File('$tempPath/1234.pdf');
  file.writeAsBytesSync(pdf.save());
  print(tempDir.listSync());
}

It would be ideal if I could load one image from the assets and one image from the cache. But at the moment nothing works. Any advice would be appreciated.

Solution

DavBfr gave the answer. "It's an issue with async/await."

Multiple Images #425]1

              RaisedButton(
            color: Colors.red,
            onPressed: () async {
              final pdf = await writeOnPdf();
              await savePdf(pdf);
            },
            child: const Text('Create Pdf'),
          ),