I'm new to Flutter and ran into this slight problem. So I've created a Card widget and placed an image in it. Originally the image was horizontal, so I rotated it to be vertical. However after doing so, the image overflowed out of my card. Any help would be much appreciated. Thanks :)
See image here
Card(
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("My Boat"),
Transform.rotate(
angle: -.9,
child: Image(
image: AssetImage('images/boat.png',),
height: 140,
),
)
],
)),
you have two choices
first, remove its height
Card(
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("My Boat"),
Transform.rotate(
angle: -.9,
child: Image(
image: AssetImage('images/boat.png',),
),
)
],
)),
second, you can wrap it in Expanded like
Card(
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("My Boat"),
Expanded(
child: Transform.rotate(
angle: -.9,
child: Image(
image: AssetImage('images/boat.png',),
),
)
)
],
)),
Related
So I've created a Card which hold certain information of a course,It shows the percentage of the course you have completed using a LinearProgressIndicator.
Widget top(BuildContext context) {
return Row(
children: <Widget>[
Image.network(
image,
height: 100,
width: 100,
),
SizedBox(
width: 16,
),
Flexible(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(checkTitle(title),
style: Theme.of(context).textTheme.headline3),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: MediaQuery.of(context).size.width * 0.5,
child: LinearProgressIndicator(
value: int.parse(progress) * 0.01,
valueColor: AlwaysStoppedAnimation<Color>(LightSeaGreen),
backgroundColor: Colors.greenAccent,
// (int.parse(progress)).roundToDouble(),
),
),
Text('$progress%')
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [Text(startDate), Text(finishDate)],
),
],
)),
],
);
}
My output,
enter image description here
but when I change the width of my screen I get this error
enter image description here
what I want is for the LinearProgressIndicator to be responsive according to the screen width.Please help!!!
Wrap LinearProgressIndicator with Expanded.
Expanded(
child: LinearProgressIndicator(
value: int.parse(progress) * 0.01,
valueColor: AlwaysStoppedAnimation<Color>(LightSeaGreen),
backgroundColor: Colors.greenAccent,
// (int.parse(progress)).roundToDouble(),
),
),
I want to create a responsibility for the CircleAvatar widget, but I am not sure how.
Here is my code:
body: Container(
padding: const EdgeInsets.all(10),
width: MediaQuery.of(context).size.width,
child: Row(children: [
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(...),
if (_isAvatar)
Container(
padding: const EdgeInsets.all(15),
child: CircleAvatar(
maxRadius: MediaQuery.of(context).size.width -
MediaQuery.of(context).size.width +
78, // Here is a problem, how to calc width to fit on any device?
backgroundImage: NetworkImage(
_pageContent['acf']['doctor']['avatar']),
),
),
Container(...),
],
)),
])));
I want to make the widget responsive and fittable on any device or resolutio.
I am Flutter's newbie, please help!
Thanks!
You should use radius, not maxRadius. Here's the code:
CircleAvatar(
radius: MediaQuery.of(context).size.width * 0.3, //change 0.3 to any value you want
backgroundImage: NetworkImage(
_pageContent['acf']['doctor']['avatar']),
),
),
The layout have uses column with Text and Image. The data change based from a list and some text/image are nil. How to make the container takes the same height when only one data is present?
Thanks.
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.red,
child: Column(
children: [
Text(
'This is Container/Column1. It have two widgets, Text and Image. How to make the height of the container same even if one the the widget is removed/null?',
),
Image.asset('assets/index.jpg')
],
),
),
Container(
color: Colors.green,
child: Column(
children: [
Text('This is Container/Column2. This will have additional widgets.'),
SizedBox(
width: double.maxFinite,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor: Colors.white,
),
child: Text('Next Button',
),),),],),),],),
first approach: add a fixed height to your container
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
// this will give the container a fixed height of 0.4 from the screen height
height: MediaQuery.of(context).size.height * 0.4,
color: Colors.red,
child: Column(
children: [
Text(
'This is Container/Column1. It have two widgets, Text and Image. How to make the height of the container same even if one the the widget is removed/null?',
),
Image.asset('assets/index.jpg')
],
),
),
Container(
color: Colors.green,
child: Column(
children: [
Text('This is Container/Column2. This will have additional widgets.'),
SizedBox(
width: double.maxFinite,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor: Colors.white,
),
child: Text(
'Next Button',
),
),
),
],
),
),
],
),
second approach: if one of them is null add a SizedBox() with your prefered height
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.4,
color: Colors.red,
child: Column(
children: [
someCondition ? Text(
'This is Container/Column1. It have two widgets, Text and Image. How to make the height of the container same even if one the the widget is removed/null?',
) : SizedBox(height : 40)
someCondition ? Image.asset('assets/index.jpg') : SizedBox(height : 40)
],
),
),
Container(
color: Colors.green,
child: Column(
children: [
Text('This is Container/Column2. This will have additional widgets.'),
SizedBox(
width: double.maxFinite,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor: Colors.white,
),
child: Text(
'Next Button',
),
),
),
],
),
),
],
);
One way is to wrap column with Expanded. Second is to have fixed height for contained. If you have this problem with ListView inside another widget and have problems, use shrinkWrap as true inside a ListView. And again for your problem (which person above failed to understand) is that you need or fixed value for height or use Expanded (as much space as possible) or Flexible (least space possible).
I have a list view with horizontal scroll and i have added CupertinoContextMenu to the image.
everything is works fine but the action buttons are not aligned center.
I have added the code. I tried with wrap scaffold too. same issue still.
I have to align the action buttons under the image center posisiton.
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Center(child: _invoiceImageSlider()),
);
// Image Slider List
Widget _invoiceImageSlider(){
return Container(
height: 250,
padding: EdgeInsets.fromLTRB(0, 0, 20, 0),
child: ListView(
// This next line does the trick.
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160.0,
child: _invoiceContextMenu(),
),
Container(
width: 160.0,
child: _invoiceContextMenu(),
),
Container(
width: 160.0,
child: _invoiceContextMenu(),
),
Container(
width: 160.0,
child: _invoiceContextMenu(),
),
],
),
);
}
Widget _invoiceContextMenu(){
return Container(
child: CupertinoContextMenu(
child: Container(
child: _invoiceImage(),
),
previewBuilder: (BuildContext context, Animation<double> animation, Widget child) {
return FittedBox(
fit: BoxFit.cover,
child: ClipRRect(
borderRadius: BorderRadius.circular(64.0 * animation.value),
child: Image.asset('assets/invoices/'+_invoiceInfo.filename),
),
);
},
actions: <Widget>[
CupertinoContextMenuAction(
child: Row(
children: <Widget>[
Icon(
Feather.trash_2,
size: 25,
color: Colors.red,
),
SizedBox(width: 10),
Text("Delete")
]
),
onPressed: () {
Navigator.pop(context);
},
),
],
),
);
}
You can do so by centering the whole ContextMenu like this:
Align(
alignment: Alignment.center,
child: CupertinoContextMenu(),
)
Hope this helped. Cheers
I'm trying to bottom-center a widget at the bottom of a Column, but it keeps aligning to the left.
return new Column(
new Stack(
new Positioned(
bottom: 0.0,
new Center(
new Container(),
),
),
),
);
The existence of the Positioned forces the Container to the left, instead of centering. Removing the Positioned, however, puts the Container in the middle-center.
Align is the way to go if you have only one child.
If you have more, consider doing something like this:
return new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
// Your elements here
],
);
The easiest and the correct way to do it - use Spacer()
Example:
Column(
children: [
SomeWidgetOnTheTop(),
Spacer(),
SomeCenterredBottomWidget(),
],
);
Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Padding(
padding: EdgeInsets.only(bottom: 10.0),
child: //Your widget here,
),
),
),
I have used this approach,
What i want is, A layout always in bottom but whenever Keyboard pops-up that layout also comes over it
body: Container(
color: Colors.amber,
height: double.maxFinite,
child: new Stack(
//alignment:new Alignment(x, y)
children: <Widget>[
new Positioned(
child: myWidget(context, data.iconName, Colors.red),
),
new Positioned(
child: new Align(
alignment: FractionalOffset.bottomCenter,
child: myWidget(context, data.iconName, Colors.green)
),
)
],
),
),
1) You can use an Align widget, with FractionalOffset.bottomCenter.
2) You can also set left: 0.0 and right: 0.0 in the Positioned.
Just expanding the answers:
Spacer is an option no one mentioned yet; it is used in case you prefer not to use Positioned / Align.
Align works if you want to specify the alignment of a child inside a parent. Use it anywhere but directly inside Stack
Positioned is similar to Align, but works only under Stack directly.
Design everything using Expanded() is one of the easiest way to do this
Column(
children: [
Expanded(
child: Placeholder(),
flex: 1,
),
Expanded(
child: Placeholder(),
flex: 10,
),
Expanded(
flex: 2,
child: Placeholder(),
)
],
),
If you wish to leave content as it, can wrap it with scrollable.
Useful if you have inputs in the children:
return Stack(
children: <Widget>[
Positioned(
child: SingleChildScrollView(
child: Column(
children: children
..add(Container(
height: 56, // button heigh, so could scroll underlapping area
)))),
),
Positioned(
child: Align(
alignment: Alignment.bottomCenter,
child: button,
),
)
],
);
Widget _bottom() {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Container(
color: Colors.amberAccent,
width: double.infinity,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: new List<int>.generate(50, (index) => index + 1)
.map((item) {
return Text(
item.toString(),
style: TextStyle(fontSize: 20),
);
}).toList(),
),
),
),
),
Container(
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'BoTToM',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 33),
),
],
),
),
],
);
}
Wrap your Container in SingleChildScrollView() widget. Then it will not come above when keyboard pops up.
In addition of Stack:
to avoid floating container on keyboard, use this
return Scaffold(
appBar: getAppBar(title),
resizeToAvoidBottomInset: false,
body: