Why are both the text widgets not in the same line inside my table row in flutter?-CodePudding

I am new to Flutter. I am trying to create a table which has two columns. In the first column, there should be a text and in the second one, there should be a dropdown. This is my code:

Container(
  margin: const EdgeInsets.all(0),
  alignment: Alignment.center,
  width: MediaQuery.of(context).size.width,
  decoration: BoxDecoration(
    color: Colors.orange.shade400,
    border: Border.all(
        color: Colors.black, // Set border color
        width: 1.0),   // Set border width
  ),
  child:Table(
     border: TableBorder.all(
       color: Colors.black,
       style: BorderStyle.solid,
       width: 2),
     children: [
        TableRow( children: [
           Column(children:const [Text('Bill Type',style:TextStyle(fontSize: 16))]),
           Column(children:[DropdownButton<String>(
             key:bt,
             value: str,
             icon: const Icon(Icons.arrow_downward),
             iconSize: 16,
             style: const TextStyle(color: Colors.black, fontSize: 16,),
             onChanged: (String? newValue) {
                setState(() {
                  str = newValue!;
                });
             },
             items: <String>['AC', 'Electric current', 'Electric Arrear']
               .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                     value: value,
                     child: Center(
                        child:Text(value,textAlign: TextAlign.center,),
                     ),
                  );
               }).toList(),
          )]),
        ]),
     ],
  ),
)

This is the screenshot of my output

As you can see in the screenshot, the text in the left column and the dropdown in the right column are not in the same line. Both of them should be in the center of their respective columns.

Also, the selected value of the dropdown is not aligned in the center. How do I resolve these issues? Please help me.

CodePudding user response：

You have to set the defaultVerticalAlignment property in the Table widget to TableCellVerticalAlignment.middle in order to center the cells' contents vertically. As for centering the value of the DropDownButton just set the alignment property to Alignment.center.