Как на Flutter при добавлении элемента в список создать для него новую ячейку GridView?

Question

Пишу на Flutter. Вопрос такой: как в моем коде заменить ListView на GridView без потери функционала? Код ниже:

import 'dart:html';

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  List courses = [];

  @override
  void initState() {
    super.initState();

    courses.addAll(["Buy milk", "Wash dishes", "Куть картошку"]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepOrangeAccent[900],
        title: Text("UniverCity"),
        centerTitle: true,
      ),
      body: Column(
              children: [
                ListView.builder(
                  itemCount: courses.length,
                  itemBuilder: (BuildContext context, int index) {
                  return Dismissible(
                    key: Key(courses[index]),
                    child: Card(
                      child: ListTile(title: Text(courses[index]),),
                    )
                  );
                }
              ),

            ]
          ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {

        },
        child: Icon(Icons.add),
      ),
    );
  }
}

При добавлении элемента в список courses, он автоматически отображается новой карточкой. Как добиться такого же результата, но используя GridViev

Заранее спасибо.

Answer 1

Я использую плагин flutter_staggered_grid_view, с его помощью можно без проблем заменить ListView, прилагаю свой используемый пример кода:

pubspec.yaml:

  flutter_staggered_grid_view: ^0.4.0-nullsafety.3 # Display Grid

notes_page.dart:

  Widget buildNotes(List<NoteModel> notes) => StaggeredGridView.countBuilder(
        key: ValueKey<int>(columnNumber),
        padding: const EdgeInsets.only(top: 24, left: 12, right: 12, bottom: 8),
        itemCount: notesNumber,
        staggeredTileBuilder: (index) => const StaggeredTile.fit(2),
        crossAxisCount: columnNumber, //2 (1 col) or 4 (2 col)
        mainAxisSpacing: 18,
        crossAxisSpacing: 18,
        itemBuilder: (context, index) {
          final note = notes[index];

          return GestureDetector(
            onTap: () async {
              await Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => NoteDetailPage(note: note),
              ));

              refreshNotes();
            },
            child: NoteCardWidget(note: note),
          );
        },
      );

Также можно сделать динамическое изменение количества колонок, достаточно менять параметр crossAxisCount и перестраивать виджет с помощью setState или как-либо иначе.

БЛОГ НА HUSL

Как на Flutter при добавлении элемента в список создать для него новую ячейку GridView?

Ответы (1 шт):