CODEWITHSUNDEEP
javaandroidflutterdartflutter-layout
xpetta
xpetta

Reputation: 718

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

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?

Upvotes: 0

Views: 50

Answers (3)

Felipe Sales
Felipe Sales

Reputation: 1139

Study about constraints concept, it is more important!

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

Upvotes: 0

Mohammad Khaled Nimrini
Mohammad Khaled Nimrini

Reputation: 30

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

Upvotes: 1

Aristidios
Aristidios

Reputation: 2321

Give this a try 🙂

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

Upvotes: 0

Related Questions