Создание прокручиваемого «Wrap» в флаттере - PullRequest
Новая
       58

Создание прокручиваемого «Wrap» в флаттере

0 голосов
/ 01 мая 2020

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

"Scrollable Wrap"

Я попытался построить иерархию списков перед оператором return, который является column-row- row- list-pill

Pill - каждая кнопка.

При таком подходе я всегда получаю rangeErrors, потому что индекс выходит за пределы диапазона, что меня тоже смущает. 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: Firestore.instance.collection("jobs").snapshots(),
        builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
          List<DocumentSnapshot> docs = snapshot.data.documents;
          return ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: docs.length,
            itemBuilder: (context, index) {
              Map<String, dynamic> data = docs[index].data;
              final int maxPills = 3;
              int currentLevel = -1;
              List<Row> listLevels = [];
              List<List<Pill>> listLevels2 = [];
              List<Pill> listPillAux = [];

              for (var job in data.keys) {
                if (index % maxPills == 0) {
                  listLevels2.add(listPillAux);
                  currentLevel++;
                  listLevels.add(
                    Row(
                      children: [],
                    ),
                  );
                }
                listLevels2.elementAt(currentLevel).add(Pill(data));
                listLevels[currentLevel].children.add(listPillAux[index]);
              }

              return Column(
                children: listLevels,
              );
            },
          );
        },
      ),
    );
  }
}

class Pill extends StatelessWidget {
  Map<String, dynamic> data;
  Pill(this.data);
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Row(
        children: [
          CircleAvatar(
            maxRadius: 25,
            backgroundImage: AssetImage(data["thumbnail"]),
          ),
          Text(data["name"]),
        ],
      ),
    );
  }
}
...