I am attempting to add vertical divider between the leading portion and the title of a ListTile.
I understand that Flutter now has a VerticalDivider widget, but I can't seem to get it to work properly with the ListTile. Example of what I am trying to do is attached.
This was tagged as a possible duplicate post, but it is not. Just because the other post has VerticalDivider in the title doesn't mean that it is asking the same question. Maybe the person who tagged it as a duplicate should actually read the post instead of just browse the title...
You can just use a Row widget inside the leading property of the ListTile
ListTile(
leading: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.add_shopping_cart),
VerticalDivider(),
],
),
title: Text("QUICK REFERENCE"),
),
Related
How to keep some elements fixed (and above scrollable parts) during scroll?
Does it need to be inside a SingleChildScrollView?
Made a visual example of my problem:
I need the blue part to be scrollable, and that it goes behind the green part that needs to stay fixed.
This is a simplified part of my code:
body: SingleChildScrollView(
child: ListView(
children: [
Obx(()=>Container(THIS CONTAINER SHOULD STAY FIXED DURING SCROLL)),
Obx(()=>Column(THIS PART SHOULD BE SCROLLABLE)),
Obx(()=>Text(THIS PART SHOULD BE SCROLLABLE)),
Obx(()=>Row(THIS PART SHOULD BE SCROLLABLE))
],
)
),
If you put your ListView widget and FixedContainer widget in a Column, it will work.
For example:
Column(
children: [
Obx(()=>Container(THIS CONTAINER SHOULD STAY FIXED DURING SCROLL)),
Expanded(
child: ListView(
Obx(()=>Column(THIS PART SHOULD BE SCROLLABLE)),
Obx(()=>Text(THIS PART SHOULD BE SCROLLABLE)),
Obx(()=>Row(THIS PART SHOULD BE SCROLLABLE)),
),
),
],
)
I am trying to create a footer at the bottom of the page using SizedBox however I am having issues positioning it correctly.
I am using the following layout:
body: SingleChildScrollView(
child:Column(
children: [
Center(),
Center(),
Spacer(),
SizedBox()
]
)
)
When I try to run it I get a renderflex error, after doing some searching around I saw people mention that i should wrap my column in Expanded or SizedBox however both of those do not work as they also give renderflex error's on their own. I also tried using align combined with mainAxisAlignment but that doesn't move anything.
Thanks in advance!
If you're using scaffold, there is an option called bottomSheet , it exactly what you're looking for.
maybe something like this?
body:Stack(
children: [
SingleChildScrollView(
child:Column(
children: [
Center(),
Center(),
Spacer(),
]
),
)`
Positioned (
bottom:0,
child:SizedBox(),
)
]
),
There is a widget (for example text). In the real example it comes after another widget in Column. How to put it in the center of the screen? As I understand it, the Column does not. How can this be done? Or are there other ways to specify the location of items?
Column takes all the available space of the parent and by default aligns the items to start
You can change fix this changes the MainAxisAlignment to center.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("test"),
],
),
or changing parents height and move it to the center (be careful if you add many items it will cause overflow)
child: Center(
child: Container(
height: 25,
child: Column(
children: <Widget>[
Text("test"),
],
),
),
),
Using Stack widget you can do it:
var textEmpty = Text("Some Text");
Stack(children: <Widget>[
Column(children: <Widget>[
Container(
,margin: EdgeInsets.only(top: 100.0)
,child: Center(child: textEmpty, ),)],),
listView,
]);
Use Center Wigdet instead of Container. Hope this helps!
No worries where it comes from. It depends on the view where you have added it.
If you want to show in the center then just use Center widget
If you want to use Container widget then, you have to add the width and height both to double.infinite
If you want to use it in the same widget then you can use the Stack widget as well.
It totally depends on the requirement of the view and in which way you are tried to implement it.
I am trying to create a Card that displays the score in a game. The card will be more complex than this example, but in the middle of the card I want to have a Row. That Row contains two Columns. The first Column contains two Rows. In each of those two Rows is the team name and the score.
Widget build(BuildContext context) {
return Card(
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Row(
children: <Widget>[
Text('Team A'),
Text('100'),
],
),
Row(
children: <Widget>[
Text('Team B'),
Text('100'),
],
),
],
),
Text('15:00'),
],
),
);
}
Now I want t wrap the Text widgets that display the team name in a Expanded. Once I do that I get a long descriptive error that basically says my Row has a parent that does not have a finite width, but it has a child that is asking to expand and these two are in conflict. I get that they are in conflict. How do I fix it? I definitely don't want to give the parent Widget (the Card) a finite width.
It's not 100% clear what you want the scoreboard to look like - this is an instance where a quick mock-up would be a great help.
However, I can tell you why you're getting an exception.
When you wrap your 'Team A' text in an Expanded, during the layout pass flutter gets confused. The top level row has two items, neither of which define any sort of size, so it makes them as large as possible in the cross axis (vertical) and as small as possible in the main axis (horizontal). This means that they delegate their size to their children.
By wrapping 'Team A' in an Expanded, you're basically telling it:
"Hey you, your parent widget is pretty big. I want you to take up all of it that isn't already being used instead of being how big you would normally be."
It responds with
"Sure boss, but I've just checked and none of my parents actually have
a defined size.... so I don't know what to do. Guess I'll just throw an
exception."
The fix is to size the parent, which in this case is the column that contains the two rows (geez, that's confusing).
I think from your description what you want is for that column to take up as much space as possible, so you just have to wrap it in expanded as well. So if you do this, your problem should resolve itself:
Widget build(BuildContext context) {
return Card(
child: Row(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Expanded(child: Text('Team A')),
Text('100'),
],
),
Row(
children: <Widget>[
Expanded(child: Text('Team B')),
Text('100'),
],
),
],
),
),
Text('15:00'),
],
),
);
}
That way, the column containing the two rows expands to take all available space during its layout pass. Once the 'Team A' text gets around to trying its layout pass it can simply size itself (horizontally) to that column.
You can then play around with the flex factor to get everything how you want.
Just an FYI - once you start getting lots of nested containers and rows you might want to consider a CustomMultiChildLayout. It's slightly more manual as you need to do the layout calculations yourself, but it might be easier in the long run depending on how complex your scoreboard is.
Hey I was working with the drawer object and all the items given as children have a default padding so the need is as follows:
As a developer I would like to specify my own padding dimensions on the objects so I can design the app as I would like.
Second questions: is there any way to reposition the object already rendered?
For your frist question, you can wrap your Drawer items within a Padding widget, and specify the type of padding you want in padding property.
Here is a simple example playing around with the left padding (0.0 to 20.0 to 80.0).
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new DrawerHeader(child: new Container()),
new Padding(padding: const EdgeInsets.only(left: 80.0),
child: new ListTile(
leading: new Icon(Icons.account_box, color: Colors.blue),),)
],
),
)
Update
If you wish not to use a ListTile and compose your customization icons, the following example might be a good starting point for you.
drawer: new Drawer(
child: new ListView(
children: <Widget>[
new DrawerHeader(child: new Container()),
new Align(alignment:FractionalOffset.centerLeft,child: new Icon(Icons.account_box, color: Colors.blue),),
],
),
)
As far as your second question go, you need to add more details about what are you trying to achieve, generally speaking, yes you can re-position a StatefulWidget by changing the state of it in a setState call, it seems that the second question is irrelevant to the padding one, so I would recommend creating a separate question for this one and add more details to it.
Answer to your second question: This is not intended because the paddings are a essential part of material design. Removing all the paddings would defy the purpose of creating UIs with material design build into the widgets.