[flutter_markdown] Adopt code excerpts in README (#4656)

Updates the README to use a compiled excerpt source for its example of creating a `Markdown`.

Part of https://github.com/flutter/flutter/issues/102679
This commit is contained in:
Maurice Parrish
2023-08-07 16:02:36 -04:00
committed by GitHub
parent 6cb2a32b7f
commit 470a325e11
5 changed files with 85 additions and 13 deletions

View File

@ -1,6 +1,7 @@
## NEXT ## 0.6.17+1
* Deletes deprecated splash screen meta-data element. * Deletes deprecated splash screen meta-data element.
* Updates README to improve examples of using Markdown.
## 0.6.17 ## 0.6.17

View File

@ -54,12 +54,18 @@ documents, respectively. GitHub Web adds header ID and emoji support. The
Using the Markdown widget is simple, just pass in the source markdown as a Using the Markdown widget is simple, just pass in the source markdown as a
string: string:
Markdown(data: markdownSource); <?code-excerpt "example/lib/readme_excerpts.dart (CreateMarkdown)"?>
```dart
const Markdown(data: markdownSource);
```
If you do not want the padding or scrolling behavior, use the MarkdownBody If you do not want the padding or scrolling behavior, use the MarkdownBody
instead: instead:
MarkdownBody(data: markdownSource); <?code-excerpt "example/lib/readme_excerpts.dart (CreateMarkdownBody)"?>
```dart
const MarkdownBody(data: markdownSource);
```
By default, Markdown uses the formatting from the current material design theme, By default, Markdown uses the formatting from the current material design theme,
but it's possible to create your own custom styling. Use the MarkdownStyle class but it's possible to create your own custom styling. Use the MarkdownStyle class
@ -79,12 +85,13 @@ formatted output of the Markdown widget. For example, in the following Markdown
widget constructor, a text string with a smiley face emoji is passed in as the widget constructor, a text string with a smiley face emoji is passed in as the
source Markdown data. source Markdown data.
<?code-excerpt "example/lib/readme_excerpts.dart (CreateMarkdownWithEmoji)"?>
```dart ```dart
Markdown( Markdown(
controller: controller, controller: controller,
selectable: true, selectable: true,
data: 'Insert emoji here😀 ', data: 'Insert emoji here😀 ',
) );
``` ```
The resulting Markdown widget will contain a single line of text with the The resulting Markdown widget will contain a single line of text with the
@ -100,18 +107,22 @@ auto-links, and strike-through. To include the inline emoji tag syntax
while maintaining the default GitHub flavored Markdown behavior, define while maintaining the default GitHub flavored Markdown behavior, define
an extension set that combines EmojiSyntax with ExtensionSet.gitHubFlavored. an extension set that combines EmojiSyntax with ExtensionSet.gitHubFlavored.
<?code-excerpt "example/lib/readme_excerpts.dart (CreateMarkdownWithEmojiExtension)"?>
```dart ```dart
import 'package:markdown/markdown.dart' as md; import 'package:markdown/markdown.dart' as md;
// ···
Markdown( Markdown(
controller: controller, controller: controller,
selectable: true, selectable: true,
data: 'Insert emoji :smiley: here', data: 'Insert emoji :smiley: here',
extensionSet: md.ExtensionSet( extensionSet: md.ExtensionSet(
md.ExtensionSet.gitHubFlavored.blockSyntaxes, md.ExtensionSet.gitHubFlavored.blockSyntaxes,
[md.EmojiSyntax(), ...md.ExtensionSet.gitHubFlavored.inlineSyntaxes], <md.InlineSyntax>[
md.EmojiSyntax(),
...md.ExtensionSet.gitHubFlavored.inlineSyntaxes
],
), ),
) );
``` ```
## Image Support ## Image Support

View File

@ -0,0 +1,61 @@
// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/cupertino.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
// #docregion CreateMarkdownWithEmojiExtension
import 'package:markdown/markdown.dart' as md;
// #enddocregion CreateMarkdownWithEmojiExtension
/// Create a simple `Markdown` wdget.
void createMarkdown() {
const String markdownSource = '';
// #docregion CreateMarkdown
const Markdown(data: markdownSource);
// #enddocregion CreateMarkdown
}
/// Create a simple `MarkdownBody` widget.
void createMarkdownBody() {
const String markdownSource = '';
// #docregion CreateMarkdownBody
const MarkdownBody(data: markdownSource);
// #enddocregion CreateMarkdownBody
}
/// Create a simple `Markdown` widget with an emoji.
void createMarkdownWithEmoji() {
final ScrollController controller = ScrollController();
// #docregion CreateMarkdownWithEmoji
Markdown(
controller: controller,
selectable: true,
data: 'Insert emoji here😀 ',
);
// #enddocregion CreateMarkdownWithEmoji
}
/// Create a simple `Markdown` widget with an emoji extension.
void createMarkdownWithEmojiExtension() {
final ScrollController controller = ScrollController();
// #docregion CreateMarkdownWithEmojiExtension
Markdown(
controller: controller,
selectable: true,
data: 'Insert emoji :smiley: here',
extensionSet: md.ExtensionSet(
md.ExtensionSet.gitHubFlavored.blockSyntaxes,
<md.InlineSyntax>[
md.EmojiSyntax(),
...md.ExtensionSet.gitHubFlavored.inlineSyntaxes
],
),
);
// #enddocregion CreateMarkdownWithEmojiExtension
}

View File

@ -4,7 +4,7 @@ description: A Markdown renderer for Flutter. Create rich text output,
formatted with simple Markdown tags. formatted with simple Markdown tags.
repository: https://github.com/flutter/packages/tree/main/packages/flutter_markdown repository: https://github.com/flutter/packages/tree/main/packages/flutter_markdown
issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+flutter_markdown%22 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+flutter_markdown%22
version: 0.6.17 version: 0.6.17+1
environment: environment:
sdk: ">=3.0.0 <4.0.0" sdk: ">=3.0.0 <4.0.0"

View File

@ -10,7 +10,6 @@
- espresso - espresso
- extension_google_sign_in_as_googleapis_auth - extension_google_sign_in_as_googleapis_auth
- flutter_image - flutter_image
- flutter_markdown
- go_router_builder - go_router_builder
- google_sign_in/google_sign_in - google_sign_in/google_sign_in
- image_picker_for_web - image_picker_for_web