In the Jssor Slider http://www.jssor.com/demos/tab-slider.html, second example, the slide content is fixed as 331px.
But the height of my contents is different, how do I scale the height?
Thanks.
Adjust value of 'height: 331px', and 'height: 300px' in the following code,
If you want to add 20px more, you can change it to '351px' and '320px'.
<div id="slider2_container" style="position: relative; top: 0px; left: 0px; width: 602px; height: 331px; background: #fff; overflow: hidden; ">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left:0px; top: 29px; width: 600px; height: 300px; border: 1px solid gray; background-color: #fff;
overflow: hidden;">
Related
There is a default padding in flutter_html already when trying to parse text.
Below is the difference between using HTML(data: ...) and Text(...) widgets.
Top: HTML Widget, Bottom: Text Widget
How can I remove the horizontal padding?
I think HTML or body is having a default padding and/or margin.
Try adding "body": Style(margin: EdgeInsets.zero, padding: EdgeInsets.zero, in the style parameter.
Html has updated, so I update accepted answer:
"body": Style(
padding: EdgeInsets.zero,
margin: Margins(
bottom: Margin.zero(),
left: Margin.zero(),
top: Margin.zero(),
right: Margin.zero(),
),
),
Add 'body': Style(margin: Margins.zero) inside the style parameter curly brackets.
I have an image and I want to place it in the Stack widget which has smaller size than initial image.
Also I need to center this image inside smaller widget.
For now I found one approach which allows just to set overflowing image size inside smaller parent widget.
Container(
width: 50.0,
height: 50.0,
child: Stack(
children: [
Positioned(
width: 150.0,
height: 150.0,
child: Image.asset('assets/images/example.jpg'),
)
]
)
)
But in this case I have to center image by setting top and left offsets manually because any alignment doesn't work in this case.
Container(
width: 50.0,
height: 50.0,
child: Stack(
children: [
Positioned(
width: 150.0,
height: 150.0,
child: Align(
alignment: Alignment.center,
child: Image.asset('assets/images/example.jpg'),
)
)
]
)
)
If I use Positioned.fill - I can't then set the size of overflowing widget space, so that it doesn't work too.
If I increase the scale of an image it just makes initial image smaller rather than increase size of an image and crop overflowed space.
I need to make image overflowed and centered automatically by some alignment property.
Can't find solution for this issue yet.
I don't know how to do it in Flutter but with CSS it is very easy:
div {
width: 100px;
height: 100px;
background: url('https://img.icons8.com/clouds/2x/sun.png') no-repeat;
background-size: 200px 200px;
background-position: center;
border: 1px solid black;
border-radius: 5px;
}
<div>
</div>
If I understood you correctly the same effect as per your CSS could be achieved by Centering the Container and setting the Image BoxFit to none. Please see the code below :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Demo'),
),
body: Center(
child: Container(
width: 100.0,
height: 100.0,
child: Image.network('https://img.icons8.com/clouds/2x/sun.png',
fit: BoxFit.none),
),
),
);
}
}
I have a picture 640 * 400
For example if the mobile phone resolution is 1280 * 960
Widget background = new Positioned.fill(
child: Image.asset('images/back.png'),
right: 0,
left: 0
);
the picture is magnified to 640x400 -> 1280x800.
so there appears blank in the screen.
But in this case, I want to magnify to the 1536x960,
It can fill the screen without blank.
How can I make it?
Just set the fit property of the Image to BoxFit.cover:
Positioned.fill(
child: Image.asset('images/back.png', fit: BoxFit.cover),
right: 0,
left: 0
);
I am new to flutter and i am trying to make something that looks like in the example included in the snippet.
What is the easiest way to do this with dart and flutter.
basically i want to apply a shine animation to a container when the data from the server is still being downloaded.
Thanks
div {
margin: auto;
width: 500px;
height: 600px; /* change height to see repeat-y behavior */
background-image:
radial-gradient( circle 50px at 50px 50px, lightgray 99%, transparent 0 ),
linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
linear-gradient( lightgray 20px, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 ),
linear-gradient( lightgray 20px, transparent 0 );
background-repeat: repeat-y;
background-size:
100px 200px, /* circle */
50px 200px, /* highlight */
150px 200px,
350px 200px,
300px 200px,
250px 200px;
background-position:
0 0, /* circle */
0 0, /* highlight */
120px 0,
120px 40px,
120px 80px,
120px 120px;
animation: shine 1s infinite;
}
#keyframes shine {
to {
background-position:
0 0,
100% 0, /* move highlight to right */
120px 0,
120px 40px,
120px 80px,
120px 120px;
}
}
<div></div>
You can combine a Stack and Positioned.fill with a FractionallySizedBox to position such gradient on the top of another widget.
Then you can combine it to an AnimationController, an AnimatedBuilder and an Align or FractionallySizedBox to animate the position of the gradient over time.
You'd have this :
class LoadAnimation extends StatefulWidget {
final Widget child;
LoadAnimation({#required this.child, Key key}) : super(key: key);
#override
_LoadAnimationState createState() => _LoadAnimationState();
}
class _LoadAnimationState extends State<LoadAnimation>
with SingleTickerProviderStateMixin {
AnimationController controller;
#override
void initState() {
controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
)..repeat();
super.initState();
}
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
widget.child,
Positioned.fill(
child: ClipRect(
child: AnimatedBuilder(
animation: controller,
builder: (context, child) {
return FractionallySizedBox(
widthFactor: .2,
alignment: AlignmentGeometryTween(
begin: Alignment(-1.0 - .2 * 3, .0),
end: Alignment(1.0 + .2 * 3, .0),
).chain(CurveTween(curve: Curves.easeOut)).evaluate(controller),
child: child,
);
},
child: const DecoratedBox(
decoration: const BoxDecoration(
gradient: const LinearGradient(
colors: const [
Color.fromARGB(0, 255, 255, 255),
Colors.white,
],
),
),
),
)),
),
],
);
}
}
Which you can then use by wrapping any given widget :
LoadAnimation(
child: Container(
height: 100.0,
width: 200.0,
color: Colors.lime,
),
),
Although Rèmi posted a very nice solution, this package should also be mentioned: https://pub.dev/packages/shimmer
I'm having an issue where the main slider image and the text of the navigation on the bottom become blurry after resize. On load it is fine, but as soon as you resize the window everything becomes blurry. This is specific to Chrome, other browsers seam fine
Here is an example http://gallery.furnituremix.com/
Here with $scale = false
http://gallery.furnituremix.com/index2.html
It may look blurry if you scale from smaller to bigger size sometimes.
Please make the original size bigger then. You can replace '100px' with '200px', '50px' with '100px'.
<div u="slides" style="cursor: move;">
<div u="prototype" class=p style="POSITION: absolute; WIDTH: 100px; HEIGHT: 50px; TOP: 0; LEFT: 0;">
<div u="thumbnailtemplate" style="WIDTH: 100px; HEIGHT: 50px; border: none; position: absolute; TOP: 0; LEFT: 0; "></div>
</div>
</div>
Also, I noticed that the original size of the main slider is very small, please make it bigger.
<div id="slider1_container" style="margin: 0, auto; position: relative; top: 0px; left: 0px; width: 600px; height: 350px; overflow: hidden; ">
...
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">