I need to render an image in several different image widgets, just like this photo:
And add them to a column Widget. I have a restriction that each widget must not be taller than 120px. I have tried SizedOverflowBox with ClipRect, and SizedBox but didn't work.
This is how I'd doing using CSS (Obviously with some JS to generate dynamic DIVs and all the bells and whistles):
#top, #bottom {
width: 240px;
height: 120px;
background-image: url("/img/cat.jpeg");
}
#top {
background-position: 0 0;
}
#bottom {
background-position: 0 -120px;
}
That would generate something like this:
I haven't found any widget combination that allows me to do it.
Try using a Stack widget (https://youtu.be/liEGSeD3Zt8). You can layer widgets on the z-axis using it. Then, add 2 children widgets to it where each is wrapped inside a Positioned widget (https://youtu.be/EgtPleVwxBQ). This will allow you to move the 2 children relative to each other in the Stack.
Related
I am new in flutter I can't understand that is infinity size render in flutter
If I use container with infinity width then it will render but in box constraints documentation infinity size can't render
This is because there is something constraining the widget, when you set as an example:
Container(
width: double.infinity,
),
it will try to take an infinity size, which usually will throw an error to you, but it's constrained so it takes the max possible width.
The Container widget is built on top of different multiples widgets such as ConstrainedBox, DecoratedBox, Align, LimitedBox... , the ConstrainedBox defaults to the BoxConstraints.expand(), check it's source code:
// ...
child: ConstrainedBox(constraints: const BoxConstraints.expand()),
);
but if you check also the Scaffold source code :
// ....
final BoxConstraints fullWidthConstraints = looseConstraints.tighten(width: size.width);
so trying to expand that Container even within infinity, will expand it at maximum on the fullWidthConstraints which is, in this case, the screen's width.
to display image according to it's original size i do the following
Image.file(File(fileCreated!.path)),
to display image to fit height and width (full screen) i do the following
Image.file(File(fileCreated!.path),fit: BoxFit.cover,height: double.infinity,width: double.infinity,),
ok it is now in full screen but i noticed there is some missing parts of the image contents is no longer visible on screen like 20 pixel from width and height , i know flutter do it for keeping the image quality the same. but How i ignore that behavior
How could i display image in full screen so the whole image parts is visible on screen ?
i tried with following
height:MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
whatever i change the height. the width will be auto changing too, even if i did not change the width !!!!
but same result
edit :
full parent
#override
Widget build(BuildContext context) {
return Scaffold(
body: Image.file(File(widget.imageFile,),fit: BoxFit.cover,height: MediaQuery.of(context).size.height,),
);
}
}
You can use MediaQuery, but I will prefer using LayoutBuilder on top widget. Also check the parent widget if it is having padding/margin.
Image.file(
File(fileCreated!.path),
fit: BoxFit.fill,
height:MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
I want the material UI to stay the same width it is before an item is selected. (How the Lab Autocomplete works).
For example if you select the 3rd option here, it will grow, how do I disable that?
https://codesandbox.io/s/material-demo-i4ckf
Instead I would like it to act like the autocomplete does, (Choose Lord of the rings)
https://codesandbox.io/s/kcq04
Instead of using minWidth just set the exact width that you need:
formControl: {
margin: theme.spacing(1),
width: 120
}
You've given minWidth property, usually in flex layouts if there's no restriction like maxWidth or flexGrow:0 then it will occupy as much space as available
you can set a fixed width for it like below
also to add text overflow add the necessary css below
formControl: {
margin: theme.spacing(1),
width: 120,
// ellipsis overflow
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
}
here's the link https://wsh90.csb.app/
Edit as pointed by Dekel,
Overflow part is may not be necessary
I have a Scrollable (ListView or any other) and it contains a transparent widget, say Container(height:200). I can see through both the widget and the scrollable (in other words I can see the widgets behind the scrollable).
How can I be able to click through the transparent widget and the scrollable, so that I reach the widgets behind the scrollable?
ListView(
children: [
Container(height: 200), // Transparent.
Container(color: Colors.red, height: 200),
],
);
Note, I cannot wrap the scrollable with IgnorePointer, because I still want to click the non-transparent widgets in the scrollable.
The only reasonable solution I can think of is to have a GestureDetector on the transparent container, which will give you the global position of the taps:
GestureDetector(
onTapUp: (TapUpDetails tapUpDetails) {
print("onTapUp global: " + tapUpDetails.globalPosition.toString());
},
And then add a Key to the widget behind the list, and use it to get the global position of the top left corner of the widget's rectangle, as well as the size of the widget, and use those to get the rectangle of the widget:
RenderBox renderBox = _key.currentContext.findRenderObject();
Offset topLeftCorner = renderBox.localToGlobal(Offset.zero);
Size size = renderBox.size;
Rect rectangle = topLeftCorner & size;
If the background widget does not move, you can do it within initState on the very next frame using WidgetsBinding.instance.addPostFrameCallback (the render object will be null if do it synchronously within initState) and save the Rect - otherwise you will have to recalculate it on every tap.
And then finally on each tap on the transparent container you can calculate whether the tap's position is within the boundaries of the background widget, and invoke the corresponding code:
// if tap is within boundaries of the background widget
if (rectangle.contains(tapUpDetails.globalPosition)) {
// your code here
}
I started with the clipped drawer sample code and tried to build around it. When inserting components inside the sample (i.e., replacing '{'You think water moves fast? You should see ice.'} with other content), the content is constrained by the height of the drawer. When trying to insert content outside of the sample , everything starts below the drawer.
Expected Behavior: ability to place content anywhere around the drawer. I've got different components hiding/becoming visible based on drawer menu selections
I originally started with the permanent drawer example and everything worked just fine except I need the drawer positioned below the app bar.
The layout consists of a flex container that contains the Drawer and main content area. The content area (.appContent) expands to fill the space to the right (or left) of the drawer. All of your content should be placed inside this element.
Updated: Fixed styles to work on IE 11
The basic structure:
<div className={classes.root}>
<AppBar position="fixed" className={classes.appBar} />
<Drawer
variant="permanent"
className={classes.drawer}
classes={{ paper: classes.drawerPaper }}
/>
<main className={classes.appContent}>
{/* Page content goes here */}
</main>
</div>
The styles
const styles = theme => ({
// The main flex container for the app's layout. Its min-height
// is set to `100vh` so it always fill the height of the screen.
root: {
display: "flex",
minHeight: "100vh",
zIndex: 1,
position: "relative",
overflow: "hidden",
},
appBar: {
zIndex: theme.zIndex.drawer + 1
},
// Styles for the root `div` element in the `Drawer` component.
drawer: {
width: theme.layout.drawerWidth
},
// Styles for the `Paper` component rendered by `Drawer`.
drawerPaper: {
width: "inherit",
paddingTop: 64 // equal to AppBar height (on desktop)
},
// Styles for the content area. It fills the available space
// in the flex container to the right (or left) of the drawer.
appContent: theme.mixins.gutters({
// https://github.com/philipwalton/flexbugs#flexbug-17
flex: '1 1 100%', // Updated to fix IE 11 issue
maxWidth: "100%",
paddingTop: 80, // equal to AppBar height + 16px
margin: '0 auto',
// Set the max content width for large screens
[theme.breakpoints.up('lg')]: {
maxWidth: theme.breakpoints.values.lg,
},
})
Live Examples (codesandbox)
Permanent Drawer - clipped below appbar
Permanent Drawer - full height