В основном я строю представление списка.Таким образом, я использую карты, чего я хотел бы достичь, в картах. Я хочу разделить один раздел, чтобы раскрасить столбец, и еще один раздел, я хочу написать текст, который я хочу, чтобы он был в центре, но я попробовал, многие варианты не моглидостижения.
Ниже приведен снимок экрана, который я хотел бы достичь для цветного столбца, но я хочу, чтобы текст центрировался.![enter image description here](https://i.stack.imgur.com/rhddo.png)
Я достиг следующих результатов: ![enter image description here](https://i.stack.imgur.com/zhjIL.png)
Я заметил, что мой цвет не полностью покрывает какой-то белый элементтолько снаружи.Ниже приведены мои полные коды того, что я сделал для достижения этой цели.
Проблема, которую я хочу решить, выглядит следующим образом
1) To make the color column look clean and neat as the image above because now I tried to adjust its height slight smaller than the card height which is 35
2) The text to be centered
3) The gesture to detect the whole of the text column
4) I have other design where it might have 3 or more column and how to build a separator
5) I have set the card width: 30.0, but it always goes right till the end it never stays at 30.
new Container(
height:190,
child:
new ListView.builder(
shrinkWrap: true,
itemCount: vdata.length,
itemBuilder: (BuildContext ctxt, int index) {
return Container(
margin: new EdgeInsets.fromLTRB(10, 0, 10, 0),
width: 30.0,
height: 35.0,
child: Card(
color: Colors.white,
child: Row (
//mainAxisSize: MainAxisSize.max,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
decoration: new BoxDecoration(
color: Colors.amber,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(5),
bottomLeft: const Radius.circular(5)
),
),
height: 27,
width: 10,
),
],
),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
//mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//new Row(
// mainAxisSize: MainAxisSize.max,
//children: <Widget>[
new GestureDetector(
onTap: () {
setState(() {
_localVehicleSelected=vdata[index]["pr"].toString();
});
doSomething(vdata[index]["pr"].toString());
},
child:new Text('Test Plate',
),
),
//style: Theme.of(context).textTheme.body2
//],
//),
],
),
],
),
)
);
Снимок экрана, основанный на ответе на вопрос.
![enter image description here](https://i.stack.imgur.com/JhVy8.png)