在不改变容器大小的情况下将“容器”的子元素居中答案

【问题标题】：Centering child of a `Container` without changing container size在不改变容器大小的情况下将“容器”的子元素居中
【发布时间】：2021-04-22 07:28:16
【问题描述】：

我正在开发我的自定义按钮，它使用 InkWell 和 Container 在点击时对其进行动画处理

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() => _ButtonState();
}

class _ButtonState extends State<Button> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 150));

    _scaleAnimation = Tween<double>(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,
      ),
    );
  }
}

所以现在当传递一个Text 小部件时问题正在发生。它与容器的左侧对齐。

我尝试用Align 小部件包装widget.child

...
child: Align(
    alignment: Alignment.center,
    child: widget.child,
),

它可以很好地将ADD 文本与中心对齐。

但是当我使用此按钮代替floatingActionButton 时，它会展开以覆盖整个屏幕。

我想要这样的工厂

【问题讨论】：

你能展示一下你是如何使用按钮小部件来代替浮动按钮的吗

标签： flutter flutter-layout flutter-animation

【解决方案1】：

您可以将小部件放在具有最小 mainAxisSize 的一行中，这应该可以解决问题。

floatingActionButton: Button(
  minWidth: 200,
  child: Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.min,
     children: [
     Icon(Icons.add),
     SizedBox(width: 8),
     Text("TIME SLOT")
     ]
  ),
  onPressed: () {}));

这是 dartpad 的输出

【讨论】：