My widget tree looks like this:
showModalBottomSheet(... => WidgetTree()); // this symbolizes that I pass exactly what you can see below into the builder function
// WidgetTree
Row(
children: [
Text('some string') // if this string is long enough, it will overflow instead of displaying on a second line
]
);
Above you can see the Modal Bottom Sheet.
As you can see, the Text does not expand over the next lines, like it does in other scenarios, but I get a RenderFlex OVERFLOWING error.
You can make use of the Wrap widget:
// WidgetTree
Wrap(
children: [
Text('some string') // if this string is long enough, it will overflow instead of displaying on a second line
]
);
Related
I’d like to place
an unspecified number of Text widgets from top-left to bottom
3 TextButton widgets from bottom-right to left and
a random parent content widget top-right
The Text and TextButton widgets should only take their minimum space while the the content widget should expand to bottom-left (upon windows resizing) with its children centered like so.
Maybe I’m just unlucky or misled/spoiled by Qt’s QSpacerItem…?
This is a desktop App so “windows resizing” really makes sense in flutter context! ;)
Also, more generally, is there a way to directly nest (some kind of) Row/Column instances and stretch Widgets down/right?
You'll want to use a combination of Row, Column and Expanded to achieve this effect.
I'm going to assume that the bottom left corner belongs to the left-hand side bar. With that in mind, your basic structure can look something like this:
Row(
children: [
// Side bar
SizedBox(
width: 250,
ListView.builder(
// Display text widgets
),
),
// This widget will fill whatever space remains in the Row after the side bar
Expanded(
child: Column(
children: [
// This widget will fill all the space before the footer
const Expanded(
child: Center(
child: Text("Resizable Window"),
),
),
// Footer with buttons
SizedBox(
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
// Your buttons
]
),
),
],
),
),
],
)
Full example on DartPad
Flutters!
I need to recreate this layout in Flutter to be displayed as items in a ListView.
Both layouts (Emma & Tonny) are the same.. the only difference is the colors that depend on some other data/status, something that I will decide programmatically later.
I already have the ListView.builder as follow:
ListView.builder(
itemCount: WeeklyList.contacts.length,
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () => onTapMe(WeeklyList.contacts[index]),
child: TripItemCard(index, WeeklyList.contacts[index]));
})
and.... the main missing guy:
Widget TripItemCard(int index, Info info) {
return SizedBox(
height: 116,
child: Card(
//.... Card Layout.....
)
);
NOTE: I wrapped the Card with a SizedBox to be able to have a Height specified for all cards.
There are 8 widgets in total:
1- The Card
2- Picture
3- Fullname
4- Role
5- PickUp Label
6- PickUp Time
7- DropOff Label
8- DropOff Time
Lastly and Very Important Things
1- Please be advised that there are 2 TEXTs (Name and DropOff Status) who have BACKGROUND and TEXT color... and both of them... fully expanded (width). This is very important to maintain the horizontal color balance.
2- Also PickUp and DropOff are aligned to the right where the PickUp and DropOff Time/Status respectively are aligned to the left.
PLEASE.Help();
thanks.dart
The basic layout should look like this and you can add the details to it.
Row(children: [
Image.asset(name),
Column(
children: [
Container(
color: const color,
child: const Text(data),
),
Text(data),
Text(data),
Text(data),
],
),],),
I'm building an application for a building that can navigate a user, one of the ways I am doing this is by using a floor plan of the building and I want to draw a path between nodes in this floor plan to create a route. The user enters where they want to be and then route finding algorithm outputs a path, the way I want to build this path is by having a user select a source node and a target node from two seperate lists, I want them to press a button on the map view screen and have a list with these nodes appear but no matter what I try the list will not display.
I've tried using setState and having a ListView returned but that seems to be where it's failing as such as I have print statements to help verify where in the code I've reached, I don't know if it's the search terms I'm using but nothing I have found so far seems to be related to this kind of use case. This is similar to what I want but this is just a list already being displayed and then being updated.
Widget build(BuildContext context) {
//currently inside of a scaffold
bottomNavigationBar: BottomAppBar(
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.trip_origin),
onPressed: () {
setState(() {
_sourceList();
});
},
),
],
)),
//extra code as part of scaffold
}
Widget _sourceList() {
print("working1"); //this prints
return ListView.builder(
padding: const EdgeInsets.all(10.0),
itemBuilder: (context, i) {
print("working2"); //this does not
return _buildRow();
});
}
Widget _buildRow() {
return new ListTile(title: Text(a.name));
}
So basically I just want a list to display when the user presses a button, then have that list disappear after a selection is made. The actual result is I can press the button and nothing is displayed, I only reach working1 in the code not working2.
I'm very new to flutter and I'm trying to learn how to create views. I tried to create a separate file of the view, or widget if that's what it's called in flutter, and just call it from the main.dart.
I have a separate widget containing this code
class PageEntryWidgetMain extends StatefulWidget {
final PageViewEntryMain pageViewEntryMain;
const PageEntryWidgetMain({Key key, this.pageViewEntryMain})
: super(key: key);
#override
State<StatefulWidget> createState() {
return _PageEntryWidgetMainState();
}
}
class _PageEntryWidgetMainState extends State<PageEntryWidgetMain> {
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
Text(widget.pageViewEntryMain.title)
],
),
);
}
}
and I'm trying to show it by using a view pager with the following code
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
PageView.builder(
itemBuilder: (context, position) {
PageEntryWidgetMain(
pageViewEntryMain: pages[position],
);
},
itemCount: pages.length,
scrollDirection: Axis.horizontal,
)
],
),
),
);
but it gives me the following errors
Horizontal viewport was given unbounded height.
Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.
I'm a little confused at what it's actually complaining of. I am able to display just one view, by replacing the PageView.builder with this code
PageEntryWidgetMain(pageViewEntryMain: pages[0])
So I believe that the separate widget, in itself, does not have a problem. It's probably about how I am trying to use the ViewPager that's giving me errors.
I have been searching for PageView implementations but I have not seen one that actually has a separate view to just call for displaying. I need to learn it this way so I would be able to separate the views instead of just writing it all in one file.
PageView cannot be the direct child of Column. Change your column to add an Expanded between the two, as below:
Column(
children: <Widget>[
Expanded(
child: PageView.builder(),
),
]
)
To explain what's going on here, Column has an unbounded horizontal width, ie it'll keep expanding horizontally to take as much space as it's child needs. PageView (and any other horizontally scrolling widget) requires horizontal constraints for the scroll logic to work.
Expanded restricts the horizontal size of the PageView by taking up as much space as possible, which should solve the issue.
You can use any Widget that has a fixed height and width to wrap the PageView.
For example, I use Container():
Column(
children: <Widget>[
Container(
width: double.infinity,
height: 100.0,
child: PageView.builder(),
),
]
)
I've changed the question from center the Tab to customize the position of the Tab.
Because I noticed that the Tab is actually Centered and according to the document, it just adding paddings.
But if you want a TabBar whenever it avoid safe area or not the elements in tabs are aligned centered (automatically), I can't find a way now.
look at the screenshot above, the icons/titles successfully avoid the black bar area (by extend the height of Tabbar), but not vertically center aligned. I tried put a Center element to wrap the tabar to tab widget, It extend the height to the whole screen.
I also tried wrap the tab in a Container widget and get the height property set, but it seems all the height are avoid the safe area (by add the a const).
And I tried wrap the whole Scaffold with a SafeArea widget, but the safe area become black and we actually wish the tab bat become higher and then layout element in this higher container, but not just move the container.
So the question might be How can I custom the position of the Tab widget. because the Tabbar is actually centered, but it layout child elements by avoid the safe area, so it's not visually vertical-aligned.
my code is:
#override
Widget build(BuildContext context) {
final icons = [Icons.library_books, Icons.photo, Icons.toc];
return Scaffold(
bottomNavigationBar: Material(
color: Theme.of(context).primaryColor,
child: SafeArea(child: TabBar(
controller: _tabController,
tabs: _titles.map((t) {
final i = _titles.indexOf(t);
return Tab(
text: t,
icon: Icon(icons[i]),
);
}).toList(),
),),
),
body: TabBarView(
controller: _tabController,
children: <Widget>[
PostListPage(
userid: widget.userid,
username: widget.username,
),
AlbumListPage(
userid: widget.userid,
username: widget.username,
),
TodoListPage(
userid: widget.userid,
username: widget.username,
),
],
)
);
}
}
Ok, I think I understand what you want now and I'm afraid it's not achievable.
If you don't use the SafeArea widget, the bar has the normal height at the full bottom and everything is centered. It has the disadvantage that it is over the black area in iPhone X.
But if you want to avoid the black bar area, you have to use the SafeArea (as you do) which adds some padding and pushes everything up a little, thus avoiding the bottom "unsafe" area.
So, it is the padding added by SafeArea which prevents you from pushing down (centering) the titles and icons.
A possible option is to wrap the SafeArea with a Container with a black color so the unsafe area is black.
child: Container(
color: Colors.black,
child: SafeArea(child: TabBar(
controller: _tabController,
...