Related
I want to change the orientation of only one page within my app to landscape to view larger pictures
I can only find code to set orientation for the whole app. I don't know how to implement this( Flutter: How to set and lock screen orientation on-demand ) code into the existing code
// ======== CAROUSEL =========
return Scaffold(
appBar: AppBar(
backgroundColor: new Color(0xFFFA983A),
title: Image.asset(
'assets/images/logo_white.png',
fit: BoxFit.cover,
),
elevation: 0.0,
centerTitle: true,
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.search),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => new SearchPage()));
},
),
],
),
body: Column(
children: <Widget>[
Container(
alignment: Alignment.topCenter,
height: 200,
child: GestureDetector(
child: Hero(
tag: 'carouselHero',
child: SizedBox.expand(
child: Stack(
children: <Widget>[
imageSlider,
banner,
],
),
),
),
onDoubleTap: () {
Navigator.push(context, MaterialPageRoute(builder: (_) {
return ImageScreen();
}));
},
),
),
SizedBox(height: 4),
Expanded(
child: Container(
padding: EdgeInsets.only(left: 12.0, top: 4.0, right: 12.0),
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
widget.propertyDetailTown,
style: TextStyle(
color: Color(0xFFFA983A),
fontSize: 20.0,
fontWeight: FontWeight.bold),
),
Text(
"Ref: RBD02548649",
style: TextStyle(
color: Colors.grey,
fontSize: 14.0,
fontWeight: FontWeight.normal),
),
],
),
SizedBox(
height: 4,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
widget.propertyDetailArea,
style: TextStyle(
fontSize: 20.0, fontWeight: FontWeight.bold),
),
Text(
widget.propertyDetailPrice,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.normal,
color: Color(0xFFFA983A)),
),
],
),
SizedBox(
height: 8,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Image.asset(
'assets/images/icons/beds_new.png',
scale: 1.75,
),
Text(" 4"),
SizedBox(
width: 8,
),
Image.asset(
'assets/images/icons/bath_new.png',
scale: 1.75,
),
Text(
" 3",
),
SizedBox(
width: 8,
),
Image.asset(
'assets/images/icons/parking_new.png',
scale: 1.75,
),
Text(" 2"),
],
),
Text(
"1200 sqr ft.",
style: TextStyle(color: Colors.grey),
)
],
),
SizedBox(
height: 4,
),
Divider(
height: 10,
),
SizedBox(
height: 4,
),
// PROPERTY DESCRIPTION ==============================
Text(
'Description',
style: TextStyle(
color: Colors.black.withOpacity(0.8),
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting "
"industry. Lorem Ipsum has been the industry's standard dummy "
"text ever since the 1500s, when an unknown printer took a "
"galley of type and scrambled it to make a type specimen book. "
"It has survived not only five centuries, but also the leap "
"into electronic typesetting, remaining essentially unchanged.",
style: TextStyle(
color: Colors.black.withOpacity(0.6),
fontSize: 16.0,
fontWeight: FontWeight.normal),
),
SizedBox(height: 8),
Divider(height: 10),
Text(
"AMENITIES",
style: TextStyle(
color: Colors.black.withOpacity(0.8),
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
SizedBox(height: 8.0),
// AMENITIES STARTS HERE ===============================
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.hotel,
color: Color(0xFFFA983A),
),
Text(
" One",
style: TextStyle(fontSize: 16),
),
SizedBox(width: 100.0),
Icon(
Icons.room,
color: Color(0xFFFA983A),
),
Text(" Two")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.hotel,
color: Color(0xFFFA983A),
),
Text(
" One",
style: TextStyle(fontSize: 16),
),
SizedBox(width: 100.0),
Icon(
Icons.room,
color: Color(0xFFFA983A),
),
Text(" Two")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.hotel,
color: Color(0xFFFA983A),
),
Text(
" One",
style: TextStyle(fontSize: 16),
),
SizedBox(width: 100.0),
Icon(
Icons.room,
color: Color(0xFFFA983A),
),
Text(" Two")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.hotel,
color: Color(0xFFFA983A),
),
Text(
" One",
style: TextStyle(fontSize: 16),
),
SizedBox(width: 100.0),
Icon(
Icons.room,
color: Color(0xFFFA983A),
),
Text(" Two")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.hotel,
color: Color(0xFFFA983A),
),
Text(
" One",
style: TextStyle(fontSize: 16),
),
SizedBox(width: 100.0),
Icon(
Icons.room,
color: Color(0xFFFA983A),
),
Text(" Two")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.hotel,
color: Color(0xFFFA983A),
),
Text(
" One",
style: TextStyle(fontSize: 16),
),
SizedBox(width: 100.0),
Icon(
Icons.room,
color: Color(0xFFFA983A),
),
Text(" Two")
],
),
SizedBox(
height: 10,
),
Text(
"Home Loan Calculator",
style: TextStyle(
color: Colors.black.withOpacity(0.8),
fontSize: 18.0,
fontWeight: FontWeight.bold),
),
// Image.asset("assets/google_map.jpg"),
],
),
),
),
),
)
],
),
);
}
}
// ===========SECOND PAGE NEEDS TO BE LANDSCAPE ==================
class ImageScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
Widget imageSlider = Container(
height: MediaQuery.of(context).size.height,
child: Carousel(
boxFit: BoxFit.cover,
images: [
AssetImage('assets/images/houses/house.jpg'),
AssetImage('assets/images/houses/house1.jpg'),
AssetImage('assets/images/houses/house2.jpg'),
AssetImage('assets/images/houses/house3.jpg'),
AssetImage('assets/images/houses/house4.jpg'),
],
autoplay: false,
dotBgColor: Colors.transparent,
dotSize: 0,
),
);
return Scaffold(
body: GestureDetector(
child: Center(
child: Hero(
tag: 'carouselHero',
child: imageSlider,
),
),
onTap: () {
Navigator.pop(context);
},
),
);
}
}```
when i click on a picture it has to go to a new page which automatically change orientation to Landscape ans when i click back to previous page it changes again.
You are using a StatelessWidget, so you cannot override initState and dispose. First, convert your StatelessWidget to StatefulWidget, then implement the code provided by the other answer.
class ImageScreen extends StatefulWidget {
#override
ImageScreenState createState() => ImageScreenState();
}
class ImageScreenState extends State<ImageScreen> {
#override
void initState(){
super.initState();
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]);
}
#override
dispose(){
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
super.dispose();
}
#override
Widget build(BuildContext context) {
Widget imageSlider = Container(
height: MediaQuery.of(context).size.height,
child: Carousel(
boxFit: BoxFit.cover,
images: [
AssetImage('assets/images/houses/house.jpg'),
AssetImage('assets/images/houses/house1.jpg'),
AssetImage('assets/images/houses/house2.jpg'),
AssetImage('assets/images/houses/house3.jpg'),
AssetImage('assets/images/houses/house4.jpg'),
],
autoplay: false,
dotBgColor: Colors.transparent,
dotSize: 0,
),
);
return Scaffold(
body: GestureDetector(
child: Center(
child: Hero(
tag: 'carouselHero',
child: imageSlider,
),
),
onTap: () {
Navigator.pop(context);
},
),
);
}
}
How do I add a new column to a Card in flutter?
Currently, I have 2 Columns and can't figure out how to add a third between these since they are on the left and right sides. When I have tried adding a "new Column", it only creates a new row of text under the first Column.
This is my code so far:
Widget _buildListItem(BuildContext context, Record record) {
return Card(
key: ValueKey(record.activityName),
elevation: 8.0,
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
child: Container(
decoration: BoxDecoration(color: Color.fromRGBO(64, 75, 96, .9)),
child: ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
title: Text(
record.activityName,
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 23),
),
subtitle: Row(
children: <Widget>[
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RichText(
text: TextSpan(
text: "Activations: "+record.activations+
"\n"+record.dateCompleted,
style: TextStyle(color: Colors.white),
),
maxLines: 2,
softWrap: true,
)
],
)
)
],
),
trailing: Container(
child: Hero(
tag: "avatar_" + record.activityName,
child: CircleAvatar(
radius: 32,
backgroundImage: NetworkImage(record.icon),
backgroundColor: Colors.white,
)
)
),
onTap: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => new DetailPage(record: record)));
}
),
)
);
}
I am wanting 3 columns so that I can add either an image in the middle of this card.
Current output
Expected output
Based on your screenshot, here is the solution. You can modify it according to your needs.
Widget _buildListItem(BuildContext context) {
return Card(
margin: EdgeInsets.all(12),
elevation: 4,
color: Color.fromRGBO(64, 75, 96, .9),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16),
child: Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("Jumping", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
SizedBox(height: 4),
Text("Activations 9", style: TextStyle(color: Colors.white70)),
Text("03-08-19", style: TextStyle(color: Colors.white70)),
],
),
Spacer(),
CircleAvatar(backgroundColor: Colors.white),
],
),
),
);
}
Output:
Good morning. I made this screen and it works like a charm on high resolutions. Problem is, I want to support lower resolutions like Nexus 4 (768x1280).
So when I run this on an emulator (Nexus 4 size) and I touch the input fields, the keyboard either: blocks the inputs, or moves the two buttons at the bottom and overlaps them on something else.
So, to solve it I wrapped the entire layout on a ListView(), but now the bottom buttons, which are wrapped on a Row(), just won't stay at the bottom.
This is my code without the ListView and working on high res, but not on low:
return Form(
Stack(
Center(
Column(
...
),
),
Align(
alignment: Alignment.bottomCenter,
child: Row(
...
),
),
),
);
This is how it looks with resizeToAvoidBottomPadding: false
And this is how it looks with the value set to true
Thanks, everyone.
Did you try to use SingleChildScrollView ?
It is a widget for making the page able to resize the height and as well scrolling , for the listview thats not what is the listview for , you should add listview when you get an unknown amount of data,
We don't normally use it to just adjust the view.
ok so i edited the code as in here and i can scroll normally after the keyboard pop up and the view is good and i can click on the button normally try it.
Widget formWidget(){
return new Scaffold(
// appBar: AppBar(
// // Here we take the value from the MyHomePage object that was created by
// // the App.build method, and use it to set our appbar title.
// title: Text(widget.title),
// ),
body:Column(
children: <Widget> [
Expanded(
child:SingleChildScrollView(
child: Form(
child:
// Stack(
// children: <Widget>[
// Center(
// child: SingleChildScrollView(
// child:
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: (MediaQuery.of(context).size.height) > 600
? const EdgeInsets.only(top: 0.0)
: const EdgeInsets.only(top: 30.0),
child: Image(
image: AssetImage('assets/favIcon.png'),
width: 88.0,
height: 88.0,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 28.0, 0, 12.0),
child: Text(
'Delegados',
style: TextStyle(
fontFamily: 'Archia',
fontSize: 32.0,
),
),
),
Text(
'Introduce tus datos de acceso aquí.',
style: TextStyle(
color: Color(0xff83868F),
fontFamily: 'Brutal',
fontSize: 14.0,
),
),
Padding(
padding:
const EdgeInsets.fromLTRB(16.0, 26.0, 16.0, 12.0),
child: TextFormField(
decoration: InputDecoration(
labelText: 'Correo',
filled: true,
fillColor: Color(0xffF0F1F5),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
),
style: TextStyle(
fontFamily: 'Brutal',
color: Color(0xff1A1B1F),
),
controller: TextEditingController() ,
textInputAction: TextInputAction.next,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(16.0, 0, 16.0, 12.0),
child: TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Contraseña',
filled: true,
fillColor: Color(0xffF0F1F5),
suffixIcon: Icon(Icons.remove_red_eye),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
),
style: TextStyle(
fontFamily: 'Brutal',
color: Color(0xff1A1B1F),
),
controller: TextEditingController() ,
//focusNode:FocusNode(),
obscureText: true,
),
),
Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 26.0),
child: CupertinoButton(
onPressed: () {},
child: Text(
'Olvidé mi Contraseña',
style: TextStyle(
color: Color(0xff565A66),
fontFamily: 'Brutal',
fontSize: 14.0,
),
),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(16.0, 0, 16.0, 0),
child: ButtonTheme(
minWidth: double.infinity,
child: InkWell(
// onTap: state is! LoginLoading
// ? _onLoginButtonPressed
// : null,
child: Container(
height: 48.0,
width: 500.0,
decoration: BoxDecoration(
color: Color(0xff00CC36),
borderRadius: BorderRadius.circular(8.0),
),
child: Align(
alignment: Alignment.center,
child: Container(
child:
// state is LoginLoading
// ? CircularProgressIndicator():
Text(
'INGRESAR AHORA ›',
style: TextStyle(
color: Colors.white,
fontFamily: 'Brutal',
fontSize: 14.0,
),
),
)),
),
),
),
),
],
),
// ),
)
,
// aqui va <<<<<<<<<<<<
// ],
// ),
)
),
Align(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CupertinoButton(
onPressed: () {},
child: Text(
'¿No tienes cuenta?',
style: TextStyle(
color: Color(0xff83868F),
fontFamily: 'Brutal',
fontSize: 14.0,
),
),
),
InkWell(
onTap: null,
child: Container(
height: 32.0,
width: 112.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6.0),
border: Border.all(
color: Color(0xffD7D9E0),
width: 1.0,
),
),
child: Align(
alignment: Alignment.center,
child: Text(
'CONTACTANOS',
style: TextStyle(
color: Color(0xff565A66),
fontFamily: 'Brutal',
fontSize: 11.0),
),
),
),
),
],
),
),
]
)
,
// )
);
}
In your Scaffold can you try this.
Scaffold(
resizeToAvoidBottomInset: false,
...
);
I position two elements in the center and bottom of the screen by this code.
body: Column(
children: [
Expanded(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 80,
width: 80,
child:
Image(image: AssetImage("assets/images/logo.png"))),
SizedBox(height: 10),
Text(
"Tings App",
style: TextStyle(fontSize: 36),
),
SizedBox(height: 10),
TextFormField(
controller: _emailController,
decoration: InputDecoration(
border: OutlineInputBorder(),
isDense: true,
labelText: 'Email/phone'),
validator: (value) {
if (value.isEmpty) {
return 'Please enter a valid email';
}
return null;
},
),
],
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
_isLoading
? CircularProgressIndicator()
: SizedBox(
width: MediaQuery.of(context).size.width * 0.7,
height: 60.0,
child: ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0),
),
),
),
child: Text(
"SignIn",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w800,
fontSize: 18),
),
onPressed: () {
_login(context);
},
),
),
SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Don't have account?",
style: TextStyle(fontSize: 16),
),
SizedBox(width: 6),
TextButton(
onPressed: () {
Navigator.push(
context, SlideRightRoute(page: Signup()));
},
child: Text("SignUp"),
),
],
)
],
),
),
)
],
),
I want to achieve something like below
What I am able to achieve
Here is my code
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Row(
children: <Widget>[
Container(
color: Colors.orange,
width: 4,
),
Expanded(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.alarm),
SizedBox(
width: 2,
),
Text(
"Starts",
style:
TextStyle(fontFamily: "BarlowMedium", fontSize: 12),
),
SizedBox(
width: 4,
),
Text(
studentClassesData.classStarttime,
style: TextStyle(fontFamily: "BarlowBold", fontSize: 12),
),
SizedBox(
width: 4,
),
Text(
"to",
style:
TextStyle(fontFamily: "BarlowMedium", fontSize: 12),
),
SizedBox(
width: 4,
),
Text(
studentClassesData.classEndtime,
style: TextStyle(fontFamily: "BarlowBold", fontSize: 12),
)
],
),
SizedBox(
height: 4,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
studentClassesData.subject,
style: TextStyle(
fontFamily: "BarlowBold", fontSize: 12, color: blue),
),
),
SizedBox(
height: 4,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
CircleAvatar(
backgroundImage:
NetworkImage(studentClassesData.facultyImage),
child: Image.asset("images/round_only.webp"),
),
SizedBox(width: 5,),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
"Faculty",
style: TextStyle(fontFamily: "KohinoorDemi"),
),
),
SizedBox(
height: 3,
),
Text(
studentClassesData.faculty,
style: TextStyle(fontFamily: "BarlowBold"),
),
],
)
],
),
SizedBox(
height: 4,
),
Row(
children: <Widget>[
Icon(Icons.business),
Column(
children: <Widget>[
Text(
"Floor/Room",
style: TextStyle(fontFamily: "KohinoorDemi"),
),
SizedBox(
height: 3,
),
Text(
"${studentClassesData.floor}/${studentClassesData.room}",
style: TextStyle(fontFamily: "BarlowBold"),
),
],
)
],
),
],
),
)
],
));
I am not able to achieve the view which has a yellowish colour at the start to occupy same height as the Row. As you can see in the above code I have used a Container and I know I can give a height to the container but I don't want to give a fixed height to the container as the height may change depending on data coming from the api..
You need to use - IntrinsicHeight to get what you want.
working Code(with Dummy Values):
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
clipBehavior: Clip.antiAlias,
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.orange,
width: 4,
),
SizedBox(width: 5.0,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.alarm),
SizedBox(
width: 2,
),
Text(
"Starts",
style: TextStyle(
fontFamily: "BarlowMedium", fontSize: 12),
),
SizedBox(
width: 4,
),
Text(
'11:30 AM',
style:
TextStyle(fontFamily: "BarlowBold", fontSize: 12),
),
SizedBox(
width: 4,
),
Text(
"to",
style: TextStyle(
fontFamily: "BarlowMedium", fontSize: 12),
),
SizedBox(
width: 4,
),
Text(
'1:30 PM',
style:
TextStyle(fontFamily: "BarlowBold", fontSize: 12),
)
],
),
SizedBox(
height: 4,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Design Studio 6 (Capstone)',
style: TextStyle(
fontFamily: "BarlowBold",
fontSize: 12,
color: Colors.blue),
),
),
SizedBox(
height: 4,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
CircleAvatar(
backgroundImage:
NetworkImage('https://placeimg.com/640/480/any'),
child: Image.asset("images/round_only.webp"),
),
SizedBox(
width: 5,
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
"Faculty",
style: TextStyle(fontFamily: "KohinoorDemi"),
),
),
SizedBox(
height: 3,
),
Text(
'Meenal',
style: TextStyle(fontFamily: "BarlowBold"),
),
],
)
],
),
SizedBox(
height: 4,
),
Row(
children: <Widget>[
Icon(Icons.business),
Text(
"Floor/Room",
style: TextStyle(fontFamily: "KohinoorDemi"),
),
SizedBox(
height: 3,
),
Text(
"6th Floor: North Wing / ISDI 606",
style: TextStyle(fontFamily: "BarlowBold"),
)
],
),
],
)
],
),
)),
Output:
I don't have fonts you have used, so UI looks different than yours. But it get the job Done.
You can do it by wrapping your Card in a SizedBox giving it a height you want. In this case, you don't need to hard code any height to your Container, the Container will just expand to match the height of your Row. Here is simple example:
SizedBox(
height: 100,
child: Card(
color: Colors.green,
child: Row(
children: <Widget>[
Container(
color: Colors.blue,
width: 100, // no need to set any height, it will automatically fill to match row
)
],
),
),
);
Below are my code I always got some pixel overflowed on right size. I was playing with Expanded and Fixable widgets as well as mainAxisSize of row and column too.
Look at the code:
Widget productDisplayListView(List<Products> listOfProduct, int index) {
return Container(
margin: EdgeInsets.all(7),
child: Container(
child: Card(
elevation: 4,
child: Container(
padding: EdgeInsets.all(6),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
height: 110,
width: 90,
child: Image.network(
listOfProduct[index].thumbnail ?? '',
fit: BoxFit.cover,
),
),
Container(
padding: EdgeInsets.all(5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
height: 20,
width: 20,
child: Icon(
Icons.crop_square,
color: Colors.red,
size: 18,
),
),
Flexible(
child: Text(
'The overflowing RenderFlex has an orientation of Axis.horizontal.',
overflow: TextOverflow.ellipsis,
softWrap: true,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: Theme.of(context).primaryColor),
),
)
],
),
SizedBox(height: 5),
Text(
'The overflowing RenderFlex has an orientation of Axis.horizontal.',
maxLines: 1,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Colors.grey),
),
SizedBox(height: 5),
Text(
'₹${listOfProduct[index].price ?? ''}',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: Colors.black),
)
],
),
)
],
),
),
),
),
);
}
I tried with many Que./Ans. on stackOverFlow but But didn't get success.
Updated Code with Fixed Overflow Error. Have to made quite a change in your Widget Tree.
Widget productDisplayListView() {
return Card(
elevation: 4,
child: Container(
padding: EdgeInsets.all(6),
child: Row(
children: <Widget>[
Container(
height: 110,
width: 90,
child: Image.network(
'https://placeimg.com/250/250/any',
fit: BoxFit.cover,
),
),
SizedBox(
width: 5.0,
),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
MergeSemantics(
child: Row(
children: <Widget>[
Icon(
Icons.crop_square,
color: Colors.red,
size: 18,
),
Flexible(
child: Text(
'The overflowing RenderFlex has an orientation of Axis.horizontal.',
overflow: TextOverflow.ellipsis,
softWrap: true,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: Theme.of(context).primaryColor),
),
)
],
),
),
SizedBox(height: 5),
Text(
'The overflowing RenderFlex has an orientation of Axis.horizontal.',
maxLines: 1,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Colors.grey),
),
SizedBox(height: 5),
Text(
'₹ 10,000',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: Colors.black),
)
],
),
)
],
),
),
);
}
OutPut:
Check Your Rows Add Column Widgets. If any row or column widget has a single flexible child an error will occur
Doing like this should fix your problem:-
..... Container(
padding: EdgeInsets.all(5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Container(
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
height: 20,
width: 20,
child: Icon(
Icons.crop_square,
color: Colors.red,
size: 18,
),
),
),
Flexible(
child: Text(
'The overflowing RenderFlex has an orientation of Axis.horizontal.',
overflow: TextOverflow.ellipsis,
softWrap: true,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: Theme.of(context).primaryColor),
),
)
],
),
SizedBox(height: 5),
Flexible(
child: Text(
'The overflowing RenderFlex has an orientation of Axis.horizontal.',
maxLines: 1,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Colors.grey),
),
),
SizedBox(height: 5),
Text(
'₹${listOfProduct[index].price ?? ''}',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: Colors.black),
)
],