I want it to be responsive,
Whatever my text is, the border of my container should be fixed.
I want it to be responsive,
Whatever my text is, the border of my container should be fixed.
I want it to be responsive,
Whatever my text is, the border of my container should be fixed.
I want to make container border like this.
But it's happening to me like this .
This is my code of container part.
Container(
padding: EdgeInsets.symmetric(horizontal: 27, vertical: 22),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 4,
decoration: BoxDecoration(color: whitetext, boxShadow: [
BoxShadow(
offset: Offset(0, 3),
blurRadius: 9,
spreadRadius: 4,
color: grey,
)
]),
child: Column(
children: [
Row(
children: [
Container(
padding: EdgeInsets.symmetric(
horizontal: 22, vertical: 10),
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: grey,
width: 1.0,
),
bottom: BorderSide(
color: grey,
width: 1.0,
),
)),
child: Column(
children: [
Text(
'Rajan Sonavane',
style: titleBold()
.copyWith(fontWeight: FontWeight.w600),
),
Text('Gram Sevak', style: listGreenText())
],
),
),
Container(
padding: EdgeInsets.symmetric(
horizontal: 22, vertical: 10),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: grey,
width: 1.0,
),
)),
child: Column(
children: [
Text(
'Amita Sontakke',
style: titleBold()
.copyWith(fontWeight: FontWeight.w600),
),
Text('Police Patil', style: listGreenText())
],
),
),
],
),
Row(
children: [
Container(
padding: EdgeInsets.symmetric(
horizontal: 22, vertical: 10),
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: grey,
width: 1.0,
),
)),
child: Column(
children: [
Text(
'Kailas Sawant',
style: titleBold()
.copyWith(fontWeight: FontWeight.w600),
),
Text('Clerk', style: listGreenText())
],
),
),
Container(
padding: EdgeInsets.symmetric(
horizontal: 22, vertical: 10),
decoration: BoxDecoration(),
child: Column(
children: [
Text(
'Baliram Lokare',
style: titleBold()
.copyWith(fontWeight: FontWeight.w600),
),
Text('Clerk', style: listGreenText())
],
),
),
],
)
],
),
),
Please help me i dont know to make it.
Try wrapping the Container children of your Rows with an Expanded
Either give your containers fixed size or wrap them with an Expanded widget.
You may want to get a closer look to the Flexible widget, and add a flex parameter
Check it here
In the short video it shows it with Column, but it works the same with Row
Related
When I use center in a text used in Wrap widget as shown in the code below:
Wrap(
children: [
Padding(
padding: const EdgeInsets.symmetric(
vertical: 6.0),
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(27),
border: Border.all(
color: Colors.grey.withOpacity(0.60)),
),
padding: EdgeInsets.fromLTRB(9,6,9,6),
child: Center(<--placing this center widget makes the child expand to full width
child: Text(
'NTU',
style: TextStyle(
color: Colors.white.withOpacity(0.87),
fontSize: 16.5,
),
),
),
),
)
]),
the container expands to the full width as shown below:
What I want is:
But placing a center widget in the child of the Wrap widget seems to make it expand to the full width. Any suggestion on how to make it shrink to the child's width even when the center widget is used? Thank you.
Set widthFactor of Center widget to set its width to the child's width multiplied by this factor.
return Wrap(
children: [
Padding(
padding: const EdgeInsets.symmetric(
vertical: 6.0),
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(27),
border: Border.all(
color: Colors.grey.withOpacity(0.60)),
),
padding: const EdgeInsets.fromLTRB(9,6,9,6),
child: Center(
widthFactor: 1.5,
child: Text(
'NTU',
style: TextStyle(
color: Colors.white.withOpacity(0.87),
fontSize: 16.5,
),
),
),
),
)
]),
Try giving width to your container,
Wrap(
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
width: 100,
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(27),
border: Border.all(color: Colors.grey.withOpacity(0.60)),
),
padding: EdgeInsets.fromLTRB(9, 6, 9, 6),
child: Center(
child: Text(
'NTU',
style: TextStyle(
color: Colors.black.withOpacity(0.87),
fontSize: 16.5,
),
),
),
),
)
],
),
try this code:
Wrap(
children: [
Row(
children: [
Flexible(
child: SizedBox(width: MediaQuery.of(context).size.width),
),
Container(
width: 100,
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(27),
border: Border.all(color: Colors.grey.withOpacity(0.60)),
),
padding: EdgeInsets.fromLTRB(9, 6, 9, 6),
child: Center(
child: Text(
'NTU',
style: TextStyle(
color: Colors.black.withOpacity(0.87),
fontSize: 16.5,
),
),
),
),
Flexible(
child: SizedBox(width: MediaQuery.of(context).size.width),
),
],
),
],
),
I have this code in my Flutter project:
Row(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Icon(
Icons.face,
size: _mediaWidth*0.09,
color: Colors.grey[600],
)
),
Container(
margin: EdgeInsets.symmetric(
vertical: 10,
horizontal: _mediaWidth*0.03
),
child: Stack(
children: <Widget>[
Text(
"A",
style: TextStyle(
fontSize: _mediaWidth*0.08,
color: Colors.grey[600]
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(Icons.add)
),
Divider(height:10)
]
),
width: _mediaWidth*0.85,
height: _mediaHeight*0.05,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey[400],
width: 1,
)
)
),
),
]
),
And I get this:
I want to increase the space between the text and the underline. I tried adding a bottom padding to the container, however, it only hid the text:
How can I properly add a space between the text and the bottom border of the container?
According do your code, the Container has an hard-coded height property:
height: _mediaHeight*0.05
Adding a padding, without increasing the height of the Widget, results in cropping the content.
The full example is reported below:
Row(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Icon(
Icons.face,
size: _mediaWidth*0.09,
color: Colors.grey[600],
)
),
Container(
margin: EdgeInsets.symmetric(
vertical: 10,
horizontal: _mediaWidth*0.03
),
padding: EdgeInsets.only(bottom: 10),
child: Stack(
children: <Widget>[
Text(
"A",
style: TextStyle(
fontSize: _mediaWidth*0.08,
color: Colors.grey[600]
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(Icons.add)
),
Divider(height:10)
]
),
width: _mediaWidth*0.85,
height: _mediaHeight*0.10, // we should modify the height as well
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.grey[400],
width: 1
)
)
),
),
],
),
I am trying to apply the same concept of instagram to go from one feed to another.
Here i have like quiz1 part and i want to go to the another quiz2 section on tapping to to the right side and after pressing left side i want to go for quiz1 section.
Widget mainQuiz() {
return Column(
children: [
Spacer(
flex: 1,
),
Container(
padding: EdgeInsets.all(30),
child: Text(
"When was the first spaceship NOT launched?",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 24,
),
),
),
/* ---------------------OPTION 1----------------------*/
Container(
margin: EdgeInsets.only(
left: 65,
right: 65,
bottom: 15,
),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(100)),
child: Row(
children: [
Container(
margin: EdgeInsets.all(10),
child: Row(
children: [
Stack(
children: [
Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.white),
shape: BoxShape.circle,
),
child: Icon(
Icons.check,
size: 15,
color: Color(0xffFFC700),
),
)
],
),
Text(
"Last Tuesday",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
],
),
),
Spacer(),
Container(
constraints: BoxConstraints.expand(
height: 40,
width: 50,
),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
topRight: Radius.circular(100),
bottomRight: Radius.circular(100),
),
),
child: Center(
child: Text(
"55%",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
),
),
],
),
),
/* ---------------------OPTION 2----------------------*/
Container(
margin: EdgeInsets.only(
left: 65,
right: 65,
bottom: 15,
),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(100)),
child: Row(
children: [
Container(
margin: EdgeInsets.all(10),
child: Row(
children: [
Stack(
children: [
Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.white),
shape: BoxShape.circle,
),
child: Icon(
Icons.check,
size: 15,
color: Color(0xffFFC700),
),
)
],
),
Text(
"1969",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
],
),
),
Spacer(),
Container(
constraints: BoxConstraints.expand(
height: 40,
width: 50,
),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(
topRight: Radius.circular(100),
bottomRight: Radius.circular(100),
),
),
child: Center(
child: Text(
"45%",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
),
),
],
),
),
/* ---------------------OPTION 3----------------------*/
Container(
margin: EdgeInsets.only(
left: 65,
right: 65,
bottom: 15,
),
padding: EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(100)),
child: Row(
children: [
Stack(
children: [
Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
shape: BoxShape.circle,
),
child: SizedBox(
height: 15,
width: 15,
),
)
],
),
Text(
"1957",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
],
),
),
Spacer(
flex: 2,
),
],
);
}
like this is quiz one section i want to go to the second quiz section which i can take as same ui
I would wrap your "mainQuiz" inside a Stack widget.
In that way you could add other 2 Containers inside the Stack's children.
Those containers could be positioned using "Positioned" widget.
One on the left of the screen and one on the right.
You should give then the size too.
I would let them transparent and I would give them a "GestureDetector" or something to detect the tap and call the Navigator to change screen.
As per your requirement, I think you should use
PageView
By default it has the swipe feature to go to the next and previous screen.
EDIT:-
As per you requirements, you know that you have a screen which already have interaction in form of giving answers, which has to be done using clicks. Though you can place empty containers in stack to implement clicks for left right, but as container need to have some width, thus they will overlap with you answers because basic padding is not more than 20. Thus I think you should go for swipe or specified buttons to go the left right i.e next and previous question.
I have this ListView.generator that returns such Containers
Container(
child: Row(
children: <Widget>[
Container(
child: null,
width: 10,
height: 10,
decoration: BoxDecoration(
color: social[i].color,
shape: BoxShape.circle,
),
margin: EdgeInsets.only(right: 7, top: 1,),
),
Text(
social[i].name,
style: TextStyle(
color: Colors.white,
fontFamily: 'Muli',
fontSize: 24.0,
fontWeight: FontWeight.w700
),
)
],
),
width: social[i].name.length * 16.0,
)
Right know I'm making use of width to set it based on text length but it's giving me and inadequate result as spacing between twitter and instagram is bigger than it should be.
The result I want being this with an even space between them.
A Wrap widget with spacing set to even wouldn't help as I want this list to have a full width of the user resolution and to be aligned to the left.
you can use mainAxisAlignment: MainAxisAlignment.spaceEvenly for Row element like
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
child: null,
width: 10,
height: 10,
decoration: BoxDecoration(
color: social[i].color,
shape: BoxShape.circle,
),
margin: EdgeInsets.only(right: 7, top: 1,),
),
Text(
social[i].name,
style: TextStyle(
color: Colors.white,
fontFamily: 'Muli',
fontSize: 24.0,
fontWeight: FontWeight.w700
),
)
],
),
width: social[i].name.length * 16.0,
)
In case you want to know more about it. https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041 you can check this article. I found it really helpful.
I'm currently learning how to build apps using the Flutter SDK and Android Studio. My problem is that I need to add a Divider widget between the 'Administrative' text and the rest of the Card but as you can see in the screenshot below, the divider isn't showing up. I've tried changing the size (In which case the space between the two texts just increases) and I've tried setting the color to see if it was defaulting to transparent on my phone. Nothing works!
Here's my code for the Card Widget State:
class BBSCardState extends State<BBSCard>{
#override
Widget build(BuildContext context) {
return new Padding(
padding: const EdgeInsets.only(top: 16.0, bottom: 16.0, left: 12.0, right: 12.0),
child: new Card(
child: new Row(
children: <Widget>[
new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(top: 22.0, bottom: 8.0),
child: new Text("Administrative", style: new TextStyle(color: new Color.fromARGB(255, 117, 117, 117), fontSize: 32.0, fontWeight: FontWeight.bold)),
),
new Divider(),
new Text("text")
],
),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
)
)
);
}
}
And here's the screenshot of what the card looks like:
Also:
Is there any way to increase the size of the actual line from the Divider? (Not just the spacing)
Thanks!
You could remove Row, then Column would take all available space and Divider would have width.
#override
Widget build(BuildContext context) {
return new Padding(
padding: const EdgeInsets.only(
top: 16.0, bottom: 16.0, left: 12.0, right: 12.0),
child: new Card(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(top: 22.0, bottom: 8.0),
child: new Text("Administrative",
style: new TextStyle(
color: new Color.fromARGB(255, 117, 117, 117),
fontSize: 32.0,
fontWeight: FontWeight.bold)),
),
new Divider(
color: Colors.red,
),
new Text("text")
],
),
),
);
}
To make custom divider you could check implementation of Divider and adjust it. E.g. replace Divider with
new SizedBox(
height: 10.0,
child: new Center(
child: new Container(
margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
height: 5.0,
color: Colors.red,
),
),
)
it was happening to me but I found out that this property solves it: thickness
child: Divider(
color: Colors.teal.shade100,
thickness: 1.0,
),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.lightGreen,width: 3.0),
),
),
)
Instead of using divider you can use a customized container...
I had the same issue, but by putting my Divider inside an Expanded Widget fixed my problem.
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Divider(
thickness: 1,
color: Color(0xff818181),
),
),
SizedBox(width: 10),
Text(
'Login using Social Media',
style: TextStyle(color: Color(0xff818181), fontWeight: FontWeight.w500),
),
SizedBox(width: 10),
Expanded(
child: Divider(
thickness: 1,
color: Color(0xff818181),
),
),
],
),
In Column, use Divider() and in Row, use VerticalDivider()
Container(
width: 200,
child: Divider(
thickness: 10,
color: Colors.red,
),
),
or
Expanded(
child: Divider(
thickness: 10,
color: Colors.red,
),
),
If you want to draw line for the Widget Views, Try using the BoxDecoration as like in below example
child: new Container(
decoration: new BoxDecoration(
border: Border(
top: BorderSide(width: 1.0, color: Colors.grey),
left: BorderSide(width: 1.0, color: Colors.grey),
right: BorderSide(width: 1.0, color: Colors.grey),
bottom: BorderSide(width: 1.0, color: Colors.grey),),
);
child: new Row(
....
),
)
Horizontal divider
Container(
width: double.infinity,
height: 2, // Thickness
color: Colors.grey,
)
Vertical divider
Container(
width: 2, // Thickness
height: double.infinity,
color: Colors.grey,
)
Recently I have to archive divider which have circular corner. but if I'm using container with border side it's not give accurate output. So you can use this code if you want circular corner.
ClipRRect(
borderRadius: BorderRadius.circular(6.33.r),
child: Container(
width: 100.w,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color.fromRGBO(196, 196, 196, 0.6),
width: 5.0.w),
),
),
),
),
I tried with expanded widget but not worked. But only this way it works for me
SizedBox(
height: 50,
child: VerticalDivider(
thickness: 3,
width: 4,
indent: 0,
color: ColorConstants.silverColor,
),
),
This way also worked for me, when I wrapped parent (Row) with IntrinsicHeight
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0),
child: VerticalDivider(
thickness: 3,
width: 4,
indent: 0,
color: ColorConstants.silverColor,
),
),
HighTrendWidget(
trendValue: 'HIGH',
trendDifference: '1743.88',
)
],
),
)
If you want to use it inside row like you have multiple widgets to show inside row and also a divider then you can use Sizedbox with height and width . pasting code
SizedBox(
width: 60,
height: 30,
child: Divider(
height: 20,
color: defaultColor,
thickness: 5,
),
),
Add the thickness:
Divider(
thickness: 1,
color: Colors.teal.shade100,
)
Just adding the thickness parameter to 1 or above will solve the issue.
Working sample:
const Divider(
height: 1,
thickness: 1),
Padding(
padding: const EdgeInsets.only(right:20),
child:Divider(
color: Color(0xfff8a9c5),
thickness: 2,
),
),
Just Use this function for wherever you want
Divider verticalDivider() {
return Divider(
height: 2,
color: Colors.greenAccent,
);
}