Флаттер : Карта с видом на сетку

0

Вопрос

Я новичок в flutter , я хочу создать этот дизайн , мне требуется некоторое время ,чтобы найти, что использовать, но каждый раз, когда я пытаюсь закодировать его и использовать Listview, он выдает ошибку, или карта не совпадает с Gridview.

Image

flutter flutter-layout gridview
2021-11-18 06:46:53
2
0

Вы можете использовать Gridview и вернуть карту своего пользовательского стиля в Gridview Builder, я создам необходимый вам дизайн.

Вот официальная документация GridView. [Документация 1

2021-11-18 06:58:29
0

Попробуйте приведенный ниже код, надеюсь, он будет вам полезен.обратитесь GridView здесь

   Center(
              child: GridView.builder(
                shrinkWrap: true,
                padding: const EdgeInsets.symmetric(horizontal: 30),
                itemCount: 4,
                itemBuilder: (ctx, i) {
                  return Card(
                    child: Container(
                      height: 290,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20)),
                      margin: EdgeInsets.all(5),
                      padding: EdgeInsets.all(5),
                      child: Stack(
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: [
                              Expanded(
                                child: Image.network(
                                  'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png',
                                  fit: BoxFit.fill,
                                ),
                              ),
                              Text(
                                'Title',
                                style: TextStyle(
                                  fontSize: 18,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              Row(
                                children: [
                                  Text(
                                    'Subtitle',
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 15,
                                    ),
                                  ),
                                ],
                              )
                            ],
                          ),
                        ],
                      ),
                    ),
                  );
                },
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: 1.0,
                  crossAxisSpacing: 0.0,
                  mainAxisSpacing: 5,
                  mainAxisExtent: 264,
                ),
              ),
            ),

Ваш экран результатов-> >output

2021-11-18 07:05:41

На других языках

Эта страница на других языках

Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................