Flutter newbie here.
Basically I'd like to reproduce the effect of the background in this video:
https://youtu.be/LcCtg1D_RIE?t=804
From what I have gathered so far, I can use a Stack widget to set some background layer, and use the repeat property of Image to get a repeating tile pattern. The following code does this reasonably well:
Widget build(BuildContext context) {
return Stack(children: <Widget>[
Container(
width: 5000,
height: 5000,
child: Image.network(
"https://www.scirra.com/images/articles/daf.png",
repeat: ImageRepeat.repeat,
)),
/* UI goes here */
]);
What I cannot figure out, is how to perform the animation. I have tried various scroll classes (like SingleChildScrollView) but they seem more designed for interactive use and do not allow bi-directional scrolling.
Another idea I have explored is providing a translation matrix to my Container, but while this indeed scrolls the pattern, it also leaves a black area at the edge of the screen.
I'm sure there exists a smart trick to easily achieve that effect - would someone have some clever input?
Related
I have an overflow on this image :
Container(
width: MediaQuery.of(context).size.width,
child: Image.network(imageSomwhereFomTheInternet),
),
How can I display a generic image from the internet preventing it to change its proportions? (I mean, if I fix an height or width the image could be "damaged" by this decision, I would like to use an automatic widget that fit this image in a certain Box, or something like that).
I don't know much about "How handle images", if you can suggest me something easy to understand where I can read more I would be very happy.
You can use fit property of image
Container(
child: Image.network(
"https://images.unsplash.com/photo-1547721064-da6cfb341d50",
fit: BoxFit.cover,
),
)
You can choose which suits you best from following:
BoxFit.contain- As large as possible but contained within the Container
BoxFit.cover- As small as possible but covering the entire Container
BoxFit.fill- Fill the entire Container but may distort the image aspect ratio
I want to have a card/container which fits the whole screen. In this card exists an image asset. However, trying to fit the image in a Expanded Widget just scale it as far as it reaches a boundayry of the screen.
Is there any way to scale it up (and of course clip/crop the image by this) so it fills up the entire screen without reaching these overflow messages? Also the user should not be able to scroll in the overflowed part.
This code should help you, you can use the image as a widget as a Container's child too;
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(filepath),
),
),
);
This is my tree:
Scaffold(-> Column(-> Expanded(-> ListView(-> Column(-> TextFields)))));
I want to limit the width of these TextFields (say, to 200px), but using SizedBox/Container/ConstrainedBox and setting a width/maxWidth on the Column isn't working; I have to wrap each individual TextField with a SizedBox for it to work- which adds a lot of fluff to my code.
Is there a better way to do this?
If you wrap your Column with a Container and set it to 200px, you'll not have to specify/wrap your TextFields individually anymore.
also looking at your hierarchy your Expanded widget will decide the max. width.
Scaffold(-> Column(-> Expanded(-> ListView(-> Container(width:200 -> Column(-> TextFields))))));
body: Container(
width: 200,
color: Colors.deepOrange,
child: Column(
children: [
TextField(),
],
),
),
I found the answer while watching https://www.youtube.com/watch?v=XcnP3_mO_Ms.
"If you put AspectRatio into something like Expanded, then that will
be forced by its parent to expand. Tightly fitted widgets like
Expanded don't give their children a choice-- harsh. If this happens
to you, just put something like Align between the Expanded and the
AspectRatio.
Align will be forced by Expanded to fill the area, but it will let its
child assume its own proportions. Thanks, Align!"
I have to wrap my Column in a Container, and then wrap the Container in an Align to break free of Expanded.
The issue is that TextField don't have a defined width so the Column doesn't know how to handle it and the Column needs to know the size of its child elements to properly render them. You best bet is wrapping your TextField in:
1. An Expanded widget (here the TextField will expand to fill the
available space)
2. A Flexible widget, or
3. Better still wrap it in a Container since you already know the width
you want (i.e. 200px).
Add Container at the top and give it width:200
Scaffold(-> Container(width:200 ->Column(-> Expanded(-> ListView(-> Column(-> TextFields)))));
So currently I'm trying to render a large image for example:
I tried CachedNetworkImageProvider from pub_dev.
I also tried various different Providers with combination of Image widget. None of them worked.
The only widget that allows me to render the image is photo_view which renders the 4k image but has Zoomable feature that I don't want to have.
How can I remove this feature and fit with BoxFit?
Libraries tried to render the image:
extended_image
image_ink_well
flutter_advanced_networkimage
When using PhotoView you can disable the zoom functionality.
IgnorePointer( // The PhotoView widget thinks there's nothing happening
// because you're catching any clicks that happen here.
child: PhotoView(
minScale: PhotoViewComputedScale.covered,
maxScale: PhotoViewComputedScale.covered,
),
),
You can read more about the PhotoView class here: https://pub.dev/documentation/photo_view/latest/photo_view/PhotoView-class.html
Sometimes I want to arrange items in a column with different amounts of space between each item. A typical implementation uses SizedBox or Container.padding, but neither permits negative values. Are there any ways to achieve negative spacing as of Flutter 1.0?
return Column(
children: <Widget>[
Container(height:20, width: 20, color: Color(0x800000FF),),
SizedBox(height: -10,), // Illegal, can't be negative
Container(height:20, width: 20, color: Color(0x80FF0000),),
Container(
padding: EdgeInsets.fromLTRB(0, -10, 0, 0), // Illegal, can't be negative
child: Container(height:20, width: 20, color: Color(0x8000FF00),),
)
],
);
The best way using transform. Less code :-).
If you want to increase position a Widget aka you want a "negative" margin, eg top (-10), you can do this:
Transform.translate set the Offset(x, y)
Column(
children: [
Text("Fist Text in Column"),
Transform.translate(
offset: const Offset(0, -10),
child: Text("Second Text in Column")),
],
)
Have a nice day...
There is actually an article about a negative margin in flutter. I believed that the SO answer mentioned in the comments was also discussed there.
In CSS, margins have various meanings in the various layout
models, most commonly, they are one of several values that contribute
to computing the offset that the block layout model uses to place
subsequent children; a negative total margin in this case merely means
the next child is placed above the bottom of the previous child
instead of after it.
In Flutter, as in CSS, there are several layout models; however,
there is currently no widget that is equivalent to the CSS block
layout model (which supports margin collapsing, negative margins,
skipping floats, etc).
Such a layout model could certainly be implemented, it just hasn’t
been implemented yet, at least not in the framework itself.
To implement such a layout model, you would create a RenderBox
descendant similar to RenderFlex or RenderListBody, probably providing
a way to set the margins of each child using a ParentDataWidget in the
same way that Flex children can have their flex configured using the
Expanded widget.
Probably the most complicated part of designing a new layout model
like this would be deciding how to handle overflow or underflow when
the children are too big or too small to fit the constraints passed to
this new layout render an object.
The RenderFlex render object has a way to distribute the space if the
children underflow, and considers it an error if they overflow (in
debug mode, this is shown by a yellow-and-black striped warning area
and a message logged to the console); the RenderListBody render the
object.
On the other hand, takes the view that the constraints must be
unbounded in the main axis, which means you can basically only use
this layout model inside a list (hence the name).
If writing a new layout model is not attractive, you could use one of
the existing layout widgets that allow overlapping children. A stack
is an obvious choice, where you set the explicit positions of each
child and they can overlap arbitrarily this is vaguely similar to the
CSS absolute position layout model. Another option is the CustomMultiChildLayout widget, which lets you layout and position each child in turn.
With this, you could position each child one after the other,
simulating negative margins by setting the position of the subsequent
child to a value that’s derived from the size and position of the
previous child, but such that the subsequent child’s top is above the
previous child’s bottom.
Flutter has a sophisticated but effective algorithm for rendering its
widgets. Margins and Paddings are analyzed at runtime, and the
final size and position of the widget are determined.
when you try to issue a negative margin you are purposefully creating
a not valid layout where a widget is somehow dropping out of the space
it is supposed to occupy.
Concluded that it is not ideal but there are some workarounds if really needed:
No, Flutter does not allow negative margins but just in case you still want your widgets to overlap each other…
you can use a Stack with Positioned which will allow you to generate
the layout which you can do with negative margins.