CODEWITHSUNDEEP
flutterdartmobile
TobiasW
TobiasW

Reputation: 891

How to properly center a Text widget in a shrinked Container within a Stack

I want a container which shrinks to it's content. This container should be placed in a stack, so that the container has no constraints from outside.

    ConstrainedBox(
      constraints: BoxConstraints(maxWidth: 150.0, minHeight: 48.0),
      child: Container(
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(8), border: Border.all(color: Colors.black)),
        child: SelectableText(
          "Text",
        ),
      ),
    );

enter image description here

This code lets the container shrink around my Text, which is what I want.

Now I want to center the child widget (Text) in my container. I wrap the Text with a Center widget and it stretches the container up the whole available vertical space, which was obviously not my intention. The closest I could get is the solution with a column : 

    ConstrainedBox(
      constraints: BoxConstraints(maxWidth: 150.0, minHeight: 48.0),
      child: Container(
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(8), border: Border.all(color: Colors.black)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            SelectableText(
              "Node",
            ),
          ],
        ),
      ),
    );

This centers my text vertically but not horizontally and it doesn't feel like it's the correct way to achiece what I want.

Upvotes: 0

Views: 85

Answers (1)

Kahou
Kahou

Reputation: 3488

Wrapped in Center widget

    ConstrainedBox(
      constraints: BoxConstraints(maxWidth: 150.0, minHeight: 48.0),
      child: Center(
        child: Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Colors.black),
          ),
          child: SelectableText("Text"),
        ),
      ),
    )

Upvotes: 1

Related Questions