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.

Solution

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

Comments

[newbie]

I get a weird shape with two column of amber and there is not Test plate word.

[newbie]

but how to text Test Plate into center if you see yours is also align left

[newbie]

I have updated my question with the latest screen shot. You can I have tried to shrink the width cause I am actually calling this in a bottom sheet so there many list item 55 is too big so I drop to 30 and adjust the size box and container width to 5. But the problem with the Test Plate still not centered.

[newbie]

sorry I want it to be centered. Also if my width is smaller can I still achieve a nice colour column. I have updated my question can you view

[newbie]

ok I saw your updated answered crossAxisAlignment: CrossAxisAlignment.center, solved my centering problem now I want my width to be smaller and have the color column to appear beautiful say width of 30. What settings should I change I tried the container size box but not so clear

[newbie]

yes this list appear in a bottomsheet so that why I want to make the height smaller 55 is too big