How to use StaggeredGridView inside Column in flutter?
962
You have to put Column inside a Material() widget and also add the very important properties shrinkWrap: true,
and physics: NeverScrollableScrollPhysics(),
Full example below:
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
Future<List<String>> _getPictures() async {
/// replace with your async query to your REST api.
return [
'https://apod.nasa.gov/apod/image/0708/hh49_spitzer_c29.jpg',
'https://apod.nasa.gov/apod/image/1507/trifid_spitzerR1024.jpg',
'https://apod.nasa.gov/apod/image/1409/rippledsky_dai_960.jpg'
];
}
class StaggeredInsideColumn extends StatefulWidget {
const StaggeredInsideColumn({
Key? key,
}) : super(key: key);
@override
_StaggeredInsideColumnState createState() => _StaggeredInsideColumnState();
}
class _StaggeredInsideColumnState extends State<StaggeredInsideColumn> {
late final Future<List<String>> _pictureUrlList;
@override
void initState() {
super.initState();
_pictureUrlList = _getPictures();
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Material(
child: Column(children: [
Text('hello world'),
/// ... your other column items
FutureBuilder<List<String>>(
future: _pictureUrlList,
builder: (context, AsyncSnapshot<List<String>> snapshot) {
if (snapshot.connectionState == ConnectionState.done &&
snapshot.hasData) {
List<String> pictures = snapshot.data!;
return StaggeredGridView.countBuilder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 3,
itemCount: snapshot.data!.length,
itemBuilder: (BuildContext context, int index) => Container(
child: Image.network(
pictures[index],
fit: BoxFit.fitWidth,
),
),
staggeredTileBuilder: (int index) {
int tileCount = index % 7 == 0 ? 2 : 1;
return StaggeredTile.count(tileCount, tileCount);
},
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
);
} else
return CircularProgressIndicator();
})
])));
}
}
Author by
sodmzs1
Updated on December 13, 2022Comments
-
sodmzs1 over 1 year
I have a code that is working fine without using
StaggeredGridView.count()
insideColumn
. Can anyone help me out ? I'm totally new in flutter!import 'package:flutter/material.dart'; import 'package:http/http.dart'; import 'smooth_star_rating.dart'; import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; void main() => runApp(MaterialApp( theme: ThemeData(primaryColor: Colors.black), home: Home(), )); class Home extends StatelessWidget { Container TopArtist(String imageVal, String heading, double count) { return Container( width: 200, child: Card( shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(15.0))), color: Color(0xFFf2630a), child: Wrap( children: [ Padding( padding: const EdgeInsets.all(8.0), child: ClipOval( child: Center( child: Material( elevation: 4.0, shape: CircleBorder(), clipBehavior: Clip.hardEdge, color: Colors.transparent, child: Ink.image( image: AssetImage(imageVal), padding: const EdgeInsets.all(8.0), fit: BoxFit.cover, width: 160.0, height: 160.0, child: InkWell( onTap: () {}, ), ), ), ), ), ), ListTile( title: Text( heading, textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontFamily: 'Mulish'), ), subtitle: Center( child: SmoothStarRating( allowHalfRating: true, starCount: 5, rating: count, size: 20, color: Colors.black, borderColor: Colors.white, ), ), ), ], ), ), ); } Material MyItems(IconData icon, String heading, int color) { return Material( color: Colors.white, elevation: 14.0, shadowColor: Color(0x802196F3), borderRadius: BorderRadius.circular(24.0), child: Center( child: Padding( padding: const EdgeInsets.all(8.0), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.all(8.0), child: Text( heading, style: TextStyle(color: new Color(color), fontSize: 20), ), ), Material( color: new Color(color), borderRadius: BorderRadius.circular(24.0), child: Padding( padding: const EdgeInsets.all(16.0), child: Icon( icon, color: Colors.white, size: 30.0, ), ), ), ], ) ], ), ), ), ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Project Title", style: TextStyle(color: Color(0xFFf2630a))), backgroundColor: Colors.white, ), body: Column( children: [ Container( color: Colors.grey[300], child: Column( children: [ Container( color: Color(0xFFf2630a), child: Padding( padding: const EdgeInsets.all(18.0), child: TextField( decoration: InputDecoration( fillColor: Colors.white, filled: true, border: InputBorder.none, suffixIcon: Icon(Icons.search), hintText: 'What are you looking for ?'), ), ), ), Container( child: Padding( padding: const EdgeInsets.all(12.0), child: Text( "Top Artist", style: TextStyle(color: Color(0xFFf2630a), fontSize: 25), ), ), ), Container( child: Divider( color: Colors.black, height: 20, thickness: 3, indent: 180, endIndent: 180, ), ), Container( padding: EdgeInsets.symmetric(vertical: 20), height: 300, child: ListView( scrollDirection: Axis.horizontal, children: [ TopArtist("assets/avatar.jpg", "Heading", 3), TopArtist("assets/avatar.jpg", "Heading", 4), TopArtist("assets/avatar.jpg", "Heading", 5), TopArtist("assets/avatar.jpg", "Heading", 1), TopArtist("assets/avatar.jpg", "Heading", 2), TopArtist("assets/avatar.jpg", "Heading", 5), ], ), ), ], ), ), Container( child: Column( children: [ Container( child: Padding( padding: const EdgeInsets.all(12.0), child: Text( "Categories", style: TextStyle(color: Color(0xFFf2630a), fontSize: 25), ), ), ), Container( child: Divider( color: Colors.black, height: 20, thickness: 3, indent: 180, endIndent: 180, ), ), Container( child: Expanded( child: StaggeredGridView.count( crossAxisCount: 2, crossAxisSpacing: 12.0, mainAxisSpacing: 12.0, padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), children: [ MyItems(Icons.graphic_eq, "TotalViews", 0xffed622b), MyItems(Icons.graphic_eq, "TotalViews", 0xffed622b), MyItems(Icons.graphic_eq, "TotalViews", 0xffed622b), MyItems(Icons.graphic_eq, "TotalViews", 0xffed622b), MyItems(Icons.graphic_eq, "TotalViews", 0xffed622b), MyItems(Icons.graphic_eq, "TotalViews", 0xffed622b), ], staggeredTiles: [ StaggeredTile.extent(1, 130), StaggeredTile.extent(1, 130), StaggeredTile.extent(1, 130), StaggeredTile.extent(1, 130), StaggeredTile.extent(1, 130), StaggeredTile.extent(1, 130), ], ), ), ), ], ), ), ], ), ); } }