flutter - 如何使容器大于 flutter 中的实际屏幕

Question

我正在为我的应用程序编写一个背景小部件。
它由放置在屏幕右下角的八边形组成。
我只想让它的四分之一可见。八边形需要填满，因为我会在添加动画后使其在某些条件下旋转。我的问题在于我无法将其放置在屏幕边框之外。我怎样才能做到这一点？

很抱歉质量不好，但这是我正在努力实现的想法:
Schema

这是我的代码的实际输出:
Screen

抱歉打扰您，感谢您的回答。

这是我的代码:

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:lecture/frontend/utils/app-themes.dart';
import 'package:lecture/frontend/utils/screen-bounds.dart';
import 'package:polygon_clipper/polygon_clipper.dart';

class CustomBackground extends Widget {
  final BuildContext context;

  const CustomBackground(this.context);

  @override
  Element createElement() {
    return Container(
        width: ScreenBounds.of(context).widthTimes(2),
        height: ScreenBounds.of(context).heightTimes(2),
        color: AppTheme.currentTheme(context).backgroundColor,
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.bottomRight,
              child: SizedBox(
                width: ScreenBounds.of(context).width,
                height: ScreenBounds.of(context).width,
                child: Transform(
                  alignment: FractionalOffset.center, // set transform origin
                  transform: new Matrix4.rotationZ(pi/8), // rotate -10 deg
                  child: ClipPolygon(
                    sides: 8,
                    borderRadius: 10,
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.circular(ScreenBounds.of(context).width),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
    ).createElement();
  }
}

ScreenBounds 代码是:

import 'package:flutter/cupertino.dart';
import 'package:lecture/frontend/utils/responsive_ui.dart';

class ScreenBounds {
  final BuildContext context;
  final double width;
  final double height;
  final double aspectRatio;
  final bool isLarge;
  final bool isMedium;

  const ScreenBounds(this.context, this.width, this.height, this.aspectRatio,
      this.isLarge, this.isMedium);

  factory ScreenBounds.of(BuildContext context) {
    double _height = MediaQuery.of(context).size.height;
    double _width = MediaQuery.of(context).size.width;
    double _pixelRatio = MediaQuery.of(context).devicePixelRatio;
    bool _large = ResponsiveWidget.isScreenLarge(_width, _pixelRatio);
    bool _medium = ResponsiveWidget.isScreenMedium(_width, _pixelRatio);

    return ScreenBounds(context, _width, _height, _pixelRatio, _large, _medium);
  }

  double widthTimes(double multiplier) {
    return width * multiplier;
  }

  double heightTimes(double multiplier) {
    return height * multiplier;
  }

  double widthForSizes(
      double largeMultiplier, double mediumMultiplier, double smallMultiplier) {
    return isLarge
        ? widthTimes(largeMultiplier)
        : (isMedium
        ? widthTimes(mediumMultiplier)
        : widthTimes(smallMultiplier));
  }

  double heightForSizes(
      double largeMultiplier, double mediumMultiplier, double smallMultiplier) {
    return isLarge
        ? heightTimes(largeMultiplier)
        : (isMedium
            ? heightTimes(mediumMultiplier)
            : heightTimes(smallMultiplier));
  }

  double valueForSizes(
      double largeValue, double mediumValue, double smallValue) {
    return isLarge
        ? largeValue
        : (isMedium
        ? mediumValue
        : smallValue);
  }
}

Answer 1

您可能不需要“使容器大于实际屏幕尺寸”...您只需要将八角形包裹在 中分数翻译 然后在屏幕外翻译
这对你有用吗？

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        alignment: Alignment.bottomRight,
        child: FractionalTranslation(
          child: Transform.rotate(
            angle: 31.02,
            child: ClipPolygon(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.orange,
              ),
              sides: 8,
              borderRadius: 5,
             ),
          ),
          translation: Offset(0.5, 0.5),
        ),
      ),
    );
  }
}

输出: