How to make a container bigger than the actual screen in flutter

Question

I'm writing a background widget for my app. It consists of an octagon placed in the bottom right of the screen. I want to render visible only one-quarter of it. The octagon needs to be full since I will after adding an animation which makes it rotates on certain conditions. My problem consists in the fact that I can't place it outside the screen borders. How can I do this?

Sorry for the bad quality but this is an idea of what I'm trying to achieve: Schema

And this is the actual output of my code: Screen

Sorry for bothering you and thank for your answer.

Here is my code:

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: [
            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();
  }
}

The ScreenBounds code is:

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);
  }
}

user_11452511 · Answer

You may not need to "Make A Container Bigger Than The Actual Screen Size"...You just need to wrap your octagon in a FractionalTranslation then translate it outside the screen

Does this work for you?

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

The output:

How to make a container bigger than the actual screen in flutter

1 Answers