Flutter Markdown渲染插件markdown_core的使用

Flutter Markdown渲染插件markdown_core的使用

markdown_core 插件用于解析 Markdown 文本并将其渲染为富文本。

示例效果

示例代码

import 'package:example/data.dart';
import 'package:flutter/material.dart';
import 'package:markdown_core/markdown_core.dart';
import 'package:cached_network_image/cached_network_image.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.light,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).brightness == Brightness.dark
          ? Colors.black
          : Colors.white,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Markdown(
            data: markdownData,
            linkTap: (link) => print('点击了链接 $link'),
            image: (imageUrl) {
              print('imageUrl $imageUrl');
              return CachedNetworkImage(
                imageUrl: imageUrl,
                placeholder: (context, url) => Container(
                  width: double.infinity,
                  height: 300,
                  child: Center(child: CircularProgressIndicator()),
                ),
                errorWidget: (context, url, error) => Icon(Icons.error),
              );
            },
          ),
        ),
      ),
    );
  }
}

代码解释

1. 导入必要的包

   import 'package:example/data.dart'; // 导入Markdown数据
   import 'package:flutter/material.dart'; // 导入Flutter核心库
   import 'package:markdown_core/markdown_core.dart'; // 导入markdown_core包
   import 'package:cached_network_image/cached_network_image.dart'; // 导入缓存网络图片包

2. 创建应用入口

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

3. 创建应用主界面

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
           brightness: Brightness.light,
         ),
         home: MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }

4. 创建主页

   class MyHomePage extends StatefulWidget {
     MyHomePage({
       Key? key,
       required this.title,
     }) : super(key: key);
   
     final String title;
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }

5. 创建主页状态

   class _MyHomePageState extends State<MyHomePage> {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         backgroundColor: Theme.of(context).brightness == Brightness.dark
             ? Colors.black
             : Colors.white,
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: SafeArea(
           child: SingleChildScrollView(
             child: Markdown(
               data: markdownData,
               linkTap: (link) => print('点击了链接 $link'),
               image: (imageUrl) {
                 print('imageUrl $imageUrl');
                 return CachedNetworkImage(
                   imageUrl: imageUrl,
                   placeholder: (context, url) => Container(
                     width: double.infinity,
                     height: 300,
                     child: Center(child: CircularProgressIndicator()),
                   ),
                   errorWidget: (context, url, error) => Icon(Icons.error),
                 );
               },
             ),
           ),
         ),
       );
     }
   }