Container takes entire width even though the width is set to 50

Issue

I'm observing a very strange behavior. I have set the width of the Container to 50 even then it's taking the entire width of the screen.

import 'package:flutter/material.dart';

class AppDrawerNew extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      color: Colors.green,
    );
  }
}

I tried wrapping the Container inside a SizedBox as well. Even then it occupies the entire width of the screen.

class AppDrawerNew extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 50.0,
      child: Container(
        color: Colors.green,
      ),
    );
  }
}

I'm not sure what exactly I'm doing wrong. What can I try next?

Solution

import 'package:flutter/material.dart';

void main() {
  runApp(AppDrawerNew());
}
class AppDrawerNew extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Container(
            width: 50.0,
            height: 100.0,
            color: Colors.green,
          ),
      ),
    );
  }
}

the container must be a child of MaterialApp and Scaffold

Answered By - Mohammad Khaled Nimrini