Can't make a big size container after increasing height

Question

This is my code where I have increased my height of this container to make big circle in mobile emulator but couldn't make it. I don't know the reason behind these.

import 'package:flutter/material.dart';

void main () {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: NewScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class NewScreen extends StatelessWidget {
  const NewScreen({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {

    double height = MediaQuery.of(context).size.height;


    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            top: -150.0,
            left: 0.0,
            bottom: 450.0,
            right: 0.0,
            child: Container(
              height: 800.0,
              decoration: BoxDecoration(
                color: Colors.red,
                shape: BoxShape.circle,
              ),
            ),
          ),
        ], 
      ),
    );
  }
}

I cannot make much bigger than initial size. What can I do to finish this?

Answer 1

I think you try to achieve this result

It's simple, give the left and right properties negative values as you want to achieve the result that you want

     Positioned(
        left: -100.0,
        right: -100.0,

Answer 2

Position wrapping Container is constraining the Container's size. Current Position widget is forcing child widget's size to have Stack's height-600 and same width with Stack.

Answer 3

Since you didn't include the final result of your expected output, i have add few version of circle that might suit your needs. Few this to take note here:

a) when giving height: size.height the container widget will take the space of the whole screen. The reason you see that the circle did not fit to the height because it is bounded by the width. This can be overcome with the code from example 2

b) height: size,height/2 means that the container will take half the size of the screen.

1. Big red circle in the centre of the screen

import 'package:flutter/material.dart';

void main () {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: NewScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class NewScreen extends StatelessWidget {
  const NewScreen({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Scaffold(
      body: Container(
        height: size.height,
        width: size.width,
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
      ),
    );
  }
}

2. Circle with hidden side

import 'package:flutter/material.dart';

void main () {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: NewScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class NewScreen extends StatelessWidget {
  const NewScreen({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            left: -100,
            right: -100,
            child: Container(
              height: size.height,
              width: size.width,
              decoration: BoxDecoration(
                color: Colors.red,
                shape: BoxShape.circle,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

3. Circle at the top of the screen

import 'package:flutter/material.dart';

void main () {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: NewScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class NewScreen extends StatelessWidget {
  const NewScreen({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: size.height/2,
            width: size.width,
            decoration: BoxDecoration(
              color: Colors.red,
              shape: BoxShape.circle,
            ),
          ),
        ],
      ),
    );
  }
}