Flutter card column alignment and text centering

Question

Basically I am building a list view. So I am using cards what I would like to achieve is within the cards I want to divide one section to color the column and one more section I want to write a Text which I want it to be centered but I am tried many option could not achieve.

Below are screen shot what I would like to achieve for the color column but I want the text to be centered.

What I have achieved is as below

I notice my color is not fully covering there is some white element just outside it. Below is my full codes of what I have done to achieve it.

Issue which I want to solve is as following

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
                                                  //],
                                                 //),



                                            ],
                                          ), 
                                      ],
                                    ),




                                  )
                            );

Screen shot based on the answered tried.

Answer 1

You need to use card shape to get what you want, plus you need to center elemets in row using - crossAxisAlignment: CrossAxisAlignment.center,

Container(
          height: 190,
          child: new ListView.builder(
              shrinkWrap: true,
              itemCount: 10,
              itemBuilder: (BuildContext ctxt, int index) {
                return Container(
                    margin: new EdgeInsets.fromLTRB(10, 0, 10, 0),
                    width: 25.0,
                    height: 55.0,
                    child: Card(
                      clipBehavior: Clip.antiAlias,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8.0)),
                      color: Colors.white,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Container(
                            color: Colors.amber,
                            width: 10,
                          ),
                          SizedBox(
                            width: 10.0,
                          ),
                          Expanded(
                            child: GestureDetector(
                              onTap: () {
                                print('testing');
//                                  setState(() {
//                                    _localVehicleSelected =
//                                        vdata[index]["pr"].toString();
//                                  });
//
//                                  doSomething(vdata[index]["pr"].toString());
                              },
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  //new Row(
                                  // mainAxisSize: MainAxisSize.max,

                                  //children: <Widget>[
                                  new Text(
                                    'Test Plate',
                                  ),

                                  //style: Theme.of(context).textTheme.body2
                                  //],
                                  //),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ));
              }))