如何在 Flutter 的容器中定位此文本？

Question

我正在将我用 Kotlin 编写的应用程序重写为 Flutter，但我正在为简单的布局而苦苦挣扎。

我正在尝试从 Gmail 重新创建布局，但我不知道如何定位某些内容。

这是来自 Kotlin 应用的图片：

这是来自我的 Flutter 应用的图片：

我说的是“odebrane”文本。我希望它与我的 Kotlin 应用程序中的完全一样。我希望其中的文本居中，并且我希望它与“凭证”文本的高度相同。有谁能帮助我吗？

代码：

import 'package:flutter/material.dart';

class GeneratedMailCouponScreen extends StatelessWidget {
  final String couponImage;

  GeneratedMailCouponScreen({Key key, @required this.couponImage}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Icon(
                        Icons.arrow_back
                      )
                    ],
                  ),
                  Row(
                    children: [
                      Icon(
                        Icons.archive
                      ),
                      SizedBox(width: 5.0),
                      Icon(
                        Icons.delete
                      ),
                      SizedBox(width: 5.0),
                      Icon(
                        Icons.mail
                      ),
                      SizedBox(width: 5.0),
                      Icon(
                        Icons.more_vert
                      )
                    ],
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Row(
                children: [
                  Text('Voucher', style: TextStyle(color: Colors.black, fontSize: 20.0)),
                  SizedBox(width: 16.0,),
                  Container(
                    color: Colors.grey[300],
                    width: 50.0,
                    height: 8.0,
                    child: Center(
                      child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 8.0),),
                    )
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

在设备上测试后，这是我的解决方案
您只需要更改几行代码

// from
Container(
  color: Colors.grey[300],
  width: 50.0,
  height: 8.0,
  child: Center(
    child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 8.0),),
     )
   )

// to
Container(
      color: Colors.grey[300],
      child: Padding(
            padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
             child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 10.0),),
      )
   )