This creates a full screen background image that can be moved with margin, but it creates a blank sliver on the bottom.
Container(
margin: EdgeInsets.only(bottom: 50),
child: Container(
decoration: BoxDecoration(
color: snapshot.data.color,
image: DecorationImage(
image: AssetImage("assets/overlay.png"),
fit: BoxFit.cover,
),
),
),
),
How can I create a full screen background image that is slightly larger than the viewport and be able to move it around without any clipping or gaps?
This is an example code of how to set full background image try this
return new Container(
child: new Stack(
children: <Widget>[
new Container(
decoration: BoxDecoration(
// color: snapshot.data.color,
image: DecorationImage(
// image: AssetImage("assets/overlay.png"),
image: NetworkImage('http://www.vactualpapers.com/web/images/April-28-2016/Glitters%20in%20the%20Air%20HD%20Mobile%20Wallpaper.jpg'),
fit: BoxFit.cover,
),
),
),
new Scaffold(
appBar: new AppBar(
title: new Text('Full Background img'),
backgroundColor: const Color(0xFF121F2B),
),
backgroundColor: Colors.transparent,
body: new Center(
child: new Text('Hello How are you?',
style: new TextStyle(fontSize: 20.0, color: Colors.white),),
),
)
],
),
);
Related
I am wondering if it is possible to resize an image that is inside of a BoxDecoration container and called by the AssetImage().
My code is:
Flexible(
child: Container(
height: size.height * .75,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
image: DecorationImage(
image: AssetImage('assets/img/washing.png'),
fit: BoxFit.scaleDown,
)),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
and follows...
The image is too big. I would like it small and in the top right corner.
Thank you.
Its size depends on your container Size. If you reduce of your container size then The image size automatically reduced. But you must use BoxFit.cover as fit
Here is the code sample -
return Scaffold(
appBar: AppBar(
title: Text('Help'),
),
body: Center(
child: Container(
height: MediaQuery.of(context).size.height * .5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
image: DecorationImage(
image: AssetImage(
'asset/images/download.jpg',
),
fit: BoxFit.cover,
),
),
),
),
);
If you want to developed it without Decorated image I can help you. Please share your sample UI, I will created for you
I am new in flutter. I want to make the transparent Circle in side the semi transparent rectangle. Look like below,
I have not idea about that. So please help me to make this type of widget in flutter.
Using ColorFiltered and Stack you can achieve this.
(I took the answer mentioned in the comment and edited to your needs)
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: [
Image.network(
'https://lh3.googleusercontent.com/proxy/_wrP_GRGOkGw0FLMiR3qeMzlyC-qN8Dd4sND89_xxLZMDIZh204g8PCccS-o9WaL1RKyiVOLGVS9QpodSkMMhOh8kbNh1CY492197-im-4vlFRRdsVqT2g4QbRlNgljDIg',
fit: BoxFit.cover,
), //Give your Image here
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.5),
BlendMode.srcOut,
), // This one will create the magic
child: Stack(
fit: StackFit.expand,
children: [
Container(
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.dstOut,
), // This one will handle background + difference out
),
Align(
alignment: Alignment.center,
child: Container(
height: MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(
MediaQuery.of(context).size.width / 2,
),
),
),
),
],
),
),
],
),
);
}
I'm new in Flutter and I want to know how can I change position of background image in Flutter. I want to show background image in a corner of page and change it's position to hidden parts of image because of ovelflow.
As a frontend developer to achieve this, I think about changing position of image to absolute and set bottom and right to minus values but doing these in Flutter is in a different way.
How can I achieve this in Flutter?
class _WaterIntakeState extends State<WaterIntake> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Stack(
children: <Widget>[
Container(
color: Colors.white,
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
colorFilter: ColorFilter.mode(Colors.white.withOpacity(0.5), BlendMode.dstATop),
image: AssetImage("assets/images/drink-water.png"),
fit: BoxFit.fitWidth,
)),
),
Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
title: Text('Water Intake'),
),
body: Container(
// child: const ButtonsWidget(),
),
),
],
),
);
}
}
Current Status :
What I want :
Just replace your second container with this Transform.translate widget
Transform.translate(
offset: Offset(-100.0, 200.0),
child: Transform.rotate(
angle: pi / 4,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
colorFilter: ColorFilter.mode(
Colors.white.withOpacity(0.5), BlendMode.dstATop),
image: AssetImage("assets/images/drink-water.png"),
fit: BoxFit.fitWidth,
)),
),
),
),
Also you can change the image position according to you by updating angle and offset
You might want to use both the Transform.translate and Transform.rotate to achieve this.
class _WaterIntakeState extends State<WaterIntake>
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Stack(
children: <Widget>[
Container(
color: Colors.white,
),
Transform.translate(
offset: Offset(-100.0, 200.0),
child: Transform.rotate(
angle: pi / 4,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
colorFilter: ColorFilter.mode(
Colors.white.withOpacity(0.5), BlendMode.dstATop),
image: AssetImage("assets/images/drink-water.png"),
fit: BoxFit.fitWidth,
)),
),
),
),
Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
title: Text('Water Intake'),
),
body: Container(
// child: const ButtonsWidget(),
),
),
],
),
);
}
}
Ofc you need to play with the offset.
How can I create a semi-transparent background with the transparent hole inside? I tried to use decoration and foreground decorations with different blend modes, stack, ClipRect, colorfilters, but nothing works. I will appreciate any ideas. Thanks!
The "easiest" way I've found to do it is using a ColorFiltered Widget with a Stack.
The following code will create exactly what you need:
#override
Widget build(BuildContext context) {
return Material(
child: Stack(
fit: StackFit.expand,
children: [
Image.network(
'https://wallpaperplay.com/walls/full/e/5/3/13586.jpg',
fit: BoxFit.cover,
),
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.8), BlendMode.srcOut), // This one will create the magic
child: Stack(
fit: StackFit.expand,
children: [
Container(
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.dstOut), // This one will handle background + difference out
),
Align(
alignment: Alignment.topCenter,
child: Container(
margin: const EdgeInsets.only(top: 80),
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(100),
),
),
),
Center(
child: Text(
'Hello World',
style: TextStyle(fontSize: 70, fontWeight: FontWeight.w600),
),
)
],
),
),
],
),
);
}
This one you not only create "holes" over views, it works with anything! including texts, etc.
Final result:
I want to display the text (Facebook) exactly below the image (fb icon) without any spacing. Below is the code as of now :
#override Widget build(BuildContext context) {
return Scaffold(
// prevent pixel overflow when typing
resizeToAvoidBottomPadding: false,
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/login_background.png",
),
fit: BoxFit.cover)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Image(
image: AssetImage("assets/fb_icon.png"),
width: 180.0,
height: 250.0,
),
new Text('Facebook.',
style: TextStyle(
fontStyle: FontStyle.italic,
color: Colors.white,)),
_textFields(),
_signInButton(),
_socialMediaSignIns(),
_accountButtons()
],
),
),
);
}
}
Currently, I see like this and would like to remove the space between image and text.
Actually you should use BoxFit.cover to see that in effect because image has got less physical height than what is being allocated to it.
Here is the solution
Image(
image: AssetImage("assets/fb_icon.png"),
width: 180.0,
height: 250.0,
fit: BoxFit.cover,
),
You could try other BoxFit to see which one suits you better.
Image(
image: AssetImage("assets/fb_icon.png"),
),
Text('Facebook.',
style: TextStyle(
fontStyle: FontStyle.italic,
color: Colors.white,))
It has to be no padding in this case. You can check padding exactly in png file such way:
Image(
image: AssetImage("assets/fb_icon.png"),
color: Colors.red,
colorBlendMode: BlendMode.multiply,
),
This will show real borders of your image