flutter-layoutflutter-dependenciesflutter-animationandroid-gridviewstaggered-gridview

How to make Scrollable StaggeredGrid list like Pinteret in flutter


I tried using flutter_staggered_grid_view 0.6.1 I was able to create the list but not able to make the list Scrollable. If there is any other library I can use or is it any other way to make it scrollable. this version 0.6.1 has made StaggeredGridList to non scrollable without and good documentation.

enter image description here

Also can anyone tell me Why is my custom card height got bad?

import 'package:flutter/material.dart';


class DisplayCard extends StatelessWidget {
  DisplayCard(
      {this.profileImagePath,
      this.captionText,
      this.profileName,
      this.timeStamp});

  final String? profileImagePath;
  final String? profileName;
  final String? captionText;
  final String? timeStamp;

  @override
  Widget build(BuildContext context) {
    return Card(
      clipBehavior: Clip.antiAlias,
      child: Container(
        height: 190,
        width: 180,
        child: Column(
          children: [
            Image(
              image: AssetImage(profileImagePath!),
            ),
            Container(
              child: Row(
                children: [
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(10, 7, 5, 2),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          RichText(
                            text: TextSpan(
                                style: const TextStyle(
                                  fontSize: 10,
                                  color: Colors.black87,
                                ),
                                children: [
                                  TextSpan(
                                    text: profileName,
                                    style: const TextStyle(
                                      fontSize: 10,
                                      color: Colors.black87,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  const TextSpan(text: ' '),
                                  TextSpan(text: captionText),
                                ]),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 3.0),
                            child: Text(
                              timeStamp!,
                              style: const TextStyle(
                                fontSize: 10,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                    flex: 3,
                  ),
                  Expanded(
                    child: CircleAvatar(
                      backgroundImage: AssetImage(profileImagePath!),
                      radius: 13,
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
      elevation: 10,
      shadowColor: Colors.black,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
    );
  }
}

Solution

    1. You should use this widget MasonryGridView in that package. I assume you're using StaggeredGrid which is mentioned that not scrollable in the doc. And don't forget to add itemCount (it isn't mentioned in the doc) if you know the list length beforehand.
    2. The Image height is longer than the Container height.