The Problem
I have a card that contains a row of two elements, the second one being a column of two texts. One of the texts can be long, so the column-element itself can overflow.
Coming from CSS, a "width: 100%" would usually be enough here.
What I already tried
I learned you could wrap the column with something like Expanded or Flexible, but it leads the text to become invisible (and the overflow still existing).
I am not sure where exactly I have to put the Flexible/Expanded.
I looked into similar questions and there was always an "Expanded", but I could not apply any of said solutions to my layout so far.
Question
What is the cleanest way to get the outlined box to be only as wide as the padding should allow?
Code
#override
Widget build(BuildContext context) {
return (Card(
child: InkWell(
onTap: () {
print("tab" + name);
},
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(25),
child: SizedBox(
width: 50,
height: 50,
child: Image(
image: NetworkImage(imageUrl),
),
),
),
Padding(
padding: const EdgeInsets.all(16),
child: Container(
decoration: BoxDecoration(
border: Border.all(width: 1, color: Colors.purpleAccent),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontWeight: FontWeight.bold),
textAlign: TextAlign.left,
),
Text(
description,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
),
],
),
),
),
],
),
),
),
));
}
You can surround the Padding widget inside your Row with an Expanded widget - The child of Expanded will then size itself to the space available.
For some additional context, Rows and Columns are both Flex widgets. Flex widgets layout their children along an axis, and the size of this axis is unbounded by default. Even though the widget "knows" how much space it has available on the display, it doesn't pass that information along to its children, so the children are free to take whatever size they want, which means they can potentially overflow the container.
An Expanded widget can only be placed as a direct child of a Flex widget, and it automatically takes up a given proportion (given by the flex property) of the space available to it (by default that will simply be all of the space which is not taken up by other widgets in the children list).
So essentially, Expanded will take up as much space as the parent widget has available, and then will constrain it's child to be no larger than that (along whichever axis pertains).
The link above to the Flex documentation has more info.
Related
What is the best way to have a background gradient fill the entire screen, all while being in a SingleChildScrollView? I would like the screen to scroll only when necessary (when the items and bottom text overflow the screen). Note the Back button is a FAB.
Note: I have tried ConstrainedBox (but the scroll is weird when there's no overflow in the listview)
What's the best way to 1) fill the background completely, and 2) have scrolling activity only activate when the listview overflows?
My code:
Widget body() {
return SingleChildScrollView(
child: Container(
decoration: background(),
child: Column(children: [
listViewReminderBuilder(),
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(5),
child: bottomText()),
SizedBox(height: 10),
])));
}
BoxDecoration Background() {
return BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
topColor,
bottomColor,
],
));
}
This is the result of the above code is shown below. The scroll works as I'd like (only scrolls when there's an overflow of listview items), but obviously the background doesn't fill the screen.
Many solutions online led me to the ConstrainedBox. My code and result is as follows:
Widget body() {
_screenHeight = MediaQuery.of(context).size.height;
return SingleChildScrollView(
child: Container(
decoration: background(),
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: _screenHeight),
child: Column(children: [
listViewReminderBuilder(),
SizedBox(height: 10),
Container(
padding: EdgeInsets.all(5),
child: bottomText()),
SizedBox(height: 10),
]))));
}
// background() was the same
The result. In this case, the background nicely fills the screen, but the screen is always scrollable and looks weird if the listview items aren't overflowing.
What's the best way to 1) fill the background completely, and 2) have scrolling activity only activate when the listview overflows?
first of all: wraping ListView with SingleChildScrollView is not good practice.
workaround:
use container only for background. by setting width infinity to fill entire screen.
no need to wrap with SingleChildScrollView if you have a ListView. just use Expanded widget.
Widget body() {
return Container(
width: double.infinity,
// here you can set height if you want.
// but since we use Column,by default it will expand the maximum height.
decoration: background(),
child: Column(children: [
// using Listview will make you widget not overflowing.
// wrap with expanded to make it fill available screen.
Expanded(child: listViewReminderBuilder(),),
SizedBox(height: 10),
Container(padding: EdgeInsets.all(5), child: Text('Back')),
SizedBox(height: 10),
]));
}
i just tried on dartpad. and it works fine.
View before the keyboard is seen
The view after the keyboard is seen
I want the background image to always stay at the size before the keyboard is seen.
return Scaffold(
body: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/back.png'),
fit: BoxFit.cover,
),
),
alignment: Alignment.center,
padding: const EdgeInsets.fromLTRB(50, 100, 70, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Center(
child: TextFormWidget(form: name, hint: 'Name',),
),
SizedBox(
height: 15,
),
TextFormWidget(form: surname, hint: 'Surname'),
],
),
),
);
resizeToAvoidBottomInset on scaffold
If true the [body] and the scaffold's floating widgets should size themselves to avoid the onscreen keyboard whose height is defined by the ambient [MediaQuery]'s [MediaQueryData.viewInsets] bottom property.
For example, if there is an onscreen keyboard displayed above the scaffold, the body can be resized to avoid overlapping the keyboard, which prevents widgets inside the body from being obscured by the keyboard.
Defaults to true.
Also you might also like to wrap Scaffold with SafeArea to get view after statusBar.
This is from London App Brewery completed Flutter project "BMI Calculator": https://github.com/londonappbrewery/BMI-Calculator-Flutter-Completed.git
I'm not sure if caused by my outdated android phone or the android screen is too small, but I'm getting Bottom Overflow Pixels For example, the top two cards have an error message of Bottom Overflow by 19 Pixels, the center card has an error of Bottom Overflowed by 60 pixels, and bottom two cards have an error of Bottom Overflowed by 56 pixels.
Additionally, if I rotate my phone to 90 degrees, the card image size decreases dramatically, as you can see from the second image.
Please help me fix this.
Thank you
class _InputPageState extends State<InputPage {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: Column(
children: <Widget[
Expanded(
child: Row(
children: <Widget[
Expanded(
child: ReusableCard(
colour: colorCode,
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget[
Icon(
FontAwesomeIcons.mars,
size: 20.0,
),
SizedBox(
height: 5.0,
),
Text(
'MALE',
style: TextStyle(
fontSize: 10.0,
color: Color(0xFF8D8E98),
),
)
],
),
),
)]),),
]));
}
}
This is happening because your UI takes up too much space for your phone! You have two options to solve this.
Either you wrap your overflowing widgets in a scrolling widget, like SingleChildScrollView, this will let you scroll the Widget if it is too large.
Or you calculate the size of the widget based on device size. You can do that by using the MediaQuery class:
MediaQuery.of(context).size.height Can be used to get device height for instance.
Have a look at this article if you want to go down that path. https://medium.com/tagmalogic/widgets-sizes-relative-to-screen-size-in-flutter-using-mediaquery-3f283afc64d6
Of course you could also just reduce the size of your Widgets so it fits on your device. Thats fine for Tutorial purposes, but if you actually want to publish an App, go with the MediaQueryapproach.
Good luck!
I want the lower path of Doctor image to get transparent so that I can see the tiles going underneath it.
How can I do that? I tried opacity but it is making the whole image fade.
Remember just the lower part not whole image
For different opacity in the same image, you can use a ShaderMask like this:
ShaderMask(
shaderCallback: (rect) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Colors.black.withOpacity(1.0),
Colors.black.withOpacity(1.0),
Colors.black.withOpacity(0.3),
Colors.black.withOpacity(0.3),// <-- change this opacity
// Colors.transparent // <-- you might need this if you want full transparency at the edge
],
stops: [0.0, 0.5,0.55, 1.0], //<-- the gradient is interpolated, and these are where the colors above go into effect (that's why there are two colors repeated)
).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
},
blendMode: BlendMode.dstIn,
child: FlutterLogo(size: 80, colors: Colors.red),
),
You'll have to play around with the LinearGradient stops in order to get the effect that you're looking for. Just for completeness sake, let me explain the colors and the stops that I chose. Since the gradient is interpolated, you need a really strong step from one color to the other. So, looking at the stops and colors, it reads like this:
start the first color (with opacity = 1.0) at 0% of the way down and go until you hit 50% of the way down, then interpolate from 50% to 55% from opacity 1.0 to opacity 0.3 (that's why those numbers need to be close together) Finally, end with opacity 0.3 at 100% of the image.
I explained that piece, because you will have to adjust the 0.5 and 0.55 piece to make it look how you want.
You will have to use Stack and positioned widget side by side.
Add your image as child of the Container. I hope this helps
Stack(
children: <Widget>[
Positioned(
right: 20,
child: Container(
height: 150,
width: 100,
color: Colors.black,
),
),
ListView(
padding: EdgeInsets.only(top: 100),
children: <Widget>[
Ink(
color: Colors.green,
child: ListTile(
title: Text("Tile 1"),
subtitle: Text("subtitle"),
),
),
Ink(
color: Colors.blue,
child: ListTile(
title: Text("Tile 2"),
subtitle: Text("subtitle"),
),
),
Ink(
color: Colors.green,
child: ListTile(
title: Text("Tile 3"),
subtitle: Text("subtitle"),
),
),
],
),
],
),
Currently the only way I could make this kind of curved effect would be through making 2 container, making 1 a child of another and making 1 container's colour into the background colour.
However I cannot replicate this effect if the background is an image. Could anyone assist?
Example of the code I use:
Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
Container(
height: 100,
color: Color(0xFF0D6068),
),
Expanded(
child: Container(
color: Color(0xFF0D6068),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
)),
),
))
],
)),
);
You can make use of a Stack widget to achieve this, such that the background color or image would be at the back then the curved container would be stacked on it. Here is an example code.
Stack(children <Widget> [
Image.asset(''),
Container()
]
)
Instead of using an image asset, you can make use of BoxDecoration with the decoration parameter of a container. The BoxDecoration has an image parameter where you can provide your image with a DecorationImage() widget.