Flutter - How to display markdown text in sliver
1,990
Use SliverToBoxAdapter instead of SliverList
Comments
-
ilBarra over 1 year
I'm trying to run Markdown widget (package: flutter_markdown 0.2.0) inside a SliverList but I have some issues.
Ideally I would like to execute a Markdown widget inside an ExpandTile widget inside a Sliver, but for now I just want to solve the problem of Markdown child of a Sliver.
The code I'm posting give me issues:
I see correctly the markdown text but the app is freezed (I can't scroll, I can't do nothing). I have this behaviour when I use the widget MarkdownBody
I see an error message when I use the widget Markdown:
I/flutter (31761): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter (31761): The following assertion was thrown during performResize(): I/flutter (31761): Vertical viewport was given unbounded height. I/flutter (31761): Viewports expand in the scrolling direction to fill their container.In this case, a vertical I/flutter (31761): viewport was given an unlimited amount of vertical space in which to expand. This situation I/flutter (31761): typically happens when a scrollable widget is nested inside another scrollable widget. I/flutter (31761): If this widget is always nested in a scrollable widget there is no need to use a viewport because I/flutter (31761): there will always be enough vertical space for the children. In this case, consider using a Column I/flutter (31761): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size I/flutter (31761): the height of the viewport to the sum of the heights of its children. I/flutter (31761): ...
This is the full code of my example:
import 'package:flutter/material.dart'; import 'package:flutter_markdown/flutter_markdown.dart'; const String _markdownData = """# Markdown Example Markdown allows you to easily include formatted text, images, and even formatted Dart code in your app. ## Styling Style text as _italic_, __bold__, or `inline code`. - Use bulleted lists - To better clarify - Your points ## Links You can use [hyperlinks](hyperlink) in markdown ## Images You can include images: ![Flutter logo](https://flutter.io/images/flutter-mark-square-100.png#100x100) ## Markdown widget This is an example of how to create your own Markdown widget: new Markdown(data: 'Hello _world_!'); ## Code blocks Formatted Dart code looks really pretty too: void main() { runApp(new MaterialApp( home: new Scaffold( body: new Markdown(data: markdownData) ) )); } Enjoy! """; void main() { runApp(MaterialApp( title: "Markdown Demo", home: Scaffold( appBar: AppBar(title: const Text('Markdown Demo')), body: Container( child: CustomScrollView(slivers: <Widget>[ SliverList( delegate: SliverChildListDelegate([Markdown(data: _markdownData)]), ) ]))))); }
EDIT: I solved the issue
The problem was in this line of code:
![Flutter logo](https://flutter.io/images/flutter-mark-square-100.png#100x100)
The image don't exist and this freeze the app.
-
ilBarra almost 5 yearsWorks only if I set the height property in the Container widget:
void main() { Widget _buildSliverToBoxAdapter(){ return SliverToBoxAdapter( child: Container( height: 400.0, child: Markdown(data: _markdownData) ), ); } runApp(MaterialApp( title: "Markdown Demo", home: Scaffold( body: CustomScrollView( slivers: <Widget>[ _buildSliverToBoxAdapter(), ])))); }
This is a problem because the length of the markdown text is dynamic. -
Hassan Saleh almost 5 yearsTry SliverToBoxAdapter inside SliverFillRemaining