How to set width as much as I need, but not more-CodePudding

In appBar I have a container which is responsible for displaying text (it could be 5 chars or even 100). And I want to adjust width of container based on text. For example for 5 chars container should show text and should be a little bigger than text (I will add paddings later), but for 100 chars container should take all possible space and show text with dots.

Currently I have two solutions:

The first one (Without spacer() in tree) is expanding container always to the biggest possible width (like I said, I don't need this big container for short texts)
The second one (with spacer() in tree) is always displaying container with 1/3 width of appbar (Did someone know why it's always the same width? It's kind of interesting).

    return Scaffold(
      appBar: AppBar(
        centerTitle: false,
        automaticallyImplyLeading: false,
        title: SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(height: 40, width: 40, color: Colors.amberAccent),
              const SizedBox(width: 10),
              const Spacer(),
              Flexible(
                child: Container(
                  color: Colors.purpleAccent,
                  height: 40,
                  child: const Center(
                    child: Text(
                      "Long Textttttttttttttttttttt",
                      overflow: TextOverflow.ellipsis,
                      softWrap: true,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      body: Container(),
    );

So, how can I adjust width of this container to text inside?

CodePudding user response：

You should use constraints: BoxConstraints(maxWidth:), property of Container.

Please go with below code.

 Container(
          color: Colors.red,
          padding: const EdgeInsets.all(20.0),
          constraints: BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width * 0.7,
          ),
          child: Text('Hello', style: TextStyle(color: Colors.black)),
        ),

        Spacer(),

        Flexible(
          child: Container(
            color: Colors.purpleAccent,
            height: 40,
            child: const Center(
              child: Text(
                "Long Textttttttttttttttttttt",
                overflow: TextOverflow.ellipsis,
                softWrap: true,
              ),
            ),
          ),
        ),

Your result will be like below screenshot.

CodePudding user response：

I implement another text for checking dynamic width of container.

 Container(
          color: Colors.red,
          padding: const EdgeInsets.all(20.0),
          constraints: BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width * 0.7,
          ),
          child: Text('Hello World', style: TextStyle(color: Colors.black)),
        ),

        Spacer(),
        Flexible(
          child: Container(
            color: Colors.purpleAccent,
            height: 40,
            child: const Center(
              child: Text(
                "Long Textttttttttttttttttttt",
                overflow: TextOverflow.ellipsis,
                softWrap: true,
              ),
            ),
          ),
        ),

CodePudding user response：

For This You can Use : Flexible Widget: Example:

  Flexible(
      
          child: Container(
            color: Colors.green,
          )
      ),

or Wrap Widget : Example :

Card(
            margin: const EdgeInsets.only(top: 20.0),
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                children: <Widget>[
                  Text(
                    'Categories',
                    style: TextStyle(fontFamily: 'MonteSerrat', fontSize: 16.0),
                  ),
                  Wrap(
                    children: <Widget>[
                      _checkBox('Gaming'),
                      _checkBox('Sports'),
                      _checkBox('Casual'),
                      _checkBox('21  '),
                      _checkBox('Adult'),
                      _checkBox('Food'),
                      _checkBox('Club'),
                      _checkBox('Activities'),
                      _checkBox('Shopping')
                    ],
                  )
                ],
              ),
            ));