Sie sind auf Seite 1von 7

Showcase Items

○ We’ll be implementing the three tabs!


Showcase Item - Pictures

○ Add the following logic to the build() function


var items = <Widget>[];

for (var i = 0; i < cat.pictures.length; i++) {


var image = new Image.network(
cat.pictures[i],
width: 200.0,
height: 200.0,
);
items.add(image);
}

var delegate = new SliverGridDelegateWithFixedCrossAxisCount(


crossAxisCount: 3,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
);

return new GridView(


padding: const EdgeInsets.only(top: 16.0),
gridDelegate: delegate,
children: items,
);
Showcase Item - Details

○ Add the following logic to the build() function


var textTheme = Theme.of(context).textTheme;

return new Center(


child: new Text(
cat.description,
textAlign: TextAlign.center,
style: textTheme.subhead.copyWith(color: Colors.white),
),
);
Showcase Item - Cattributes (1)

○ Add the following to pubspec.yaml to import Google Font Awesome


Icon set
dependencies:
flutter:
sdk: flutter

font_awesome_flutter: "6.0.0"

○ Then import the library in showcase_cattributes.dart

import 'package:font_awesome_flutter/font_awesome_flutter.dart';
Showcase Item - Cattributes (2)

○ Given an cattribute from the JSON, we want to map it to a full String


Name and an Icon from FontAwesomeIcons
○ Place the following just above the CattributesShowcase class

final dynamic cattributeLookup = {


"children": {"name": "Kid Friendly", "icon": FontAwesomeIcons.child},
"desexed": {"name": "Desexed", "icon": FontAwesomeIcons.cut},
"vaccinated": {"name": "Vaccinated", "icon": FontAwesomeIcons.eyeDropper},
"microchipped": {"name": "Microchipped", "icon": FontAwesomeIcons.microchip},
};
_createCircleBadge(
IconData iconData, Color bgColor, Color iconColor, String text) {
return new Padding(
padding: const EdgeInsets.only(left: 8.0),
child: new Stack(
children: <Widget>[
○ We want a Cattribute new CircleAvatar(
backgroundColor: bgColor,
custom Icon Badge child: new Icon(
iconData,
color: iconColor,
size: 36.0,
),
○ Create a function radius: 36.0,
),
_createCircleBadge where new Positioned(
child: new Text(
we’ll customize the badge text,
style: new TextStyle(
based on some input fontWeight: FontWeight.bold,
fontSize: 10.0,
parameters color: iconColor,
),
),
),
],
)
);
}
Showcase Item - Cattributes (4)

var items = <Widget>[];


○ Finally, add this code to build()
for (var i = 0; i < cat.cattributes.length; i++) {
to link the incoming cattributes var badge = _createCircleBadge(
cattributeLookup[cat.cattributes[i]]['icon'],
to a Badge on the UI Colors.white12,
Colors.white,
cattributeLookup[cat.cattributes[i]]['name'],
);

○ Note we’ve left the icon colour items.add(badge);


}
static, you could pass colors in
var delegate = new SliverGridDelegateWithFixedCrossAxisCount(
via the JSON if you wanted to crossAxisCount: 4,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
);

return new GridView(


padding: const EdgeInsets.only(top: 16.0),
gridDelegate: delegate,
children: items
);