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
)
)
Related
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
What's the right way to animate a change in size of a Stack widget?
The first idea was to wrap the Stack with a SizeTransition:
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizeTransition(
sizeFactor: _height, // Just a Tween<double>(begin: 200, end: 400)
axis: Axis.vertical,
axisAlignment: -1,
child: Stack(
children: [
Positioned(
bottom: 10,
left: 10,
child: Container(width: 50, height: 50, color: Colors.blue),
),
Positioned(
top: 10,
right: 10,
child: Container(width: 50, height: 50, color: Colors.green),
),
],
),
),
],
);
}
But running the snippet causes the following error:
'package:flutter/src/rendering/stack.dart': Failed assertion: line 588 pos 12: 'size.isFinite': is not true.
So, apparently, that's not the right way to do it. Questions now is: How do you animate resizing of a Stack?
Wrapping the Stack with a SizedBox would fix the error message, but then, how do you get the size from SizedTransition to set the proper size of a SizedBox?
You can use AnimatedContainer as parent of Stack widget by providing height or width one you like to change over time.
AnimatedContainer(
color: Colors.purple,
duration: const Duration(milliseconds: 200),
height: height,
child: Stack(
children: [
Positioned(
bottom: 10,
left: 10,
child: Container(width: 50, height: 50, color: Colors.blue),
),
Positioned(
top: 10,
right: 10,
child: Container(width: 50, height: 50, color: Colors.green),
),
],
),
),
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 !
I made a bunch of rows. Now I want a Container on top of these rows. How can I do this. I tried it with the stack widget ,but it just stacked everything on top of each other and I had no control over the positioning.
How can I draw a Container on top of a bunch of rows.
Thank you for your help.
You can check the below code, though your asking is little bit confusing. You need to use Positioned and set some value at top and left.
Scaffold(
body: Stack(
children: [
Positioned(
top:0 ,
left: 0,
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
),
Positioned(
top:100 ,
left: 0,
child: Container(
height: 100,
width: 100,
color: Colors.red,
child: Row(),
),
),
Positioned(
top:200 ,
left: 0,
child: Container(
height: 100,
width: 100,
color: Colors.red,
child: Row(),
),
),
Positioned(
top:300 ,
left: 0,
child: Container(
height: 100,
width: 100,
color: Colors.red,
child: Row(),
),
),
],
),
)
In my case, I have a Stack containing Icon and Card
I want the icon to appear in the right corner in case LTR and in the left corner in case RTL
I have the following code:
Stack(
children: <Widget>[
Card(
color: Colors.white,
elevation: 4,
margin: EdgeInsets.only(top: 8, right: 8, left: 8),
child: Container(
height: 100,
width: double.infinity,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('text 1'),
Text('text 2'),
Text('text 3'),
],
),
),
),
),
Positioned(
top: 10,
left: 10,
child: Icon(
Icons.ac_unit,
size: 50,
),
)
],
);
The result in RTL mode is :
The result in LTR mode is :
How can I fix this
try this
Positioned.directional(textDirection:Directionality.of(context) ,
top: 10,
end: 10,
child: Icon(
Icons.ac_unit,
size: 50,
),
)
UPDATE
Put the icon inside a Container with maxWidth and set the alignment like below
alignment: isRTL? Alignment.centerLeft: Alignment.centerRight;
set the alignment property of Stack like this.
when the Language is changed to RTL just call
setState((){
isRTL = true;
})
in a stateful widget.
vice versa if you want to change it to LTR