My problem is that the Keyboard comes in front of the HTML text editor widget when the keyboard opens. I make the whole page scrollable when the keyboard opens. it works on normal text fields, text area widgets but not works on flutter Html editor. Can anyone suggest a solution for this?
This is the screenshot of the issue.
return Container(
margin: EdgeInsets.only(
top: 14,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.only(
left: SizeConfig.safeBlockVertical * 1.5, top: 14),
child: Text(
"Enter Message",
style: TextStyle(
fontSize: 14,
fontFamily: 'UbuntuRegular',
color: MyColor.textColor),
),
),
Container(
margin: EdgeInsets.only(
top: SizeConfig.safeBlockVertical * 3,
right: SizeConfig.safeBlockVertical * 1),
padding: EdgeInsets.only(
left: SizeConfig.safeBlockHorizontal * 3,
right: SizeConfig.safeBlockHorizontal * 3,
bottom: SizeConfig.safeBlockHorizontal * 3,
),
child: HtmlEditor(
hint: "Your text here...",
key: keyEditor,
height: 400,
useBottomSheet: false,
showBottomToolbar: false,
)
),
],
),
);
This is my code
Try wrapping the html editor inside a Container and setting the margin to MediaQuery.of(context).viewInsets. Like this:
Container(child: YourHtmlEditor(),
margin: MediaQuery.of(context).viewInsets,)
Hello There's a solution maybe will help you
First Configure your Scaffold by adding :
resizeToAvoidBottomInset: false,
Change The Column With ListView
Wrap The Html Editor with container and setup The margin to :
margin: MediaQuery.of(context).viewInsets,
Happy Coding !
Related
I have the following tree: Scaffold > Column > Row > Container > Text.
I want the Text to wrap, and The Great Google in most cases told me that Expanded is what i need, but none of the below cases worked for me:
Row wrapped inside Expanded
Container wrapped inside Expanded
Text wrapped inside Expanded
All of the above have the same result.
Here's my code for the page's body:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF282B32),
body: Column(
children: <Widget>[
createRow(
context,
"https://i.stack.imgur.com/6Utrc.jpg?s=256&g=1",
"GuildProtect is a powerful, baterries-included moderation bot for your *safe* server!"
),
createDivider(),
createRow(
context,
"https://cdn.discordapp.com/avatars/967406876029501462/bd3c60dcf55c83fba41b15fba89f798a.webp?size=256",
"This is a very beatiful (because it's pink) avatar of this shitty website creator, enjoy!"
)
]
)
);
}
Row createRow(BuildContext context, String imageUrl, String text) {
const containerHeight = 256.0;
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: containerHeight,
padding: const EdgeInsets.only(left: 50, top: 25, bottom: 25),
child: Image.network(imageUrl),
),
Container(
alignment: Alignment.centerRight,
height: containerHeight,
padding: const EdgeInsets.only(right: 50, top: 25),
child: Text(
text,
style: TextStyle(
color: const Color(0xFFFFFCF9),
fontWeight: FontWeight.bold,
fontSize: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.3).fontSize,
),
),
),
]
);
}
Divider createDivider() {
return const Divider(
color: Color(0xFF131518),
indent: 30,
endIndent: 30,
thickness: 1,
height: 20,
);
}
}
I also saw some answers on SO recommending to cut the text or show ellipsis, but i dont need this behaviour, i need the text to actually wrap. This video's second solution shows exactly what i want to achieve (and no, the solution from there didn't help).
Any help is appreciated!
In createRow(), wrap the second Container() with Flexible().
Flexible(
child: Container(
alignment: Alignment.centerRight,
height: containerHeight,
padding: const EdgeInsets.only(right: 50, top: 25),
child: Text(
text,
style: TextStyle(
color: const Color(0xFFFFFCF9),
fontWeight: FontWeight.bold,
fontSize: DefaultTextStyle.of(context)
.style
.apply(fontSizeFactor: 1.3)
.fontSize,
),
),
),
)
Lemme know if it worked for your use case.
Why are you seeing this?.
Well, this is because the width of the widgets which you are trying to put, is greater then the screen size.
Possible solutions:
Try to add width property to the second Container in the Row
try to use .fit property, which will fit the image in it's father widget size.
I don't think that wrapping the container in Expanded wouldn't fix the situation as I see the text is too long (the screen has overflowed by 260 pixels).
Try to use TextOverflow as mentioned in link.
Please, let me know if any of my solutions works.
Anywhere you want to use a text and its length is not specified, you may encounter a folding error.
My suggestion is to use Expanded.
This is the output of your code snippet in my simulator
your code Output in mobile
It is enough to wrap the second Container with an Expanded widget (createRow) :
Row createRow(BuildContext context, String imageUrl, String text) {
const containerHeight = 256.0;
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: containerHeight,
padding: const EdgeInsets.only(left: 50, top: 25, bottom: 25),
child: Image.network(imageUrl),
),
--> Expanded(
child: Container(
alignment: Alignment.centerRight,
height: containerHeight,
padding: const EdgeInsets.only(right: 50, top: 25),
child: Text(
text,
style: TextStyle(
color: const Color(0xFFFFFCF9),
fontWeight: FontWeight.bold,
fontSize: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.3).fontSize,
),
),
),
),
]
);
}
and output:
--> after Wrap Container with Expanded Widget
It is noteworthy that this part of your work is not responsive.
Probably, the texts are too big in my emulator because of the difference made by the DefaultTextStyle.of(context) class.
Anyway, I hope it solved your problem.
full code:
I used MediaQuery for setting fontSize Because no details are provided from the content of the defaultTextStyle class.
import 'package:flutter/material.dart';
class TstPage extends StatelessWidget {
const TstPage({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF282B32),
body: Column(
children: <Widget>[
createRow(
context,
"https://i.stack.imgur.com/6Utrc.jpg?s=256&g=1",
"GuildProtect is a powerful, baterries-included moderation bot for
your *safe* server!"
),
createDivider(),
createRow(
context,
"https://cdn.discordapp.com/avatars/967406876029501462/bd3c60dcf55c83fba41b15fba89f798a.webp?size=256",
"This is a very beatiful (because it's pink) avatar of this shitty
website creator, enjoy!"
)
]
)
);
}
Row createRow(BuildContext context, String imageUrl, String text) {
const containerHeight = 256.0;
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
height: containerHeight,
padding: const EdgeInsets.only(left: 50, top: 25, bottom: 25),
child: Image.network(imageUrl),
),
Expanded(
child: Container(
alignment: Alignment.centerRight,
height: containerHeight,
padding: const EdgeInsets.only(right: 50, top: 25),
child: Text(
text,
style: TextStyle(
color: const Color(0xFFFFFCF9),
fontWeight: FontWeight.bold,
fontSize: MediaQuery.of(context).size.width*0.04,
),
),
),
),
]
);
}
Divider createDivider() {
return const Divider(
color: Color(0xFF131518),
indent: 30,
endIndent: 30,
thickness: 1,
height: 20,
);
}
}
I am trying to make my app responsive and I noticed that there is a problem in some screen sizes , I'm already using Expanded for the Container that including the question
And I tried using Expanded for Answers too and flex: 2; for the question and that's what I got
appPic2
What it should be like
Expanded(
child: Container(
width: double.infinity,
height: 220.0,
margin: EdgeInsets.only(
top: 5, bottom: 0, left: 30.0, right: 30.0),
padding: EdgeInsets.symmetric(
horizontal: 0.0, vertical: 0.0),
child: Center(
child: Column(
children: [
Text(
_questions[_questionIndex]['question'],
textDirection: TextDirection.rtl,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontFamily: "Tajawal",
color: Colors.white,
fontWeight: FontWeight.w400,
),
),
Answer Code
...(_questions[_questionIndex]['answers']
as List<Map<String, Object>>)
.map(
(answer) =>
Answer(
answerText: answer['answerText'],
answerColor: answerWasSelected
? answer['score']
? Colors.green[400]
: Colors.red[400]
: null,
),
and this is for answer in another file
InkWell(
onTap: answerTap,
child: Container(
padding: EdgeInsets.all(15.0),
margin: EdgeInsets.symmetric(vertical: 5.0, horizontal: 30.0),
width: double.infinity,
child: Text(
answerText,
),
),
),
);
i think the problem is you providing a height for the container which has the text as a child
and the text is long
so if you want the container to be with fixed height then you should wrap the column widget with singleChildScrollView
or if you want the container to take the question space , then remove the height property from the container and wrap the column with Expanded
Add
mainAxisSize: MainAxisSize.min
To the column widget. Now the column has no bounds
I would like to show a text when there are no results. I know how to get that text and make sure it is dynamic, but I do not know how I can add it to the SearchResultCell (because that is where the results are being shown when there are items).
child: Container(
margin: EdgeInsets.only(left: 25, right: 25, bottom: 15),
height: 50,
child: SearchResultCell(
search: this._search[index],
))
I can't use children, because container does not allow it + I have to put the text in the SearchResultCell, but don't know how.
You can use children by doing this,
Container(
margin: EdgeInsets.only(left: 25, right: 25, bottom: 15),
height: 50,
child: Column(
children:
SearchResultCell(
search: this._search[index],
),
//another widget
)
)
I want to give padding or margin according to screen sizes.
Below is code and images of two different sizes screens with same padding.
This is my code:
Padding(
padding: const EdgeInsets.only(top: 160, left: 90, bottom: 20),
child: Row(
children: <Widget>[
Image.asset(
'assets/logo.png',
height: 70,
width: 70,
),
Text(
' Whatsapp',
style: TextStyle(
fontSize: 26,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
],
),
),
My real device
Android Studio emulator
You can create two methods that accept BuildContext
double deviceHeight(BuildContext context) => MediaQuery.of(context).size.height;
double deviceWidth(BuildContext context) => MediaQuery.of(context).size.width;
And if you want uniform margin regardless of device width or height, use it like this
Padding(
padding: EdgeInsets.only(
top: deviceHeight(context) * 0.3,
left: deviceWidth(context) * 0.09,
bottom: deviceHeight(context) * 0.06,
),
child: Row(
children: <Widget>[
Image.asset(
'assets/logo.png',
height: 70,
width: 70,
),
Text(
' Whatsapp',
style: TextStyle(
fontSize: 26,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
],
),
),
deviceHeight(context) * 0.3 simply means 30% of the screen Height, deviceWidth(context) * 0.09 means 9% of the screen Width & bottom: deviceHeight(context) * 0.06 means 6% of the screen Height
The advantage here is that you can adjust the figures to match, and it will take equal spacing on any device.
Your can use MediaQuery.of(context).size.height to get height of your screen and MediaQuery.of(context).size.width to get width of your screen.
According to your image, it will be better to use Flex widgets like Expanded, Spacer, Flexible to adjust the spacing between the widgets inside Column.
use flutter_screenutil
change code to:
Padding(
padding: const EdgeInsets.only(top: 160.w, left: 90.w, bottom: 20.w),
child: Row(
children: <Widget>[
Image.asset(
'assets/logo.png',
height: 70.w,
width: 70.w,
),
Text(
' Whatsapp',
style: TextStyle(
fontSize: 26.sp,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
],
),
),
In w, h, r, you can use w first, and then you can choose the corresponding one according to the actual situation.
in terms of android and IOS we can easily say that the padding in android commonly used as 16 and in case of IOS padding for an commom page is 18
I need a Container with some text in to auto expand. I have an API call, which can be anything from 5 words to 500 words. I don't want to just have 1 fixed size that's huge, but contains 10 words.
I have tried Expanded() and SizedBox.Expand(), but I might be using them wrong
Card(
elevation: defaultTargetPlatform ==
TargetPlatform.android ? 5.0 : 0.0,
child: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.all(0.0),
padding: const EdgeInsets.all(2.0),
decoration: BoxDecoration(color: Colors.black),
width: _screenSize.width,
height: 250,
child: Column(
children: <Widget>[
Container(
color: Colors.black,
width: _screenSize.width,
height: 35,
child: Padding(
padding: const EdgeInsets.only(
left: 15, top: 11),
child: Text("Title".toUpperCase(),
style: TextStyle(
color: Colors.white
),
),
),
),
Container(
color: Colors.white,
width: _screenSize.width,
height: 210,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8, bottom: 5),
child: Text("Title of expanding text", style: TextStyle(
fontSize: 25,
),
),
),
Text("Expanding text", style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.w800
),),
],
),
),
],
),
),
],
),
),
I just need the Container to expand, but stay small/get bigger
Have you tried not specifying height at all? The Container should wrap according to the child in this case.
Otherwise, the widget has a child but no height, no width, no
constraints, and no alignment, and the Container passes the
constraints from the parent to the child and sizes itself to match the
child.
Above is an extract from the official flutter documentation for Container.
Here is the official flutter documentation link.
You can use FittedBox, this will resize your text according to available area.
You can use it like this :
FittedBox(child: Text('...............Your text...............'));
I would suggest you to use Constraints...this will set Container height according to the Text child's requirement. Please see the example...
Container(
constraints: BoxConstraints(
maxHeight: double.infinity,
),
child: Column(
children: [
Text(
'Hello flutter...i like flutter...i like google...',
softWrap: true,
style: TextStyle(
color: Colors.white, fontSize: 20 , ),
),],),)
we just neeed to add mainAxisSize: MainAxisSize.min, properties inside child Column or Row where the child is set to Container
for example
AnythingYourWidget(
child: Container(
child: Column( // For Example Column
mainAxisSize: MainAxisSize.min, // these properties following the children content height available.
children: [
// YourWidget
]
)
)
),
I too had a container with a text widget inside that would not scale as the text increased in character count. Make the widget tree Container -> IntrinsicWidth -> Text/TextField and it seems to play nicely for me.
IntrinsicWidth will scale the size of the container to its child.