Flutter: Using Center widget overrides min width

Question

I want to center some text inside of a container. The container has min/maxWidth constraints. However, when I wrap the text with a Center, the container will max out its width no matter the length of the text. When there is less/no text, the container width does not shrink down to its min size.

Here is the code

import 'package:flutter/material.dart';
import './constants.dart';

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    devHeight = MediaQuery.of(context).size.height; //from constants.dart
    devWidth = MediaQuery.of(context).size.width; //from constants.dart

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.greenAccent,
      ),
      body: Container(
        color: Colors.blueGrey[400],
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            MyCard(),
          ],
        ),
      ),
    );
  }
}

class MyCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(devHeight * 0.03),
      ),
      elevation: 3,
      child: Column(
        children: [
          Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(4),
                child: Container(
                  height: devHeight * 0.05,
                  decoration: BoxDecoration(
                    color: Colors.greenAccent,
                    border: Border.all(),
                    borderRadius: BorderRadius.circular(99999),
                  ),
                  constraints: BoxConstraints(
                    minWidth: 100,
                    maxWidth: 200,
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(2),
                    child: Center(
                      child: Text(
                        'asdf asdf'.toUpperCase(),
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                        ),
                        maxLines: 1,
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

Wrapping the Text with Align instead of center also doesn't work, and neither does adding an alignment property to the container.

Answer 1

Try This.

      child: Align(
         alignment: Alignment.center,
         child: Text(
         'Your Text',
          textAlign: TextAlign.center,                          
          ),
      ),

Answer 2

So there is two ways to go about this. The first is a little more sloppy but may be required. The reason this is happening is because basically the center widget wants to expand to its fullest potential and will take up the whole space. This will happen with any alignment property that you try

1. use a column with mainaxisalignment which centers the text

    Padding(
      padding: const EdgeInsets.all(4),
      child: Container(
        height: MediaQuery.of(context).size.height * 0.05,
        decoration: BoxDecoration(
          color: Colors.greenAccent,
          border: Border.all(),
          borderRadius: BorderRadius.circular(99999),
        ),
        constraints: BoxConstraints(
          minWidth: 10,
          maxWidth:200,
        ),
        child: Padding(
          padding: const EdgeInsets.all(2),
          child: Column(   // column instead of align/container/center since these exapnd the widgets to there fullest
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
   
                '123'.toUpperCase(),
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
                maxLines: 1,
                textAlign: TextAlign.center,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
        ),
      ),
    ),
   

2. the next way significantly changes the code but probably works the best, instead of the parent container having height we can have padding all around it:

    class MyCard extends StatelessWidget {  //completely replaces old card class
      @override
      Widget build(BuildContext context) {
        return Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(MediaQuery.of(context).size.height * 0.03),
          ),
          elevation: 3,
          child: Column(
            children: [
              Row(
                children: [
                  Container(
                    margin: EdgeInsets.all(4), //replaces previous padding widget
                    padding: EdgeInsets.all((MediaQuery.of(context).size.height * 0.05 - 16)/2),  // this is used instead of defining a height and automatically centers, replace 16 with font size
                    decoration: BoxDecoration(
                      color: Colors.greenAccent,
                      border: Border.all(),
                      borderRadius: BorderRadius.circular(99999),
                    ),
                    constraints: BoxConstraints(
                      minWidth: 10,
                      maxWidth:200,
                    ),
                    child: Text(
   
                      '1234'.toUpperCase(),
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                      maxLines: 1,
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                    ),    
                  ),
                ],
              )
            ],
          ),
        );
      }
    }