Reputation: 2213
We are needing to place a column of rounded edge containers in a list view, when i wrap them in the listview they dont show up, I'm new to flutter so im sure i am missing something. Im adding ascreenshot of the design that doesnt scroll, these containers will load dynamically and scroll once i can get the listview working.
import 'package:flutter/material.dart';
import 'package:lightbridge_mobile/ui/gradient_app_bar.dart';
import 'package:lightbridge_mobile/ui/widget_container.dart';
class WidgetsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [Color.fromRGBO(1,89,99, 1.0), Colors.grey],
begin: Alignment.bottomLeft,
end: Alignment.topRight
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
],
),
)
);
}
}
Here is the code for the widget containers
class WidgetContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new WidgetRow();
}
}
Here is the widget row code
class WidgetRow extends StatelessWidget {
@override Widget build(BuildContext context) {
return new Container(
height: 160.0,
margin: const EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 24.0,
),
child: new Stack(
children: <Widget>[
widgetCard,
widgetThumbnail,
],
)
);
}
final widgetCard = new Container(
child: Row(
children: <Widget>[
],
),
height: 160.0,
margin: new EdgeInsets.only(left: 0.0),
decoration: new BoxDecoration(
color: Colors.white70.withOpacity(0.25),
shape: BoxShape.rectangle,
borderRadius: new BorderRadius.circular(8.0),
boxShadow: <BoxShadow>[
new BoxShadow(
color: Colors.black12,
blurRadius: 10.0,
offset: new Offset(0.0, 10.0),
),
],
),
);
final widgetThumbnail = new Container(
margin: new EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 10.0,
),
alignment: FractionalOffset.topLeft,
child: new Icon(
FontAwesomeIcons.comments,
size: 40.0,
color: Colors.white70,
),
);
}
Upvotes: 0
Views: 149
Reputation: 51316
Instead of Column
use - ListView
directly. don't wrap it.
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [Color.fromRGBO(1, 89, 99, 1.0), Colors.grey],
begin: Alignment.bottomLeft,
end: Alignment.topRight)),
child: ListView(
children: <Widget>[
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
],
),
),
);
}
Upvotes: 1