in this below code i have Wrap widget into TabBarView and i'm not sure as this widget size, when i use Container with specify height my problem solved, but i miss some layouts which i want to show that with map, how can i resolve this problem? i tested SizedBox.expand but it doesn't any change
Flexible(
child: TabBarView(
children: [
Center(
child: Wrap(
children: feeds.map((feed){
return Container(
width: MediaQuery.of(context).size.width /3.5,
height:MediaQuery.of(context).size.width /3.5,
margin: EdgeInsets.all(2.0),
child: GridTile(
header: feed.feedType ==1?Icon(Icons.video_call)
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(3.0)
child: Image.asset(feed.feedImage))),
),
);
}).toList(),
),
),
],
controller: tabController,
),
),
Related
I want to develop a UI just like Postman Desktop App. But When I add a text field and fix the sized button in a row it gives an error RenderFlex children have non-zero flex but incoming width constraints are unbounded. But I don’t want to give a fixed size to the text field through MediaQuery. As you can see in this video (Demo UI) Postman text field size is fixed when the screen size decrease it shows a horizontal scrollbar. I want the same behavior. Here is the code.
body: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: 300,
decoration:
BoxDecoration(border: Border.all(color: Colors.yellow)),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red)),
child: Image.network(
ImageURL,
fit: BoxFit.fitWidth,
),
),
],
),
),
),
SizedBox(
child: Column(
children: [
Row(
children: <Widget>[
const Expanded(child: TextField()),
DarkButton("Save", () {}),
],
),
],
),
),
],
),
),
),
);
Add isDens = true in Textfield.
Just like this:
Expanded(child: TextField(decoration: InputDecoration(isDense: true),)),
this is because you use Expanded inside the SingleChildScrollView.
You can not use Expanded inside the SingleChildScrollView because it covers the maximum width or height.
Just remove SingleChildScrollView error was gone.
you may use listview for this or use CustomScrollView for that
I want to make children use flexible sizes
how can i set the size of the child inside the row? can you guys help me? and find the error constraint
anyone help me
return SafeArea(
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
Container(
color: Colors.lightBlue,
child: Row(
children: [
Expanded(
flex: 5,
child: Container(
color: Colors.green,
),
),
Expanded(
flex: 5,
child: Container(
color: Colors.blue,
),
)
],
),
)
],
),
)
],
),
);
To place children in a row you can use Flexible widget. The value of flex defines how much space each child should take. In the example that you provided.. Both children will be equally spaced since you gave flex value 5 for both.
return Scaffold(
body: Center(
child: SizedBox(
height: 50,
child: Row(
children: [
Flexible(
flex: 5,
child: Container(
color: Colors.red,
)),
Flexible(
flex: 5,
child: Container(
color: Colors.green,
)),
],
),
),
),
);
If you change the flex value to 1 and 5.. Now the total divisions will be 6 and out of that the first child will take 1 part and the second child will take 5 parts like below
return Scaffold(
body: Center(
child: SizedBox(
height: 50,
child: Row(
children: [
Flexible(
flex: 1,
child: Container(
color: Colors.red,
)),
Flexible(
flex: 5,
child: Container(
color: Colors.green,
)),
],
),
),
),
);
Also if you use a singleChildScrollView and an expanded inside that it then the expanded widget has no bounds so it will throw an error. So wrapping the Expanded with a SizedBox with a specific width will give you expected results.
EDIT
To have a SingleChildScrollView with dynamic content in the row you can do this
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisSize : MainAxisSize.min,
children:[
SizedBox(
width: 100,//this is important since its a row and the row will take full width and throw an error.
child: Image.asset(""),
),
//Another SizedBox or Text or any widget..
]
)
)
Is there a way to have a fixed size for the child inside GridView? I wanted to have the red color be same height. I tried using Expanded or specified the size for the Container, but it just won't work. GridView just makes the child same size.
Note: I tried specify the height for the red Container. It didn't work.
This is what I got.
This is what I did.
return GridView.count(
crossAxisCount: 2,
children: List.generate(drinksData.length, (index) {
return Container(
padding: EdgeInsets.all(20.0),
child: Column(
children: [
Expanded(
child: Container(
color: Colors.red,
),
),
Text(drinksData[index].label),
],
),
);
}),
);
GridView.count(
crossAxisCount: 2,
children: List.generate(drinksData.length, (index) {
return Container(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Expanded(
child: Container(
// height:90,//or whatever size you want!
color: Colors.red,
),
),
SizedBox(
height: 45,
child: Text(drinksData[index])
),
],
),
);
}),
)
```
I have a ListView.builder where I want to show containers with shadows. And I want a shadow of one container to cover another container. Example of how it should looks.
It easily to do with Stack widget, but I have no idea how to do it inside ListView.builder.
Solution that works fine for me
Instead of using ListView I've decided to use CustomScrollView that takes slivers as parameters. Inside slivers I'm maping through a list of items and return my container wrapped with SliverToBoxAdapter. I don't know exactly how it works, but it works fine for me.
CustomScrollView(
slivers: [
...names.map(
(e) => SliverToBoxAdapter(
child: Center(
child: CustomContainer(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Container #${e['name']}'),
Text('Age is ${e['age']} y.o.')
],
),
),
),
),
),
),
],
),
// if scroll view overflow on other widget then use ClipRRect With Expanded.
ClipRRect(
child: Expanded(
child: CustomScrollView(
clipBehavior: Clip.none, //add this line inside CustomScrollView
slivers: [
...names.map(
(e) => SliverToBoxAdapter(
child: Center(
child: CustomContainer(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Container #${e['name']}'),
Text('Age is ${e['age']} y.o.')
],
),
),
),
),
),
),
],
),),),
I face the same problem and i use this tricks and it's solved.
You can use index of listview and give different elevation of card according to index.
ListView.builder(
itemCount:10,
shrinkWrap: true,
itemBuilder: (ctx, i) {
return Card(
elevation: (i%2 == 1)?10 :0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment:CrossAxisAlignment.center,
mainAxisAlignment:MainAxisAlignment.center,
children: [
Text("Container $i"),
],
),
),
);
}),
I have a Scaffold with the following architecture, and the body is being covered by the bottom navigation. Everything works fine if I comment the navigation.
Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
appBar: AppAppBar(title: this.title),
body: Row(
children: [
Expanded(
child: Container(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: this.pageProvider.horizontalPadding,
vertical: 25),
child: this.body,
),
),
)
],
),
bottomNavigationBar: AppNavigation(),
);
This is the implementation of the AppNavigation widget:
Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 64,
child: BottomNavigation(),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 80,
child: WorkoutButton(),
),
),
],
);
This is the body, regardless of what widget I use:
In case it is not clear enough, the body does not have almost height.
Why don’t you use a BottomNavigationBar widget instead of a Stack?
Anyway, that happens because your Stack is unconstrained, thus, using all the available space. Give it some constrains (E.g., by wrapping it in a ConstrainedBox with some height constraint).
ConstrainedBox(
constraints: BoxConstraints.tightFor(height: 150.0),
child: Stack( ...
)
)