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 :
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
.