Search code examples
flutterbackground-imageflutter-layoutimage-rotation

How to change background image position and rotation in Flutter


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 :

enter image description here

What I want :

enter image description here


Solution

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