title: Centering child of a `Container` without changing container size
body: <p>I was working on my custom button which uses <code>InkWell</code> and <code>Container</code> to animate it when tapped</p>
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter/material.dart';
  
  class Button extends StatefulWidget {
    final VoidCallback onPressed;
    final Widget child;
    final double minWidth;
    final bool disabled;
    final bool bordered;
    final Color fillColor;
    final bool elevated;
  
    const Button({
      required this.child,
      required this.onPressed,
      this.minWidth = 180,
      this.disabled = false,
      this.bordered = false,
      this.fillColor = Colors.white,
      this.elevated = true,
    });
  
    @override
    _ButtonState createState() =&gt; _ButtonState();
  }
  
  class _ButtonState extends State&lt;Button&gt; with SingleTickerProviderStateMixin {
    late AnimationController _animationController;
    late Animation&lt;double&gt; _scaleAnimation;
  
    @override
    void initState() {
      super.initState();
      _animationController = AnimationController(
          vsync: this, duration: const Duration(milliseconds: 150));
  
      _scaleAnimation = Tween&lt;double&gt;(begin: 1.0, end: 0.97).animate(
          CurvedAnimation(parent: _animationController, curve: Curves.easeInOut));
    }
  
    @override
    Widget build(BuildContext context) {
      return AnimatedBuilder(
        animation: _scaleAnimation,
        builder: (context, child) {
          return Transform.scale(scale: _scaleAnimation.value, child: child);
        },
        child: InkWell(
          child: Container(
            padding: const EdgeInsets.all(16.0),
            decoration: BoxDecoration(
              boxShadow: widget.elevated
                  ? [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.05),
                        blurRadius: 20,
                      )
                    ]
                  : [],
              color: widget.fillColor,
              borderRadius: BorderRadius.circular(
                16.0,
              ),
              border: Border.all(
                width: 1.0,
                color: Colors.grey.shade300,
              ),
            ),
            child: widget.child,
          ),
          onHighlightChanged: (bool pressed) {
            if (pressed)
              _animationController.forward();
            else
              _animationController.reverse(from: _animationController.value);
          },
          highlightColor: Colors.transparent,
          splashColor: Colors.transparent,
          onTap: widget.disabled ? null : widget.onPressed,
        ),
      );
    }
  }
  
  </code></pre>
  <p>So right now the problem is occurring when pass it a <code>Text</code> widget. It aligns to the left of the container.
  <br>
  <a href="https://i.stack.imgur.com/aTPMG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aTPMG.png" alt="a picture showing button with left aligned text" /></a></p>
  <p>I tried wrapping <code>widget.child</code> with a <code>Align</code> widget</p>
  <pre class="lang-dart prettyprint-override"><code>...
  child: Align(
      alignment: Alignment.center,
      child: widget.child,
  ),
  </code></pre>
  <p>It works fine aligns the <code>ADD</code> text to the center.
  <br>
  <a href="https://i.stack.imgur.com/Gpy7W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gpy7W.png" alt="A button with text aligned to the center" /></a>
  <br></p>
  <p>But when I use this button in place of <code>floatingActionButton</code> it expands to cover the whole screen.</p>
  <p><a href="https://i.stack.imgur.com/dbUrm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dbUrm.png" alt="A FAB expanded to cover the whole screen" /></a></p>
  <p>I want fab something like this
  <br>
  <a href="https://i.stack.imgur.com/M3qLx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M3qLx.png" alt="enter image description here" /></a></p>