如何在容器 Flutter 中居中行小部件？

Question

我想将Row小部件置于Container的中心，但无法做到。

欲望设计

我的愿望设计是这样的：-

但我得到这个 output

我的 Output：-

这是我的代码：-

Container(
  height: Dimensions.height40,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
        SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
      ],
    ),
  ),
),

小文本

class SmallText extends StatelessWidget {
  final Color? color;
  final String text;
  final double size;
  final TextAlign? align;

  const SmallText({
    Key? key,
    this.color = const Color(0xffCF1357),
    this.size = 16,
    required this.text, this.align=TextAlign.center,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      textAlign: align,
      style: TextStyle(
          color: color, fontSize: size, fontFamily: 'ROCK'),
    );
  }
}

Answer 1

替换您的Row小部件

从

    Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
           Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
           SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
       ],
    ),

到

             Row(
                children: [
                  Icon(Icons.chevron_right_outlined, color: Colors.red),
                  Expanded(
                    child: Text(
                      "asdfasdfasdfadsfadsf",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          color: Colors.red, fontSize: 12, fontFamily: 'ROCK'),
                    ),
                  ),
                ],
              ),

Answer 2

试试下面的代码：

ElevatedButton(
      onPressed: () {},
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Image.network(
            'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTffY2_D5YjjG8Mn3NnOFrXG2Piu72Ff5rbyHiyZXFvkWWtE3pLojAwOXpxAbC7PZa0JpU&usqp=CAU',
            height: 40,
          ), //use your google image here
          Text(
            'Sign in with Google',
            style: TextStyle(
              color: Colors.black,
            ),
          ),
          SizedBox()
        ],
      ),
      style: ElevatedButton.styleFrom(
          backgroundColor: Colors.white, fixedSize: const Size(250, 50)),
    ),

结果->

Answer 3

尝试这种方式...

Container(
  height: Dimensions.height40,
  decoration:
      BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Image.asset("assets/images/g.png", width: Dimensions.width20 + 5),
        ),
        SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)

        // if text overflowing
        //  Expanded(child: Text('text', maxLines: 2)),
      ],
    ),
  ),
),