I have a background widget inside Stack when i add a Column widget to stack the background not showing.when i remove column widget from stack it's working alright.when using positioned widget as a parent of column widget it's working fine.

enter image description here

my code :

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    final double screenWidth = MediaQuery.of(context).size.width;
    final double screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      body: Stack(
        children: [
          _BackGround(screenHeight: screenHeight,screenWidth: screenWidth,),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 50,)
              ],
            )
        ],
      ),
    );
  }
}

class _BackGround extends StatelessWidget {
  double screenWidth;
  double screenHeight;

  _BackGround({required this.screenWidth, required this.screenHeight});

  @override
  Widget build(BuildContext context) {
    return Positioned(
      right: 0,
      top: 0,
      width: screenWidth * 0.4,
      height: screenHeight * 0.8,
      child:ClipRRect(
        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20)),
      child: Container(
        child: ColoredBox(color: const Color(0xCC2372F0),),
      ),
      ) ,
    );
  }
}


Solution 1: Yeasin Sheikh

You need to wrap your column with positioned widget. You can use Positioned or Align widget.

body: Stack(
  children: [
    _BackGround(
      screenHeight: screenHeight,
      screenWidth: screenWidth,
    ),
    Align(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            height: 50,
          )
        ],
      ),
    )
  ],
),

More about Stack.


Solution 2: Suz Zan

Move the _BackGround as then last child of the stack and Wrap the Column inside the stack with an Align widget and it should work.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    final double screenWidth = MediaQuery.of(context).size.width;
    final double screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      body: Stack(
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: Column(
              children: [
                Expanded(
                  child: Container(
                    color: Colors.red,
                  ),
                )
              ],
            ),
          ),
          _BackGround(
            screenHeight: screenHeight,
            screenWidth: screenWidth,
          ),
        ],
      ),
    );
  }
}

Output


Solution 3: Stratovarius93

You must wrap the Positioned widget in a Stack so that it can respect the size of your screen.

class _BackGround extends StatelessWidget {
  double screenWidth;
  double screenHeight;

  _BackGround({required this.screenWidth, required this.screenHeight});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        SizedBox(
          height: screenHeight,
          width: screenWidth,
        ),
        Positioned(
          right: 0,
          top: 0,
          width: screenWidth * 0.4,
          height: screenHeight * 0.8,
          child: const ClipRRect(
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20)),
            child: ColoredBox(
              color: Color(0xCC2372F0),
            ),
          ),
        ),
      ],
    );
  }
}