Why is simple Stack code from Flutter website is giving Error? - flutter

Question

import 'package:flutter/material.dart';
void main() {
runApp(StackApp());
}
Simple Class Stack I am trying to use the stack to overlay rectangles one above the other
class StackApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 90,
height: 90,
color: Colors.green,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
],
);
}
}
I am getting this error message
I/flutter ( 8912): (elided 10 frames from class _AssertionError, package dart:async, and package dart:async-patch)
I/flutter ( 8912):
I/flutter ( 8912): The following RenderObject was being processed when the exception was fired:
RenderStack#322e9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
I/flutter ( 8912): creator: Stack ← StackApp ← [root]
I/flutter ( 8912): parentData:
I/flutter ( 8912): constraints: BoxConstraints(w=411.4, h=866.3)
I/flutter ( 8912): size: MISSING
I/flutter ( 8912): alignment: AlignmentDirectional.topStart
I/flutter ( 8912): textDirection: null
I/flutter ( 8912): fit: loose
I/flutter ( 8912): overflow: clip
I/flutter ( 8912): This RenderObject had the following descendants (showing up to depth 5):
I/flutter ( 8912): child 1: RenderConstrainedBox#49f71 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 8912): child: RenderDecoratedBox#2c55a NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8912): child 2: RenderConstrainedBox#c71ea NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 8912): child: RenderDecoratedBox#4ad6c NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8912): child 3: RenderConstrainedBox#5304a NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 8912): child: RenderDecoratedBox#9516e NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8912):
════════════════════════════════════════════════════════════════════════════════════════════════════

Answer 1

You need to wrap your app in a MaterialApp, CupertinoApp or WidgetsApp. This is almost mandatory. But if you don't want to use one of these for some reason, then set alignment in your Stack like alignment: Alignment.topLeft to fix this.