文字全部不对齐

如何解决文字全部不对齐

我有这样的设计，其中几个文本和图像我试图按顺序显示所有内容。但是当文本的长度增加或减少时，对齐方式全部分崩离析。第一个图像是我正在尝试的设计 第二张图片是我到目前为止尝试过的。

我正在尝试为API设计。如果文本太长会影响设计，所以请在API数据的基础上帮助我解决此问题

代码

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),),body:SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.max,crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
              Flexible(
                flex: 0,child: Padding(
                  padding: const EdgeInsets.all(8.0),child: Card(
                    child: Container(
                      height: 450,width: 400,child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,children: [
                          Flexible(
                            flex: 0,child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,children: [
                                Text("Register Number"),Text(":"),Flexible(
                                    flex: 0,child: Text(
                                      'KL 10 AC 1896',style: TextStyle(
                                          color: Color.fromRGBO(92,52,76,1),fontSize: 15,fontWeight: FontWeight.bold),)),],Flexible(
                            flex: 0,children: [
                                Text("Model Name"),child: Text(
                                      'Maruti Suzuki Swift',children: [
                                Text("Requested Litres"),child: Text(
                                      '4 L Petrol',children: [
                                Text("Petrol Station"),child: Text(
                                      'Malappuram',Row(
                            crossAxisAlignment: CrossAxisAlignment.center,children: [
                              Text("Odometer Reading"),Text(
                                '19548 KM',style: TextStyle(
                                    color: Color.fromRGBO(92,child: Container(
                              width: 280,height: 180,decoration: BoxDecoration(
                                  image: DecorationImage(
                                      image: AssetImage(
                                        "assets/images/dummy.png",fit: BoxFit.cover)),child: Padding(
                              padding: EdgeInsets.only(top: 10),child: GestureDetector(
                                child: Container(
                                  height: 45,width: 250,child: Center(
                                    child: Text(
                                      "Delete Request",style: TextStyle(
                                          color: Colors.white,decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(5),color: Color.fromRGBO(92,onTap: () {},)
                        ],)
            ],}

解决方法

如果要在小部件上对齐，可以始终使用Table（Official video）小部件。例如

Table(
    children: [
        TableRow(
           children: [
              TableCell(
                child: Text('My label 1'),),TableCell(
                child: Text(':'),TableCell(
                child: Text('My Value 1'),]
          ),TableRow(
          children: [
            TableCell(
              child: Text('My label 2'),TableCell(
              child: Text(':'),TableCell(
              child: Text('My Value 3'),]
        ),]
    ),

看看这个CodePen https://codepen.io/fcontreras-the-bashful/pen/qBZOXvZ

,

行属性mainAxisAlignment: MainAxisAlignment.spaceEvenly,不能那样工作。它将根据项目的大小对齐项目，因此在您的情况下，它会将所有“：”带到第一个项目结束和第三个项目开始之间的中心。

如果要像示例一样对齐项目，则应执行以下操作

为什么有一个带有flex 0的灵活小部件？似乎不必要

                ... 
                Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,//We are telling to all the children to stretch,it's necessary for Row
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [
                       Row(
                          crossAxisAlignment: CrossAxisAlignment.center,children: [
                            Expanded(child:Text("Register Number")) //Maybe add a Padding widget to Text (?)
                            Expanded(
                             child:Row(children:[
                               Text(":"),Expanded(child:
                                  Text(
                                  'KL 10 AC 1896',style: TextStyle(
                                      color: Color.fromRGBO(92,52,76,1),fontSize: 15,fontWeight: FontWeight.bold),))
                            ]))
                          ],...

,

class MyWidget extends StatelessWidget {
  final leftText = [
    "Register Number","Model Name","Requested Litres","Petrol Station","Odometer Reading"
  ];
  final rightText = [
    "KL 10 AC 1896","Maruti Suzuki Swift","4L Petrol","Malappuram","19548 KM"
  ];

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Flexible(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,children: [
              for (var text in leftText)
                Text(
                  text,style: TextStyle(
                    color: Colors.white,fontSize: 16,fontWeight: FontWeight.bold,],const SizedBox(width: 8.0),Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,children: [
              for (var text in rightText)
                Row(
                  children: [
                    Text(
                      ":",style: TextStyle(
                        color: Colors.white,Text(
                      text,style: TextStyle(
                        color: Color.fromRGBO(92,);
  }
}