show images with grid view in flutter - image

Question

I tried to use StaggeredGridView but it wont load anything on my page, not even just text. I haven't put images URLs yet cuz I want to test it out.
So far this is my code below:
body: ListView(
children: [
Container(
width: deviceSize.width,
height: 650,
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Image.asset(
'assets/Big Sur.jpg',
width: deviceSize.width,
fit: BoxFit.cover,
),
Stack(
children: [
Text(
"""\n\n\nA decentralized photography platform\nfor the devoted communities.""",
style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
Text(
'PhoBlock',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 80,
),
)
],
),
],
),
),
SizedBox(
height: 50,
),
StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$index'),
),
),
);
},
staggeredTileBuilder: (int index) {
return StaggeredTile.count(2, index.isEven ? 2 : 1);
},
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
This was from the body of the Scaffold widget. Please help me as I'm trying to figure out how to use this new StaggeredGridView widget...

Answer 1

You can copy paste run full code below
You can use Column and Expanded to control size
code snippet
Column(mainAxisSize: MainAxisSize.min, children: [
Expanded(
child: Container(
width: deviceSize.width,
//height: 650,
child: Stack(
...
),
SizedBox(
height: 50,
),
Expanded(
flex: 1,
child: StaggeredGridView.countBuilder(
working demo
full code
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
var deviceSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(mainAxisSize: MainAxisSize.min, children: [
Expanded(
child: Container(
width: deviceSize.width,
//height: 650,
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Image.network(
'https://picsum.photos/250?image=9',
width: deviceSize.width,
fit: BoxFit.cover,
),
Stack(
children: [
Text(
"""\n\n\nA decentralized photography platform\nfor the devoted communities.""",
style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
Text(
'PhoBlock',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 80,
),
)
],
),
],
),
),
),
SizedBox(
height: 50,
),
Expanded(
flex: 1,
child: StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.green,
child: Center(
child: CircleAvatar(
backgroundColor: Colors.white,
child: Text('$index'),
),
),
);
},
staggeredTileBuilder: (int index) {
return StaggeredTile.count(2, index.isEven ? 2 : 1);
},
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
),
]));
}
}
working demo 2
full code 2
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
var deviceSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: LayoutBuilder(builder: (context, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: constraints.copyWith(
minHeight: constraints.maxHeight,
maxHeight: double.infinity,
),
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
width: deviceSize.width,
height: 450,
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Image.network(
'https://picsum.photos/250?image=9',
width: deviceSize.width,
fit: BoxFit.cover,
),
Stack(
children: [
Text(
"""\n\n\nA decentralized photography platform\nfor the devoted communities.""",
style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
Text(
'PhoBlock',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 80,
),
)
],
),
],
),
),
SizedBox(
height: 50,
),
Container(
height: 500,
child: StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.green,
child: Center(
child: CircleAvatar(
backgroundColor: Colors.white,
child: Text('$index'),
),
),
);
},
staggeredTileBuilder: (int index) {
return StaggeredTile.count(2, index.isEven ? 2 : 1);
},
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
),
]),
),
);
}));
}
}