Why flutter clips children when scaling to 0.5?

user_2525948 0
Viewed 100

I need to apply different scale depending on device rotation for a widget scene which is larger than the landscape screen.

But when I apply a 0.5 scale, the children get clipped out.

What should I do to scale to 0.5 for the scene being visible on the entire screen?

 /// The scene: the hill, the street and the pump
  Widget scene() {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    final bool isLandscape = width > height;
    final double scale = isLandscape ? 0.5 : 1;

    return // == The custom paint sky
        Transform.scale(
            scale: scale,
            child: Stack(
              children: [
              Positioned(top: 0, width: 150, child: HillVehicleAnimation()),
flutter transform scale widget
1 Answers

Actually, by default, Stack() clips children. So add a clipBehavior attribute and set it to Clip.none to get the desired effect as follows:

return // == The custom paint sky
        Transform.scale(
            scale: scale,
            child: Stack(
              // == Ask Stack not to clip!
              clipBehavior: Clip.none,
              children: [
              Positioned(top: 0, width: 150, child: HillVehicleAnimation()),
user_25259480
Related