I'm trying to create a Scrollable Container using flutter, but i always got error
A RenderFlex overflowed by 855 pixels on the bottom.
or
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
Here is my code
import 'package:flutter/material.dart';
class TestWidget extends StatefulWidget {
const TestWidget({super.key});
#override
State<TestWidget> createState() => _TestWidgetState();
}
class _TestWidgetState extends State<TestWidget> {
#override
Widget build(BuildContext context) {
return Column(
children: [
//other widget,
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min ,
children: [
Expanded(
child: InkWell(
child: Column(
children: [
Container(
height: 35,
margin: EdgeInsets.only(top:10, left: 10, right: 10),
padding: EdgeInsets.only(left: 20),
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
border: Border.all(
color:Colors.grey,
width: 1
),
borderRadius: BorderRadius.only(topLeft: Radius.circular(5), topRight: Radius.circular(5)),
color: Colors.grey.shade300,
boxShadow: [
BoxShadow(
offset: Offset(0, 6),
color: const Color(0xFFA4A6B3).withOpacity(.1),
blurRadius: 12
)
],
),
child: Text("My Widget"),
),
//code from here i change to the solution i tried
Container(
height: MediaQuery.of(context).size.height * 0.8,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.only(left: 10, right: 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color:Colors.grey,
width: 1
),
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(5), bottomRight: Radius.circular(5)),
color: Colors.grey.shade100,
boxShadow: [
BoxShadow(
offset: Offset(0, 6),
color: const Color(0xFFA4A6B3).withOpacity(.1),
blurRadius: 12
)
],
),
child: Column
(
crossAxisAlignment: CrossAxisAlignment.start,
children:[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
//mainAxisSize: MainAxisSize.min ,
children: [
Row(
children: [
SizedBox(
width: MediaQuery.of(context).size.width * 0.15,
child: Text("Ayo"),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.5,
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.1,
child:TextButton.icon(
style: TextButton.styleFrom(
foregroundColor: Colors.white,
fixedSize: Size(100,40),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
backgroundColor: Colors.red,
),
icon: Icon(Icons.cancel, size: 13),
label:Text( "Cancel",
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.normal,
)
),
onPressed: () {
print("pressed");
}
)
),
],
),
Divider(color: Colors.grey.shade300),
Expanded(
child: Column(
crossAxisAlignment:CrossAxisAlignment.start,
children:[
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
]
),
),
],
)
)
]
)
)
//end code
],
)
),
)
],
)
],
);
}
}
Here is the result I got with my code
I had search and try many solution, but it is still not working in my code.
this one that i tried is use LayoutBuilder,
LayoutBuilder(
builder: (context, constraints) {
return Container(
height: constraints.maxHeight,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.only(left: 10, right: 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color:Colors.grey,
width: 1
),
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(5), bottomRight: Radius.circular(5)),
color: Colors.grey.shade100,
boxShadow: [
BoxShadow(
offset: Offset(0, 6),
color: const Color(0xFFA4A6B3).withOpacity(.1),
blurRadius: 12
)
],
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Scrollbar(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
//mainAxisSize: MainAxisSize.min ,
children: [
Row(
children: [
SizedBox(
width: MediaQuery.of(context).size.width * 0.15,
child: Text("Ayo"),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.5,
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.1,
child:TextButton.icon(
style: TextButton.styleFrom(
foregroundColor: Colors.white,
fixedSize: Size(100,40),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
backgroundColor: Colors.red,
),
icon: Icon(Icons.cancel, size: 13),
label:Text( "Cancel",
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.normal,
)
),
onPressed: () {
print("pressed");
}
)
),
],
),
Divider(color: Colors.grey.shade300),
Expanded(
child: Column(
crossAxisAlignment:CrossAxisAlignment.start,
children:[
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
Text('Content'),
]
),
),
],
),
)
)
)
]
)
);
}
),
but i got error
BoxConstraints forces an infinite height.
Am I missing something??
I would be glad for any help.
Related
My code is giving me the output what i required but there is one error which i need support to resolve.
RangeError (index): Invalid value: Valid value range is empty: 1
Below is the csv which i am using:
german word,german sentence,english word,english sentence
die Ansage,Hören Sie auf die Ansagen.,announcement,Listen to the announcements.
Here is the code:
I am getting error on line wher i am calling csvTable[index1+1][0],
class _CsvState extends State<Csv> {
#override
Widget build(BuildContext context, ) {
return FutureBuilder<String>(
future: rootBundle.loadString('assets/questions.csv'),
builder: (BuildContext context, AsyncSnapshot<String> snapshot,) {
List<List<dynamic>> csvTable =
CsvToListConverter().convert(snapshot.data);
return Scaffold(
appBar: AppBar(
title: Text("A1 German Vocabulary"),
),
body: new TransformerPageView (
itemCount: csvTable.length-1,
loop: true,
viewportFraction: 0.8,
itemBuilder: (BuildContext context, int index1) {
return new Padding(
padding: new EdgeInsets.all(10.0),
child: new Material(
elevation: 8.0,
textStyle: new TextStyle(color: Colors.white),
borderRadius: new BorderRadius.circular(10.0),
child: new Stack(
fit: StackFit.expand,
children: <Widget>[
new Positioned(
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
child: new Text(
csvTable[index1+1][0],
style: new TextStyle(
fontSize: 24.0,
color: Colors.black,
),
),
alignment: Alignment.center,
),
SizedBox(height: 20,),
new Container(
child: new Text(
csvTable[index1+1][1],
textAlign:TextAlign.center,
style: new TextStyle(
fontSize: 24.0,
color: Colors.black,
),
),
alignment: Alignment.center,
),
SizedBox(height: 20,),
new Container(
margin: const EdgeInsets.only(left: 10.0, right: 20.0),
child: Divider(
color: Colors.black,
height: 36,
)),
new Container(
child: new Text(
csvTable[index1+1][2],
style: new TextStyle(
fontSize: 24.0,
color: Colors.black,
height: 2
),
),
alignment: Alignment.center,
),
SizedBox(height: 20,),
new Container(
child: new Text(
csvTable[index1+1][3],
textAlign:TextAlign.center,
style: new TextStyle(
fontSize: 24.0,
color: Colors.black,
),
),
alignment: Alignment.center,
),
],
),
left: 10.0,
right: 10.0,
top: 100.0,
)
],
),
),
);
},
// itemCount:811
),
);
});
}
}
I'm trying to recreate this ui template in which a I have list under that list is a list of items and after all the items is a container displaying a summary. I'm trying to achieve this by wrapping the listview.builder and a container inside a list view however it doesn't show anything. This is the code.
Container(
height: 550.0,
child: ListView(
children: <Widget>[
Expanded(
child: ListView.builder(
physics: ClampingScrollPhysics(),
scrollDirection: Axis.vertical,
itemCount: itemList.length,
itemBuilder: (BuildContext context, int index) {
return SingleItem(
itemImage: itemList[index]['image'],
itemPrice: itemList[index]['price'],
itemName: itemList[index]['name'],
itemCode: itemList[index]['code'],
);
},
),
),
Expanded(
child: Container(
color: Colors.brown,
),
)
],
)
),
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
children: [
ListView.builder(
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.all(20.0),
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(width: 1, color: Colors.grey)),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: 50,
height: 50,
color: Colors.blueAccent,
),
SizedBox(
width: 30,
),
Column(
children: [Text("Title"), Text('Tag'), Text('Price')],
)
],
),
);
},
),
Container(
width: double.infinity,
child: Card(
color: Colors.redAccent,
elevation: 1.0,
child: (Column(children: [
Text(
'Summary',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
SizedBox(
height: 10.0,
),
Text("""
This is the summary of your products
""")
])),
),
)
],
)),
);
}
}
Try this out:
https://codepen.io/theredcap/pen/qBbjLWp
You can look at this to give you an idea
return Column(
children: [
Expanded(
child: ListView.builder(
itemCount: 6,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.all(16),
height: 170,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12)
]),
child: Row(
children: [
Image.asset(
"assets/images/Item_1.png", // your image
fit: BoxFit.cover,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: () {},
child: Image.asset(
"assets/images/Item_1.png", // your icon/image
width: 50,
height: 30,
)),
),
Text(
"Circle Miracle Plate Studs Earrings",
style: TextStyle(
fontSize: 13, fontWeight: FontWeight.bold),
),
Text(
"SKU: 23fe42f44",
style: TextStyle(fontSize: 13),
),
SizedBox(height: 5),
Text(
"\$ 7,500",
style: TextStyle(fontSize: 13),
),
Row(children: [
Text(
"Qty: ",
style: TextStyle(fontWeight: FontWeight.bold),
),
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 20,
style: TextStyle(color: Colors.deepPurple),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)
]),
Text("Ship By: 30 June2020")
],
),
),
),
],
),
);
}),
),
Container(
height: 100,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Summary",
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
SizedBox(
height: 12,
),
Table(children: [
TableRow(children: [
Text("Subtotal"),
Text("102000"),
]),
TableRow(children: [
Text("Shipping Charge"),
Text("Free"),
]),
TableRow(children: [
Text("Shipping Insurance"),
Text("Free"),
]),
TableRow(children: [
Text("Grand Total"),
Text("102000"),
]),
]),
],
),
)
],
)
;
I am new to Android development. I am trying to stretch, 3 containers vertically and 3 containers horizontally using the row and column widget. Every time I add crossAxisAlignment: CrossAxisAlignment.stretch,inside my Row widget I get a BoxConstraints force an infinite height error.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Multichild Container Test'),
),
body: SafeArea(
child: Container(
child: Column(
children: <Widget>[
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
width: 60.0,
height: 100.0,
child: Text('Container 1'),
color: Colors.pink.shade900,
),
Container(
width: 60.0,
height: 100.0,
child: Text('Container 1'),
color: Colors.green.shade900,
),
Container(
width: 60.0,
height: 100.0,
child: Text('Container 1'),
color: Colors.deepPurple.shade900,
),
],
),
),
Container(
child: Row(
//crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
width: 60.0,
height: 100.0,
child: Text('Container 1'),
color: Colors.pink.shade900,
),
Container(
width: 60.0,
height: 100.0,
child: Text('Container 1'),
color: Colors.green.shade900,
),
Container(
width: 60.0,
height: 100.0,
child: Text('Container 1'),
color: Colors.deepPurple.shade900,
),
],
),
)
],
)
),
),
),
);
}
}
You can use copy paste run full code below
You can use Expanded and flex to provide height to Container
code snippet
Expanded(
flex: 1,
working demo
full code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Multichild Container Test'),
),
body: SafeArea(
child: Container(
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
width: 60.0,
height: 100.0,
child: Text('Container 1'),
color: Colors.pink.shade900,
),
Container(
width: 60.0,
height: 100.0,
child: Text('Container 1'),
color: Colors.green.shade900,
),
Container(
width: 60.0,
height: 100.0,
child: Text('Container 1'),
color: Colors.deepPurple.shade900,
),
],
),
),
),
Expanded(
flex: 1,
child: Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
width: 60.0,
height: 100.0,
child: Text('Container 1'),
color: Colors.pink.shade900,
),
Container(
width: 60.0,
height: 100.0,
child: Text('Container 1'),
color: Colors.green.shade900,
),
Container(
width: 60.0,
height: 100.0,
child: Text('Container 1'),
color: Colors.deepPurple.shade900,
),
],
),
),
)
],
)),
),
),
);
}
}
Red color one is carousal view
Green color one is horizontal ListView
Blue color one is Staggered Gridview widget
So My issue is Staggered Grid View is not srolling up inside Listview
I want to scroll all Content . Any one please help this . My code is :
**
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
physics: new AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.vertical,
primary: true,
padding: EdgeInsets.symmetric(vertical: 50.0),
children: <Widget>[
CarouselSlider(
height: 180,
//height: double.infinity,
//aspectRatio: 16/9,
viewportFraction: 0.94,
initialPage: 0,
enlargeCenterPage: true,
autoPlay: false,
reverse: false,
enableInfiniteScroll: false,
scrollDirection: Axis.horizontal,
onPageChanged: (index) {
setState(() {
_current = index;
});
},
items: imgList.map((imgUrl) {
return Builder(
builder: (BuildContext context) {
return Container(
width: 400,
margin: EdgeInsets.all(2.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Image.network(
imgUrl,
fit: BoxFit.cover,
),
),
);
},
);
}).toList(),
),
SizedBox(
height: 2,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: map<Widget>(imgList, (index, url) {
return Container(
width: 8.0,
height: 8.0,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _current == index ? Colors.grey : Colors.black,
),
);
}),
),
Container(
padding: EdgeInsets.only(left: 15.0,bottom: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Latest Markers',textAlign: TextAlign.left ,overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold,fontSize: 22.0),)
],
),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 0.0),
height: 100.0,
width: MediaQuery.of(context).size.width,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: latestList.length, itemBuilder: (context, index) {
return Container(
width: 100.0,
height: 100.0,
child: Card(
elevation: 3.0,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Align(
child: Image.network(latestList[index],fit: BoxFit.cover,width: 100.0,height: 100.0,),
),
),
),
);
}),
),
Container(
padding: EdgeInsets.only(left: 15.0,bottom: 10.0,top: 25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('PlugXR Markers',textAlign: TextAlign.left ,overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold,fontSize: 22.0),)
],
),
),
Container(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 0.0),
height: MediaQuery.of(context).size.height,
child: StaggedWidget(),
),
)
],
)
);
}**
I tried putting a column in a row. But it does not work.
Then I tried putting the row and column in the same safe area using different child properties. It does not work.
The column is supposed to be in the middle of the row.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.teal,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 100.0,
width: 100.0,
color: Colors.yellow,
child: Text('Container 1'),
),
Container(
height: 100.0,
width: 100.0,
color: Colors.green,
child: Text('Container 1'),
),
Container(
width: double.infinity,
),
],
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: 100.0,
color: Colors.red,
child: Text('Container 1'),
),
Container(
height: 100.0,
color: Colors.blue,
child: Text('Container 1'),
),
],
),
),
),
);
}
}
The error message is "BoxConstraints forces an infinite width."
Try expanded widget with flex attribute, you can put the column in a row:
Container(
width: 300,
height: 100,
child: Row(
children: <Widget>[
Expanded(flex: 1,
child: Container(
color: Colors.red,
width: double.infinity,
height: double.infinity,
),
),
Expanded(flex: 2,
child: Column(
children: <Widget>[
Expanded(flex:1,
child: Container(
color: Colors.yellow,
width: double.infinity,
height: double.infinity,
),
),
Expanded(flex:1,
child: Container(
color: Colors.blue,
width: double.infinity,
height: double.infinity,
),
),
],
),
),
Expanded(flex: 1,
child: Container(
color: Colors.green,
width: double.infinity,
height: double.infinity,
),
),
],
),
),
also, you can place column using a container
body: SafeArea(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 100.0,
color: Colors.red,
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
color: Colors.yellow,
),
Container(
width: 100.0,
height: 100.0,
color: Colors.green,
),
],
),
),
Container(
width: 100.0,
color: Colors.blue,
),
],
),
),