Как: создать динамическую сетку изображений c, которая не является GridView, а прокручивается внутри CustomScrollView? (Флаттер-Web) - PullRequest
Новая
       32

Как: создать динамическую сетку изображений c, которая не является GridView, а прокручивается внутри CustomScrollView? (Флаттер-Web)

0 голосов
/ 14 февраля 2020

Я хотел бы создать страницу галереи.

Мне нужно это для динамического захвата изображений, как метод builder, который предоставляют некоторые виджеты ...

Мне также хотелось бы чтобы обернуть и масштабировать эти изображения в зависимости от размера устройства / экрана.

В настоящее время у меня есть CustomScrollView в качестве основной части моей страницы - я использовал это, чтобы разместить заголовок / панель навигации , footer, et c.

Я почти уверен, что могу использовать SliverGrid внутри этого CustomScrollView, но я не могу понять, как это сделать.

Вот пример макет и показ, где я хотел бы сетку go: 

class GalleryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: primaryBlack,
      drawer: NavDrawer(),
      body: Scrollbar(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverNavBar(
              backgroundImage: Image.asset(
                'assets/images/cabarats_gallery.jpg',
                fit: BoxFit.cover,
              ),
              expandedHeight: 200,
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  ColorBoxRow(
                    color1: primaryLightBrown,
                    color2: primaryBlack,
                    color3: primaryRed,
                    color4: primaryBrown,
                  ),
                  Column(
                    children: <Widget>[
                      SizedBox(height: 50),
                      Text(
                        "PHOTOS DE RATS",
                        style: TextStyle(
                          color: primaryTextColor,
                          fontSize: 25,
                          fontFamily: 'LemonMilk',
                        ),
                      ),
                      SizedBox(height: 50),
                    ],
                  ),

                  // DYNAMIC GRID HERE



                  // DYNAMIC GRID HERE

                  FollowBar(
                    color: primaryBrown,
                  ),
                  Footer(
                    color: primaryRed,
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

1 Ответ

1 голос
/ 21 февраля 2020

Благодаря @pskink и нескольким другим я создаю сетку галереи. 

// This creates a Stream and a List of widgets (I think) to later use in a streambuilder

Stream<List<GalleryImage>> fetchDataFromFireBase() {
  final Query reference = Firestore.instance.collection('gallery');
  return reference.snapshots().map(convert);
}

List<GalleryImage> convert(QuerySnapshot doc) {
  return doc.documents.map((f) {
    return GalleryImage(
      imageUrl: f.data['imageUrl'],
    );
  }).toList();
}

// Here is the Gallery page with StreamBuilder at the top

class GalleryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: fetchDataFromFireBase(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final data = snapshot.data;
            return Scrollbar(
              child: CustomScrollView(
                slivers: <Widget>[
                  SliverGrid(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisSpacing: 10,
                        mainAxisSpacing: 10,
                        crossAxisCount:
                            ResponsiveLayout.isLargeScreen(context) ? 5 : 3),
                    delegate: SliverChildBuilderDelegate(
                        (ctx, i) => GalleryImage(
                              imageUrl: data[i].imageUrl,
                            ),
                        childCount: data.length),
                  ),

                ],
              ),
            );
          }
          return CircularProgressIndicator();
        },
      ),
    );
  }
}

// The GalleryImage widget used buy the Grid

class GalleryImage extends StatelessWidget {
  final String imageUrl;
  const GalleryImage({
    Key key,
    this.imageUrl,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.network(
        imageUrl,
        fit: BoxFit.cover,
      ),
    ).showCursorOnHover;
  }
}
...