I would like to have a floating action button over my current ListView in the lower right corner but can't figure out how to do so since all my attempts gave me errors. The function of the button would be to add items to the current list of items. A screenshot of the page can be found here.
The following code snippet is where it all begins (Homepage). From there, it refers to HomePageBody which then refers to PlanetRow. Sorry for the confusion it may cause.
void main() {
runApp(MaterialApp(
theme:
ThemeData(accentColor: Colors.black87),
home: HomePage(),
));
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
AppBar(
title: Text('Overview'),
backgroundColor: Color.fromRGBO(53, 73, 94, 0.9),
elevation: 0.0,
leading: Container(),
),
new HomePageBody()
],
),
);
}
}
HomePageBody:
class HomePageBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Expanded(
child: new Container(
color: Color.fromRGBO(53, 73, 94, 0.9),
child: new CustomScrollView(
scrollDirection: Axis.vertical,
slivers: <Widget>[
new SliverPadding(
padding: const EdgeInsets.symmetric(vertical: 0.0),
sliver: new SliverFixedExtentList(
itemExtent: 152.0,
delegate: new SliverChildBuilderDelegate(
(context, index) => new PlanetRow(planets[index]),
childCount: planets.length,
),
),
),
],
),
),
);
}
}
PlanetRow:
class PlanetRow extends StatelessWidget {
final Planet planet;
PlanetRow(this.planet);
Widget _planetValue({String value, String image}) {
return new Row(
children: <Widget>[
new Image.asset(image, height: 12.0),
new Container(width: 8.0),
new Text(planet.gravity, style: Style.smallTextStyle),
]
);
}
@override
Widget build(BuildContext context) {
final planetThumbnail = new Container(
margin: new EdgeInsets.symmetric(
vertical: 16.0,
),
alignment: FractionalOffset.centerLeft,
child: new Image(
image: new AssetImage(planet.image),
height: 92.0,
width: 92.0,
),
);
final planetCardContent = new Container(
margin: new EdgeInsets.fromLTRB(76.0, 16.0, 16.0, 16.0), // left, top, right, bottom
constraints: new BoxConstraints.expand(),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(height: 4.0),
new Text(planet.name,
style: Style.titleTextStyle,
),
new Container(height: 5.0),
new Text(planet.location,
style: Style.commonTextStyle
),
new Container(
margin: new EdgeInsets.symmetric(vertical: 8.0),
height: 2.0,
width: 18.0,
color: new Color(0xff00c6ff)
),
new Row(
children: <Widget>[
new Expanded(
child: _planetValue(
value: planet.distance,
image: 'assets/img/ic_distance.png')
),
new Expanded(
child: _planetValue(
value: planet.gravity,
image: 'assets/img/ic_gravity.png')
)
],
)
],
),
);
final planetCard = new Container(
child: planetCardContent,
height: 124.0,
margin: EdgeInsets.only(
left: 46.0,
),
decoration: new BoxDecoration(
color: new Color(0xFF333366),
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),
),
],
),
);
return new Container(
height: 120.0,
margin: const EdgeInsets.symmetric(
vertical: 12.0,
horizontal: 24.0,
),
child: new Stack(
children: <Widget>[
planetCard,
planetThumbnail,
],
),
);
}
}
This code snippet is from this tutorial: https://github.com/sergiandreplace/flutter_planets_tutorial. Any help would be greatly appreciated!
