Как создать такой вид во флаттере? - PullRequest
Новая
       84

Как создать такой вид во флаттере?

1 голос
/ 10 июля 2020

введите описание изображения здесь

Я пытаюсь создать такой же макет во флаттере с помощью GridView и столбца, но не смог получить точный вид, как показано на изображении. Здесь я делюсь своим кодом, который генерирует почти такое же представление, но я не хочу определять точную ширину и высоту изображения. Пожалуйста, дайте несколько предложений по созданию вида excat, как показано на изображении.

Вот мой код: 

                      GridTile(
                              child: new Container(
                                decoration: BoxDecoration(
                                  color: Color(0xFFFCFEE9),
                                    border: Border.all(
                                        color: Colors.grey, width: 0.2))
                                ,
                                child: Column(
                                  mainAxisSize: MainAxisSize.max,
                                  children: <Widget>[
                                         Image(
                                          alignment: Alignment.center,
                                          width: 90,
                                          height: 90,
                                          image: NetworkImage(
                                              listdata[index]
                                                  .categories[categoryIndex]
                                                  .catAppImg),
                                        ),
                                    Expanded(
                                        child: Align(
                                            alignment: FractionalOffset
                                                .bottomCenter,
                                            child: Text(
                                              listdata[index]
                                                  .categories[categoryIndex]
                                                  .catName
                                                  .toString(),
                                              maxLines: 1,
                                              textAlign: TextAlign.center,
                                              style: TextStyle(
                                                  fontSize: 10,
                                                  color: Colors.black),
                                            ))),
                                    SizedBox(
                                      height: 3,
                                    )
                                  ],
                                ),
                              ),
                            )
...