Как изменить положение и поворот фонового изображения во Flutter

Question

Я новичок во Flutter и хочу знать, как изменить положение фонового изображения во Flutter. Я хочу показать фоновое изображение в углу страницы и изменить его положение на скрытые части изображения из-за ovelflow.

Как фронтенд-разработчик, чтобы добиться этого, я думаю об изменении положения изображения на абсолютное и установке нижнего и правого на минусовые значения, но делать это во Flutter по-другому.

Как можно Я достигаю этого во 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(),
            ),
          ),
        ],
      ),
    );
  }
}

Текущий статус:

Что я хочу:

Answer 1

Возможно, вы захотите использовать как Transform.translate, так и Transform.rotate, чтобы достичь этого.

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(),
                ),
          ),
        ],
      ),
    );
  }
}

Of c вам нужно поиграть с offset.