Related
Based on the code below, how does one wrap around a row of texts in a container? (as shown in the image). And also, how to make the container slightly rounded as shown in the image?
When I wrap it in a container, why does it takes up the full width of the app from left to right, which is not what I am trying to achieve.
Thank you in advance.
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
child: Expanded(
child: PageView(
controller: _pageController,
onPageChanged: (page) {
setState(() {
currentIndex = page;
});
},
children: [
SingleChildScrollView(
child: Column(
children: [
Container(
padding: EdgeInsets.only(
top: 0, left: 220, right: 30, bottom: 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
flex: 7,
child: Text(
'187,177.33',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
SizedBox(width: 10),
Expanded(
flex: 4,
child: Text(
'82',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
],
),
),
],
),
),
],
),
),
),
],
),
);
}
Use decoration on Container. Also reduce the padding,
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12)),
child: Row(
return Scaffold(
body: Column(
children: [
Container(
child: Expanded(
child: PageView(
// controller: _pageController,
onPageChanged: (page) {
setState(() {
// currentIndex = page;
});
},
children: [
SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
flex: 7,
child: Text(
'187,177.33',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
SizedBox(width: 10),
Expanded(
flex: 4,
child: Text(
'82',
style: GoogleFonts.openSans(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
),
],
),
),
),
],
),
),
],
),
),
),
],
),
);
}
More information about Container and layout
Container has property which called decoration, It would does the job for you, Try this:
Container(
margin: EdgeInsets.all(16),
padding:
EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'187,177.33',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
SizedBox(width: 10),
Text(
'82',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w500),
textAlign: TextAlign.right,
),
],
),
)
In Flutter, I'm attempting to build rows of containers that are inside the Expanded wrapped column which is also inside a row. for some reason, it errors on 'RenderAspectRatio has unbounded constraints'. I've attempted to move the Expanded widget to different places on the code but it continues to error sometimes it will throw,
"RenderFlex children have non-zero flex but incoming height constraints are unbounded"
I've tried many things and I read many Q&A on the issues here in StackOverflow and elsewhere but to no avail, I still haven't solved the problem.
here's the code:
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
GestureDetector(
onTap: () {
print('Just clicked on 7');
},
child: Align(
alignment: Alignment.center,
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.yellow,
margin: const EdgeInsets.all(1.0),
child: const AutoSizeText(
'7',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 300.0, color: Colors.black45),
),
),
),
),
),
GestureDetector(
onTap: () {
print('Just clicked on 7');
},
child: Align(
alignment: Alignment.center,
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.yellow,
margin: const EdgeInsets.all(1.0),
child: const AutoSizeText(
'7',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 300.0, color: Colors.black45),
),
),
),
),
),
GestureDetector(
onTap: () {
print('Just clicked on 7');
},
child: Align(
alignment: Alignment.center,
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.yellow,
margin: const EdgeInsets.all(1.0),
child: const AutoSizeText(
'7',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 300.0, color: Colors.black45),
),
),
),
),
),
GestureDetector(
onTap: () {
print('Just clicked on 7');
},
child: Align(
alignment: Alignment.center,
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.yellow,
margin: const EdgeInsets.all(1.0),
child: const AutoSizeText(
'7',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 300.0, color: Colors.black45),
),
),
),
),
),
],
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
//Expanded(
//child:
GestureDetector(
onTap: () {
print('Just clicked on 8');
},
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.cyan,
margin: const EdgeInsets.all(1.0),
child: const AutoSizeText(
'8',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 300.0, color: Colors.black45),
),
),
),
),
],
),
),
],
),
],
),
),
),
);
}
I'm attempting to create something that looks like this:
I didn't get the whole idea from the image but from what I understood, I have implemented it like this.
Since there is a lot of repetition and there is a pattern, I use GridView and ListView respectively.
class NumbersGridView extends StatelessWidget {
const NumbersGridView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
childAspectRatio: 3 / 2,
crossAxisSpacing: 10,
mainAxisSpacing: 20,
),
itemCount: 30,
itemBuilder: (buildContext, index) {
return InkWell(
onTap: () {
print(index);
},
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.cyan,
margin: const EdgeInsets.all(1.0),
child: AutoSizeText(
index.toString(),
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 300.0, color: Colors.black45),
),
),
),
);
}),
),
Container(width: 20.0, child: VerticalDivider(color: Colors.red)),
Flexible(
child: SizedBox(
width: 50.0,
child: ListView.builder(
itemCount: 5,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (buildContext, index) {
return Container(
height: 40.0,
width: 40.0,
alignment: Alignment.center,
color: Colors.cyan,
child: AutoSizeText(
index.toString(),
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.black45),
),
);
}),
),
)
],
);
}
}
If you want to implement it as you originally tried, here's is the code without the specified error.
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: GestureDetector(
onTap: () {
print('Just clicked on 7');
},
child: Align(
alignment: Alignment.center,
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.yellow,
margin: const EdgeInsets.all(1.0),
child: const AutoSizeText(
'7',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 300.0,
color: Colors.black45),
),
),
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
print('Just clicked on 7');
},
child: Align(
alignment: Alignment.center,
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.yellow,
margin: const EdgeInsets.all(1.0),
child: const AutoSizeText(
'7',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 300.0,
color: Colors.black45),
),
),
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
print('Just clicked on 7');
},
child: Align(
alignment: Alignment.center,
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.yellow,
margin: const EdgeInsets.all(1.0),
child: const AutoSizeText(
'7',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 300.0,
color: Colors.black45),
),
),
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
print('Just clicked on 7');
},
child: Align(
alignment: Alignment.center,
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.yellow,
margin: const EdgeInsets.all(1.0),
child: const AutoSizeText(
'7',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 300.0,
color: Colors.black45),
),
),
),
),
),
),
],
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//Expanded(
//child:
GestureDetector(
onTap: () {
print('Just clicked on 8');
},
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.cyan,
margin: const EdgeInsets.all(1.0),
child: const AutoSizeText(
'8',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 300.0, color: Colors.black45),
),
),
),
),
],
),
),
],
)
I have an app that has a bottomappbar with a textformfield, but when the user tries to insert data there the keyboard hides the text being typed.
I tried "resizeToAvoidBottomInset: true" and didnt worked, also tried to put a SingleChildScrollView on the body of the app and got "RenderBox was not laid out: RenderRepaintBoundary#32f0a relayoutBoundary=up1 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': Failed assertion: line 1785 pos 12: 'hasSize'".
I need a way to make the bottom part "expand" to the top of the keyboard when the user is typing or a way to show in the screen the text that is being typed.
How can I solve that? I have tried many ways and nothing seems to work.
The structure of my app is:
The code:
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
title: Text(
"xx",
),
//+ produtosList1[0].cod_produto),
actions: <Widget>[
Padding(
padding: EdgeInsets.only(right: 20.0),
child: GestureDetector(
onTap: () {
showDialog(
//dialog content
);
},
child: Icon(
Icons.search,
size: 26.0,
),
)),
],
),
drawer: Drawer(
elevation: 20.0,
child: ListView(padding: EdgeInsets.zero, children: <Widget>[
]
//appbar content
)),
body: Column(
children: [
Container(
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Column(
children: [
Row(children: [
Text(
"xxx",
style: TextStyle(
color: Colors.white,
),
overflow: TextOverflow.ellipsis),
]),
Row(children: [
Text(
"xxxx",
style: TextStyle(color: Colors.white),
)
])
],
)),
),
Container(
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 8.0, 0, 8.0),
child: Row(
children: <Widget>[
Expanded(
flex: 2,
child: Text("xxxx",
style: TextStyle(fontWeight: FontWeight.bold),
overflow: TextOverflow.ellipsis),
),
Expanded(
flex: 1,
child: Text(
"xxxxx",
style: TextStyle(fontWeight: FontWeight.bold),
)),
Expanded(
flex: 4,
child: Text(
"xxxx",
style: TextStyle(fontWeight: FontWeight.bold),
)),
Expanded(
flex: 4,
child: Text(
"xxxx",
style: TextStyle(fontWeight: FontWeight.bold),
)),
],
)),
),
Divider(
height: 5.0,
),
Expanded(
child: ListView.builder(
itemCount: produtosList1.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.fromLTRB(0.0, 4.0, 0.0, 4.0),
child: Row(
children: <Widget>[
Expanded(
flex: 2,
child: Text(
"xxxx"
),
),
Expanded(
flex: 1,
child: Text(
"xxxxx",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Expanded(
flex: 4,
child: Text(
"xxxx",
style: TextStyle(fontWeight: FontWeight.bold),
overflow: TextOverflow.ellipsis),
),
Expanded(
flex: 4,
child: Text(
"xxxxx",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 12),
overflow: TextOverflow.ellipsis),
),
],
),
);
}),
)
],
),
bottomNavigationBar: BottomAppBar(
child: Form(
child: Container(
height: 180.0,
color: Colors.blue[400],
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView(children: [
Container(
height: 50,
decoration: BoxDecoration(
color: Colors.white,
),
child: DropdownButtonFormField(
hint: Text('Choose '),
onChanged: (value) {
//dropdown values
},
items: newFuncionariosList,
),
),
Divider(
height: 6.0,
),
Row(
children: [
Expanded(
flex: 2,
child: TextFormField(
controller: _codprodController,
decoration: InputDecoration(
icon: Icon(Icons.add),
),
),
),
Expanded(
flex: 1,
child: ElevatedButton(
//button content
),
)
],
),
Divider(
height: 8.0,
),
Row(
children: [
Expanded(
flex: 6,
child: Text(produtoDesc == null ? "- - -" : produtoDesc,
overflow: TextOverflow.ellipsis)),
Expanded(
flex: 2,
child: TextFormField(
keyboardType: TextInputType.number,
controller: _qtdController,
decoration: InputDecoration(hintText: "qtd"),
),
),
Expanded(
flex: 2,
child: ElevatedButton(
//button content
))
],
)
]),
),
),
),
),
);
}
use MediaQuery.of(context).viewInsets.bottom and add it to your bottom navigation height
child: Form(
child: Container(
height: 180.0 + MediaQuery.of(context).viewInsets.bottom,
color: Colors.blue[400],
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView(children: [
Container(
height: 50,
decoration: BoxDecoration(
color: Colors.white,
),
),```
Fixed problem textfield was hidden by keyboard
new Scaffold(
appBar: new AppBar(
...
resizeToAvoidBottomPadding: true,
....
I'm kinda a loser when it comes to formatting and I've come to the conclusion I need a little guidance/advice. I have a ListView populated with cards that display data in them. Above this ListView I have the titles for the data in the ListView. Along with a search bar, but that shouldn't affect much. I'm having issues making the titles stay aligned with the data in the cards below, especially when switching between different devices since the screen size changes. What is the best way to do this? Any help and/or advice is highly appreciated!
This is an image of how it looks currently
This is the current code. I'm using a combination of flex and expanded for most of my formatting for moving the data & titles around.
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
appBar: PreferredSize(
preferredSize: Size.fromHeight(95.0),
child: AppBar(
automaticallyImplyLeading: false, // hides leading widget
flexibleSpace: DataAppBar(onChanged: (newValue) {
setState(() {
newValue = newValue;
});
}),
),
),
body: StreamBuilder<dynamic>(
stream: DataDBProvider.dataDB.getData(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
List data = snapshot.data;
return Column(children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
flex: 1,
child: Container(
width: MediaQuery.of(context).size.width * .45,
height: MediaQuery.of(context).size.height * .05,
child: TextField(
controller: editingController,
decoration: InputDecoration(
labelText: "Search",
hintText: "Search",
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(25.0)))),
),)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
flex: 3,
child: Container(
child: Text(
"Date",
style: TextStyle(
color: Colors.green, fontFamily: 'Montserrat'),
),
)),
Flexible(
flex: 2,
child: Container(
alignment: Alignment.centerLeft,
child: Text(
"Item",
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.green, fontFamily: 'Montserrat'),
),
),
),
Flexible(
flex: 2,
child: Container(
alignment: Alignment.center,
child: Text(
"Amount",
maxLines: 1,
style: TextStyle(
color: Colors.green, fontFamily: 'Montserrat'),
),
),
),
]),
Expanded(
child: ListView.builder(
itemCount: data.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.symmetric(
vertical: 1.0, horizontal: 4.0),
child: InkWell(
onLongPress: () =>
_openUpdateDrawer(data[index]),
child: Card(
color: (index % 2 == 0) ? greycolor : Colors.white,
child: Container(
height: 60,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Flexible(
flex: 2,
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(
left: 5, top: 13),
child: AutoSizeText(
data[index].date,
maxFontSize: 12,
minFontSize: 7,
style: TextStyle(
color: Colors.black),
textAlign: TextAlign.left),
),
],
),
),
Flexible(
flex: 4,
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(
top: 13, left: 10),
child: Text(
data[index].title,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.black,
fontFamily: 'Montserrat'),
),
),
Row(
children: [
Flexible(
child: Padding(
padding:
EdgeInsets.only(left: 8),
child: AutoSizeText(
'${data[index].description}',
maxLines: 1,
style: TextStyle(
color: Colors.black,
fontStyle:
FontStyle.italic),
),
))
],
),
],
),
),
Expanded(
child: Row(
mainAxisAlignment:
MainAxisAlignment.end,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerLeft,
child: AutoSizeText(
'\$${data[index].amount}',
maxLines: 1,
style: TextStyle(
color: Colors.black),
textAlign: TextAlign.left),
)
],
),
)
],
)),
),
));
},
))
]);
}));
}
So you are adding extra padding in your elements in the listview that you need to add to the titles:
padding:
EdgeInsets.only(left: 6), // add margin to accomplish offsetting the labels the same as the items
So now in the titles you can add either padding or margin for 8 to the left. This only applies to the first two though. So for the final one you can do this:
Flexible(
flex: 2,
child: Container(
alignment: Alignment.end, // changed from center to end
margin: EdgeInsets.only(right:8), // add the right margin
child: Text(
"Amount",
maxLines: 1,
style: TextStyle(
color: Colors.green, fontFamily: 'Montserrat'),
also just a friendly piece of advice is that you are making this a whole lot more complicated on your self than needed. The above answers your question but I would consider trying to clean up your code so future questions/problems are easier to identify.
I'm trying to develop a dashboard page, with 4 gridviews in a row and 2 gridviews in another row(image below). I'm trying to make the page scrollable and make it look like the image shown below:
I have developed the layout on flutter with code below:
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class Reporting extends StatefulWidget {
#override
_Reporting createState() => _Reporting();
}
class _Reporting extends State<Reporting> {
SfCartesianChart _getAnimationLineChart() {
return SfCartesianChart(
plotAreaBorderWidth: 0,
primaryXAxis: NumericAxis(majorGridLines: MajorGridLines(width: 0)),
primaryYAxis: NumericAxis(
majorTickLines: MajorTickLines(color: Colors.transparent),
axisLine: AxisLine(width: 0),
minimum: 0,
maximum: 100),
);
}
#override
Widget build(BuildContext context) {
;
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.grey.shade100,
),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CustomAppBar(),
Expanded(
child: Column(
children: <Widget>[
ListView(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
GridView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 6 / 3.5,
crossAxisCount: MediaQuery.of(context)
.size
.width >=
1300
? 4
: MediaQuery.of(context).size.width >= 700
? 2
: 1),
children: [
Card(
margin: EdgeInsets.all(20.0),
//margin: EdgeInsets.fromLTRB(80, 60, 80, 60),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Number Of Bugs",
style: TextStyle(
color: Colors.black, fontSize: 30.0),
),
Text(
"Critical, High, Info",
style: TextStyle(
color: Colors.green[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 30.0),
),
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
],
),
GridView(
shrinkWrap: true,
padding: EdgeInsets.only(
//top: 20.0,
left: 90.0,
right: 100.0),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 3 / 2,
crossAxisCount: MediaQuery.of(context)
.size
.width >=
1300
? 2
: MediaQuery.of(context).size.width >=
700
? 2
: 1),
children: <Widget>[
Card(
//margin: EdgeInsets.all(20.0),
//margin: EdgeInsets.fromLTRB(80, 60, 80, 60),
elevation: 3.0,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//mychart2Items("Conversion","0.9M","+19% of target"),
_getAnimationLineChart(),
],
),
),
Card(
//margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding:
const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 30.0),
),
Text(
"Tile 2",
style: TextStyle(
color: Colors.blue[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding:
const EdgeInsets.fromLTRB(30, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
Card(
margin: EdgeInsets.all(20.0),
elevation: 3.0,
color: Colors.white,
child: Padding(
padding:
const EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 30.0),
),
Text(
"Tile 3",
style: TextStyle(
color: Colors.deepOrange[900],
fontSize: 20.0),
),
],
),
),
),
])
],
),
],
),
),
],
),
),
),
);
}
}
I'm getting an error and it is overflowing. Things that I have tried to make it scrollable are used SingleChildScrollView, added shrinkwrap, added scrollAxisDirection. But nothing seems to work. Can someone guild me on how to solve this problem.
A RenderFlex overflowed by 408 pixels on the bottom.
The relevant error-causing widget was:
Column file:///Users/akramkhan/Documents/cshweb/cshwebapp/lib/pages/Reporting.dart:43:24
════════════════════════════════════════════════════════════════════════════════════════════════════
I tried your code and you could remove a couple of widgets and start with this:
return Scaffold(
body: SingleChildScrollView(
child: Column(children: <Widget>[
GridView(),
GridView(),
]),
),
);
then you can disable scrolls on the grid views and add more things you need.
Hope this helps. Let me pls know if this solves your issue