CODEWITHSUNDEEP
flutterflutter-layout
Sanjayrajsinh
Sanjayrajsinh

Reputation: 17138

Flutter : How to set container size as wrap_content in Column

I want to set Container size dynamic I mean wrap_content how to do in flutter?

In below code Container take full width by default but I want to set width in Container as Text() long as

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Container(
          margin: EdgeInsets.all(10),
          alignment: Alignment.center,
          color: Colors.orange[800],
          child: Text("Hello How are you"),
        ),
        Container(
          margin: EdgeInsets.all(10),
          alignment: Alignment.center,
          color: Colors.yellow[800],
          child: Text("Welcome"),
        )
      ],
    );

I get this :

enter image description here

But I Want this output :

enter image description here

Upvotes: 8

Views: 19491

Answers (6)

NM Kawcher
NM Kawcher

Reputation: 11

 Wrap your Container with Row or Column
then set it size min

Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
    children: [
        Container(
            color: Colors.orange,
            child: Text(
                "Hello"
            )
          ),
      ],

)

Upvotes: -1

Smart virus
Smart virus

Reputation: 21

Wrap your Container with Row or Column

Row(
    mainAxisAlignment: MainAxisAlignment.center,
        children: [
            Container(
                color: CoreUiUtils.getColorFromHex("#292B2B"),
                width: deviceWidth,
                child: Column(
                    children: [
                        Text("Title "),
                        Text("Description"),
                    ],
                )),
        ],
)

Upvotes: 1

Gupta Akshay
Gupta Akshay

Reputation: 72

The best way to wrap your container content is not setting any height to that widget.

Upvotes: 0

Ravinder Kumar
Ravinder Kumar

Reputation: 7990

The shortest solution can be, remove alignment: Alignment.center, from both Container and wrap Column inside a Center like this,

 Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(10),
              color: Colors.orange[800],
              child: Text("Hello How are you"),
            ),
            Container(
              margin: EdgeInsets.all(10),
              color: Colors.yellow[800],
              child: Text("Welcome"),
            )
          ],
        ),
      )

Output

enter image description here

Upvotes: 2

CopsOnRoad
CopsOnRoad

Reputation: 267714

enter image description here

The easiest solution is to use Align. 

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Align(
      child: Container(
        margin: EdgeInsets.all(10),
        color: Colors.orange[800],
        child: Text("Hello How are you"),
      ),
    ),
    Align(
      child: Container(
        margin: EdgeInsets.all(10),
        color: Colors.yellow[800],
        child: Text("Welcome"),
      ),
    )
  ],
)

Upvotes: 17

Jay Gadariya
Jay Gadariya

Reputation: 1941

Wrap your Container with Row

    Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.all(10),
                    alignment: Alignment.center,
                    color: Colors.orange[800],
                    child: Text("Hello How are you"),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center, 
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.all(10),
                    alignment: Alignment.center,
                    color: Colors.yellow[800],
                    child: Text("Welcome"),
                  ),
                ],
              )
            ],
          ),

Upvotes: 8

Related Questions