Bug: `blockquote` property not being applied in `MarkdownBody` widget #81720

patakihara · 2021-04-19T23:04:39Z

Describe the bug
The blockquote property is not being applied in the MarkdownBody widget. All other TextStyle properties appear to be working, and so are the blockquotePadding and blockQuoteDecoration.

How to reproduce
Steps to reproduce the behavior:

Build a MarkdownBody widget
Specify the blockquote property to something like TextTheme.of(context).bodyText2.copyWith(color: Colors.red)
Note that the text does not, in fact, become red.

Expected behavior
Text should become red in the above example.

Additional context
Only tested on flutter web

The text was updated successfully, but these errors were encountered:

TahaTesser · 2021-09-03T14:21:59Z

Hi @guilhermepata
Thanks for filing the issue, I can reproduce blockquote style doesn't have any affect, i tried changing font size and text color, nothing happens

minimal code sample

// 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/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import '../shared/markdown_demo_widget.dart';

// ignore_for_file: public_member_api_docs

const String _data = '''
# Minimal Markdown Test
---
This is a simple Markdown test. Provide a text string with Markdown tags
to the Markdown widget and it will display the formatted output in a scrollable
widget.

> This is my block quote


## Section 1
Maecenas eget **arcu egestas**, mollis ex vitae, posuere magna. Nunc eget
 aliquam tortor. Vestibulum porta sodales efficitur. Mauris interdum turpis
 eget est condimentum, vitae porttitor diam ornare.

### Subsection A
Sed et massa finibus, blandit massa vel, vulputate velit. Vestibulum vitae
venenatis libero. ***Curabitur sem lectus, feugiat eu justo in, eleifend
accumsan ante.*** Sed a fermentum elit. Curabitur sodales metus id mi ornare,
in ullamcorper magna congue.
''';

const String _notes = """
# Minimal Markdown Demo
---

## Overview

The simplest use case that illustrates how to make use of the
flutter_markdown package is to include a Markdown widget in a widget tree
and supply it with a character string of text containing Markdown formatting
syntax. Here is a simple Flutter app that creates a Markdown widget that
formats and displays the text in the string _markdownData. The resulting
Flutter app demonstrates the use of headers, rules, and emphasis text from
plain text Markdown syntax.

## Usage

The code sample below demonstrates a simple Flutter app with a Markdown widget.

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

const String _markdownData = """

Minimal Markdown Test

This is a simple Markdown test. Provide a text string with Markdown tags
to the Markdown widget and it will display the formatted output in a
scrollable widget.

Section 1

Maecenas eget arcu egestas, mollis ex vitae, posuere magna. Nunc eget
aliquam tortor. Vestibulum porta sodales efficitur. Mauris interdum turpis
eget est condimentum, vitae porttitor diam ornare.

Subsection A

Sed et massa finibus, blandit massa vel, vulputate velit. Vestibulum vitae
venenatis libero. Curabitur sem lectus, feugiat eu justo in, eleifend
accumsan ante. Sed a fermentum elit. Curabitur sodales metus id mi
ornare, in ullamcorper magna congue.
""";

void main() {
runApp(
MaterialApp(
title: "Markdown Demo",
home: Scaffold(
appBar: AppBar(
title: const Text('Simple Markdown Demo'),
),
body: SafeArea(
child: Markdown(
data: _markdownData,
),
),
),
),
);
}

""";

class MinimalMarkdownDemo extends StatelessWidget
    implements MarkdownDemoWidget {
  const MinimalMarkdownDemo({Key? key}) : super(key: key);

  static const String _title = 'Minimal Markdown Demo';

  @override
  String get title => MinimalMarkdownDemo._title;

  @override
  String get description => 'A minimal example of how to use the Markdown '
      'widget in a Flutter app.';

  @override
  Future<String> get data => Future<String>.value(_data);

  @override
  Future<String> get notes => Future<String>.value(_notes);

  @override
  Widget build(BuildContext context) {
    return  Markdown(
      data: _data,
      styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)).copyWith(
        blockquote: const TextStyle(color: Colors.red, fontSize: 32),
        blockquotePadding: const EdgeInsets.all(100),
      ),
    );
  }
}

`stable`	`master`
❗️	❗️

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on macOS 12.0 21A5506j darwin-x64, locale en-GB)
    • Flutter version 2.2.3 at /Users/tahatesser/Code/flutter_stable
    • Framework revision f4abaa0735 (9 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Code/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment Temurin-11.0.12+7 (build 11.0.12+7)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • Xcode 13.0, Build version 13A5212g
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 2020.3)
    • Android Studio at /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7621141/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] VS Code (version 1.59.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.26.0

[✓] Connected device (3 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E • ios            • iOS 15.0
    • macOS (desktop)        • macos                     • darwin-x64     • macOS 12.0 21A5506j darwin-x64
    • Chrome (web)           • chrome                    • web-javascript • Google Chrome 93.0.4577.63

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.6.0-1.0.pre.170, on macOS 12.0 21A5506j darwin-x64, locale en-GB)
    • Flutter version 2.6.0-1.0.pre.170 at /Users/tahatesser/Code/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4069c6355b (8 hours ago), 2021-09-03 02:11:05 -0400
    • Engine revision d6f6a0fe90
    • Dart version 2.15.0 (build 2.15.0-69.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7621141/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7621141/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] Android Studio (version 2020.3)
    • Android Studio at /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7583922/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.59.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.26.0

[✓] Connected device (3 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E • ios            • iOS 15.0 19A5340a
    • macOS (desktop)        • macos                     • darwin-x64     • macOS 12.0 21A5506j darwin-x64
    • Chrome (web)           • chrome                    • web-javascript • Google Chrome 93.0.4577.63

• No issues found!

✅: No Issue ❗️: Issue reproduced

cliftonlabrum · 2022-11-18T07:16:33Z

I’m having this same issue (in late 2022). Is there any hope of getting this fixed?

Pranoy1c · 2022-11-23T09:16:53Z

Still facing this issue in November 2022. Any fix?

Pranoy1c · 2022-11-23T10:05:26Z

@cliftonlabrum @patakihara @TahaTesser

UPDATE: I think I was able to figure out the solution. In the builder.dart file of the library, I changed:

style: _isInBlockquote ? styleSheet.blockquote!.merge(_inlines.last.style) : _inlines.last.style,

to:

style: _isInBlockquote ? _inlines.last.style!.merge(styleSheet.blockquote!) : _inlines.last.style,

cliftonlabrum · 2022-11-23T17:48:52Z

Thanks for your help. I switched to a different package that works really well and is actively maintained: https://pub.dev/packages/markdown_viewer

The developer even added some enhancements that I requested. 😄

AmitSonkhiya · 2023-03-18T15:33:50Z

Platform: Android, iOS

The same issue exists for Blockquote in the Markdown widget if a styleSheet property is provided, such as:

Markdown(
    styleSheet: MarkdownStyleSheet(
        blockquote: TextStyle(
            fontStyle: FontStyle.italic,
            color: Colors.red, 
        ),
    ),
);

The TextStyle doesn't apply at all.

@cliftonlabrum @patakihara @TahaTesser

UPDATE: I think I was able to figure out the solution. In the builder.dart file of the library, I changed:

style: _isInBlockquote ? styleSheet.blockquote!.merge(_inlines.last.style) : _inlines.last.style,

to:

style: _isInBlockquote ? _inlines.last.style!.merge(styleSheet.blockquote!) : _inlines.last.style,

This change works.

solshuffle · 2023-04-11T17:31:58Z

This is definitely still an issue. Changing the builder.dart file of the library doesn't feel like a good permanent solution.
Is there any chance this will get looked at? or should we change to a different package if we need this to be fixed?

omar-hanafy · 2023-05-28T18:45:19Z

any updates?
In my case, the blockquote style is ignored and it looks like that blockquote style always matched the p style and ignore the one I gave it. I do not know what is going under the hood but It is extremely annoying having the blockquote text size match the text size of the p, Anyway the above approach worked for me waiting for someone to open a pull request to solve this, also it seems like this package did not get any updates 3 months ago it would be nice to have it support the latest flutter (3.10.x).

@cliftonlabrum @patakihara @TahaTesser

UPDATE: I think I was able to figure out the solution. In the builder.dart file of the library, I changed:

style: _isInBlockquote ? styleSheet.blockquote!.merge(_inlines.last.style) : _inlines.last.style,

to:

style: _isInBlockquote ? _inlines.last.style!.merge(styleSheet.blockquote!) : _inlines.last.style,

mobile-development-group-com · 2023-12-19T10:24:46Z

@darshankawar This still doesn't seem to work in the latest version.

It ignores the quote style.
It ignores the codeblockAlign value.

Maybe can you explain why it should take such a long time to fix such issue?

omar-hanafy · 2023-12-19T14:24:39Z

This still doesn't seem to work in the latest version.

Yes you have to fix it manually.
Check @Pranoy1c fix.

This commit fixes the style of blockquotes when we render the item description as Markdown. Until now blockquotes had a weird blue background, so that the text wasn't readable. Now we are using the surface color as background and we add a border on the left site with the primary color. We would also like to use italic as font family, but there is currently a bug, so that the defined blockquote style is not applied. See flutter/flutter#81720

This commit fixes the style of blockquotes when we render the item description as Markdown. Until now blockquotes had a weird blue background, so that the text wasn't readable. Now we are using the secondary color as background and we add a border on the left site with the primary color. We would also like to use italic as font family, but there is currently a bug, so that the defined blockquote style is not applied. See flutter/flutter#81720

Kataglyphis · 2024-03-07T07:39:05Z

Blockquote is ignored when building a custom MarkdownElementBuilder.
blockquoteDecoration works for me :)

definev · 2024-07-28T13:08:23Z

Omg! Please fix it. it is foundation feature

Supposedly fixes flutter/flutter#81720

stuartmorgan transferred this issue from another repository May 3, 2021

stuartmorgan added package flutter/packages repository. See also p: labels. p: flutter_markdown flutter/packages flutter_markdown labels May 3, 2021

TahaTesser added found in release: 2.2 Found to occur in 2.2 found in release: 2.6 Found to occur in 2.6 has reproducible steps The issue has been confirmed reproducible and is ready to work on p: first party labels Sep 3, 2021

stuartmorgan added the P6 label Oct 5, 2021

stuartmorgan added the passed secondary triage label Jan 11, 2022

stuartmorgan removed the p: first party label Feb 10, 2023

flutter-triage-bot bot added P3 Issues that are less important to the Flutter project and removed P6 labels Jun 28, 2023

darshankawar mentioned this issue Jul 3, 2023

flutter_markdown doesn't work style the blockquote #129798

Closed

flutter-triage-bot bot added team-ecosystem Owned by Ecosystem team triaged-ecosystem Triaged by Ecosystem team labels Jul 8, 2023

Hixie removed the passed secondary triage label Jul 8, 2023

ricoberger mentioned this issue Feb 23, 2024

[core] Fix Blockquote Style feeddeck/feeddeck#148

Merged

csells mentioned this issue Oct 22, 2024

bug: blockquote styles not applied to LLM message markdown properly csells/flutter_ai_toolkit#58

Open

domesticmouse added a commit to domesticmouse/packages that referenced this issue Oct 25, 2024

[flutter_markdown]: Invert order of merge

ab5ff0a

Supposedly fixes flutter/flutter#81720

domesticmouse mentioned this issue Oct 25, 2024

[flutter_markdown]: Invert order of merge flutter/packages#7927

Closed

11 tasks

csells linked a pull request Nov 27, 2024 that will close this issue

[flutter_markdown]: Invert order of style merging flutter/packages#8163

Open

11 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug: `blockquote` property not being applied in `MarkdownBody` widget #81720

Bug: `blockquote` property not being applied in `MarkdownBody` widget #81720

patakihara commented Apr 19, 2021

TahaTesser commented Sep 3, 2021

Minimal Markdown Test

Section 1

Subsection A

cliftonlabrum commented Nov 18, 2022

Pranoy1c commented Nov 23, 2022

Pranoy1c commented Nov 23, 2022 •

edited

Loading

cliftonlabrum commented Nov 23, 2022

AmitSonkhiya commented Mar 18, 2023 •

edited

Loading

solshuffle commented Apr 11, 2023

omar-hanafy commented May 28, 2023 •

edited

Loading

mobile-development-group-com commented Dec 19, 2023 •

edited

Loading

omar-hanafy commented Dec 19, 2023

Kataglyphis commented Mar 7, 2024

definev commented Jul 28, 2024

Bug: blockquote property not being applied in MarkdownBody widget #81720

Bug: blockquote property not being applied in MarkdownBody widget #81720

Comments

patakihara commented Apr 19, 2021

TahaTesser commented Sep 3, 2021

Minimal Markdown Test

Section 1

Subsection A

cliftonlabrum commented Nov 18, 2022

Pranoy1c commented Nov 23, 2022

Pranoy1c commented Nov 23, 2022 • edited Loading

cliftonlabrum commented Nov 23, 2022

AmitSonkhiya commented Mar 18, 2023 • edited Loading

solshuffle commented Apr 11, 2023

omar-hanafy commented May 28, 2023 • edited Loading

mobile-development-group-com commented Dec 19, 2023 • edited Loading

omar-hanafy commented Dec 19, 2023

Kataglyphis commented Mar 7, 2024

definev commented Jul 28, 2024

Bug: `blockquote` property not being applied in `MarkdownBody` widget #81720

Bug: `blockquote` property not being applied in `MarkdownBody` widget #81720

Pranoy1c commented Nov 23, 2022 •

edited

Loading

AmitSonkhiya commented Mar 18, 2023 •

edited

Loading

omar-hanafy commented May 28, 2023 •

edited

Loading

mobile-development-group-com commented Dec 19, 2023 •

edited

Loading