Flutter Markdown渲染与通知插件markdown_notifier的使用

Flutter Markdown渲染与通知插件markdown_notifier的使用

提供一种通过Markdown文件与用户进行简单通信的方式。适用于版本更新日志、通知、紧急信息、状态更新、开发更新等。

特性

  • 不需要额外的服务器，可以与Github或类似的服务无缝协作
  • 使用Markdown自定义数据
  • 离线支持：即使没有互联网连接，用户也可以查看以前的消息
  • 易于使用
  • 插件式组件，部分可定制化
  • 最小依赖项

开始使用

  1. 通过flutter pub get markdown_notifier和flutter pub get path_provider安装
  2. 将您的通知Markdown文件添加到仓库中，可以按您喜欢的名称命名，例如 NOTIFICATIONS.md
  3. 在文件中添加一些内容，如果需要创建章节，请使用 <br> 标签

图片


![Alarm ringing](https://raw.githubusercontent.com/Flajt/markdown_notifier/ec88d55aa9fdea16d23d4dd8db92d93a22eaca99/imgs/1.jpg)

如果有新数据，将显示此图标，它是可定制的


![Dialog with text](https://raw.githubusercontent.com/Flajt/markdown_notifier/ec88d55aa9fdea16d23d4dd8db92d93a22eaca99/imgs/2.jpg)

显示通知顺序的对话框，仅作为示例，根据Markdown文件的样式可能有所不同


![A text with emojis and code example](https://raw.githubusercontent.com/Flajt/markdown_notifier/ec88d55aa9fdea16d23d4dd8db92d93a22eaca99/imgs/3.jpg)

显示完整通知的对话框


![Alarm not ringing](https://raw.githubusercontent.com/Flajt/markdown_notifier/ec88d55aa9fdea16d23d4dd8db92d93a22eaca99/imgs/4.jpg)

如果您已经查看了所有通知，图标看起来像这样，它也是可定制的

使用方法

使用非常简单：

  1. 在 NotificationQueryLogic 中替换URL为您的URL，需要是一个原始链接（例如 raw.githubusercontent）。如果您不使用Github，请确保返回的数据是纯文本，而不是文件。
  2. 可选：决定查询周期，这是用于查询URL以获取数据的时间间隔。
  3. 决定缓存路径。
  4. 通过 .init 方法初始化 NotificationQueryLogic 实例。
  5. 在需要的地方放置 InfoButton 并传递给它一个 NotificationQueryLogic 实例。

示例代码：

final queryLogic = NotificationQueryLogic(
  url: "https://raw.githubusercontent.com/Flajt/markdown_notifier/master/NOTIFICATIONS.md"
);
final dir = await getTemporaryDirectory();
await queryLogic.init(dir.path);

更多关于Flutter Markdown渲染与通知插件markdown_notifier的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Markdown渲染与通知插件markdown_notifier的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，你可以使用 flutter_markdown 包来渲染Markdown内容，并使用 markdown_notifier 插件来管理和更新Markdown内容。下面是如何使用这两个工具的详细步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_markdown 和 markdown_notifier 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_markdown: ^0.6.10+2
  markdown_notifier: ^0.1.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 使用 flutter_markdown 渲染Markdown

flutter_markdown 是一个用于在Flutter应用中渲染Markdown的包。以下是一个简单的例子，展示如何使用它来渲染Markdown内容：

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';

class MarkdownPage extends StatelessWidget {
  final String markdownData = '''
  # Hello, Markdown!

  This is a **Markdown** example.

  - Item 1
  - Item 2
  - Item 3

  [Visit Google](https://www.google.com)
  ''';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Markdown Example'),
      ),
      body: Markdown(
        data: markdownData,
      ),
    );
  }
}

3. 使用 markdown_notifier 管理Markdown内容

markdown_notifier 是一个用于管理和更新Markdown内容的插件。它可以帮助你在应用中动态更新Markdown内容。

以下是一个简单的例子，展示如何使用 markdown_notifier 来动态更新Markdown内容：

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:markdown_notifier/markdown_notifier.dart';

class MarkdownNotifierPage extends StatefulWidget {
  [@override](/user/override)
  _MarkdownNotifierPageState createState() => _MarkdownNotifierPageState();
}

class _MarkdownNotifierPageState extends State<MarkdownNotifierPage> {
  MarkdownNotifier markdownNotifier = MarkdownNotifier('''# Initial Markdown Content''');

  void _updateMarkdown() {
    markdownNotifier.value = '''
    # Updated Markdown Content

    This content has been updated!

    - New Item 1
    - New Item 2
    ''';
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Markdown Notifier Example'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ValueListenableBuilder<String>(
              valueListenable: markdownNotifier,
              builder: (context, markdownData, child) {
                return Markdown(
                  data: markdownData,
                );
              },
            ),
          ),
          ElevatedButton(
            onPressed: _updateMarkdown,
            child: Text('Update Markdown'),
          ),
        ],
      ),
    );
  }
}
回到顶部