首页 > 解决方案 > 如何在flutter web中显示源代码?

问题描述

我想在flutter web中显示这个源代码。

Widget build(BuildContext context) {
    return SafeArea(
      top: true,
      bottom: true,
      child: Scaffold(
        body: bodyView(),
      ),
    );
  }

标签: flutterflutter-web

解决方案


我之前的回答被版主删除了,所以这次我用一个具体的例子重新发布它。

您可以使用支持反引号的包flutter_markdown来显示格式化代码。包的示例文件有一个带有 dart 代码的示例。

代码示例:

const String _markdownData = """
## Code blocks
Formatted Dart code looks really pretty too:
    ```
    void main() {
      runApp(MaterialApp(
        home: Scaffold(
          body: Markdown(data: markdownData),
        ),
      ));
    }
    ```
""";

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    final controller = ScrollController();

    return Scaffold(
      body: SafeArea(
        child: Markdown(
          controller: controller,
          selectable: true,
          data: _markdownData,
          imageDirectory: 'https://raw.githubusercontent.com',
        ),
      ),
    );
  }
}

图片

在此处输入图像描述


推荐阅读