Выравнивание столбцов флаттера и центрирование текста - PullRequest
0 голосов
/ 01 марта 2019

В основном я строю представление списка.Таким образом, я использую карты, чего я хотел бы достичь, в картах. Я хочу разделить один раздел, чтобы раскрасить столбец, и еще один раздел, я хочу написать текст, который я хочу, чтобы он был в центре, но я попробовал, многие варианты не моглидостижения.

Ниже приведен снимок экрана, который я хотел бы достичь для цветного столбца, но я хочу, чтобы текст центрировался.enter image description here

Я достиг следующих результатов: enter image description here

Я заметил, что мой цвет не полностью покрывает какой-то белый элементтолько снаружи.Ниже приведены мои полные коды того, что я сделал для достижения этой цели.

Проблема, которую я хочу решить, выглядит следующим образом

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

1 Ответ

0 голосов
/ 01 марта 2019

Вам нужно использовать форму карты, чтобы получить то, что вы хотите, плюс вам нужно центрировать элементы в строке, используя - 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
                                  //],
                                  //),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ));
              }))

enter image description here

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...