showMarkdownFile function

Implementation

FutureBuilder showMarkdownFile(
  String markdownFilePath,
  BuildContext context,
) {
  return FutureBuilder(
    key: const Key('markdown_file'),
    future: loadAsset(markdownFilePath),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        String svgAsset = 'assets/svg/generic.svg';

        return Container(
          decoration: sunkenBoxDecoration,

          // 20241215 gjw It is easier to read the overview text when it is not
          // too wide. For now, and assuming the default window width, place the
          // Markdown text into a row and half fill the row. Eventually probably
          // want a fixed width?

          child: Row(
            children: [
              // The text goes into the left pane.

              Expanded(
                child: Markdown(
                  data: snapshot.data!,
                  selectable: true,
                  onTapLink: (text, href, title) {
                    final Uri url = Uri.parse(href ?? '');
                    launchUrl(url);
                  },

                  // Custom image builder to load assets.

                  imageBuilder: (uri, title, alt) {
                    return Image.asset('$assetsPath/${uri.toString()}');
                  },
                ),
              ),

              // The right pain is empty.

              Expanded(
                child: SvgPicture.asset(
                  svgAsset,
                  width: 300, // You can adjust these dimensions
                  height: 500, // to fit your needs
                  fit: BoxFit.contain,
                  // colorFilter: ColorFilter.mode(Colors.grey, BlendMode.srcIn),
                ),
                // child: SvgPicture.string(
                //   svgString,
                //   width: 300, // You can adjust these dimensions
                //   height: 500, // to fit your needs
                //   fit: BoxFit.contain,
                //   // colorFilter: ColorFilter.mode(Colors.grey, BlendMode.srcIn),
                // ),
              ),
            ],
          ),
        );
      }

      return const Center(child: CircularProgressIndicator());
    },
  );
}