HTML plugin with vertical text flutter - flutter

Question

I am trying to show HTML with code with flutter
by use flutter_html: ^0.10.4
import 'package:flutter_html/flutter_html.dart';
but scroll when showing html get yellow error
code
body: Builder(
builder: (BuildContext context) {
return Container(
child: Column(
children: <Widget>[
_buildHeader(context),
loading
? Container(
color: Colors.white,
child: Column(
children: <Widget>[
Container(
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1.0, color: Color(0xFFf3b433)),
),
),
child: Container(
padding: const EdgeInsets.symmetric(),
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(
width: 1.0, color: Color(0xFFf3b433)),
),
color: Color(0xFFFFFFFF),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
textDirection: TextDirection.rtl,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
InkWell(
child: Container(
width:
MediaQuery.of(context).size.width /
2.4,
height:
MediaQuery.of(context).size.height /
25,
child: Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: <Widget>[
Container(
child: Text(
post.catname == null
? ''
: post.catname,
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 16,
color: Colors.black),
),
),
Icon(Icons.arrow_left,
color: Color(0xFFffab40))
],
),
),
onTap: () {
Menu itemSelected = Menu();
itemSelected.setId = post.catid;
itemSelected.setName = post.catname;
itemSelected.setCategoryUrl =
pageUrl.getCategoryUrl(
int.parse(post.catid));
Navigator.of(context).push(
MaterialPageRoute(
builder:
(BuildContext context) =>
ThirdRoute(
itemSelected:
itemSelected)));
},
)
],
)),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: Column(
children: <Widget>[
ListTile(
contentPadding:
EdgeInsets.symmetric(vertical: 30),
title: Text(post.title,
style: TextStyle(
fontSize: MediaQuery.of(context)
.size
.width /
24,
color: Colors.red,
fontWeight: FontWeight.bold),
textDirection: TextDirection.ltr,
textAlign: TextAlign.center),
),
Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.deepOrange, width: 1)),
margin: EdgeInsets.only(
left: MediaQuery.of(context).size.width /
6),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Text(post.dateorder)
],
),
),
Container(
decoration: BoxDecoration(
color: Colors.black,
border: Border(
left: BorderSide(
color: Colors.deepOrange))),
width:
MediaQuery.of(context).size.width /
3,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Text(post.since,
style: TextStyle(
color: Colors.white)),
Icon(Icons.timer,
color: Color(0xFFffab40))
],
),
),
],
),
),
Container(
margin: EdgeInsets.only(top: 25, bottom: 10),
child: Column(
children: <Widget>[
Container(
width:
MediaQuery.of(context).size.width,
height:
MediaQuery.of(context).size.height /
3.5,
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey[600],
width: 1),
image: DecorationImage(
image:
NetworkImage(post.mainphoto)),
),
)
],
),
),
Container(
height:
MediaQuery.of(context).size.height / 3.5,
width: MediaQuery.of(context).size.width,
child: Html(
data: post.text,
defaultTextStyle:
TextStyle(fontFamily: 'serif'),
backgroundColor: Colors.white70,
padding: EdgeInsets.all(8.0),
),
),
],
),
),
],
),
)
: Container(
child: Center(
child: CircularProgressIndicator(),
),
),
],
));
},
),
I am trying to make it full height content of HTML and style it to rtl style with line height.
HTML will content images, text and YouTube videos.

Answer 1

use ListView instead of Column
like this :
ListView(
childern: <Widget>[
//your widgets
],
);
or wrap your column with SingleChildScrollView like this:
SingleChildScrollView(
child: Column(
childern: <Widget>[
//your widgets
],
),
);