即使宽度设置为 50，容器也会占用整个宽度

Question

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. Could anyone please help me in fixing this issue? Thanks in advance.

Answer 1

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

Answer 2

Give this a try 🙂

Container(
      constraints: BoxConstraints(minWidth: 50, maxWidth: 50),
      color: Colors.green,
)

Answer 3

Study about constraints concept, it is more important!

In documentation is the best for this: https://flutter.dev/docs/development/ui/layout/constraints