Beautify The UI - Part 2

○ Cat profile body

▻ Name
▻ Location
▻ Description
▻ Circle Badges
Prepare details_page

○ Prepare details_page.dart for the new details Widget

▻ Import the details_body.dart class
▻ Add the Padding Widget just below CatDetailHeader()
Widget in build()
import 'package:catbox/ui/cat_details/details_body.dart';

...

new Padding(
padding: const EdgeInsets.all(24.0),
child: new CatDetailBody(widget.cat),
),

...
 Column of Widgets

return new Column(

crossAxisAlignment: CrossAxisAlignment.start,
○ Add a new Column that children: [
new Text(
will take a series of child cat.name,
style: textTheme.headline.copyWith(color: Colors.white),
Widgets ),
// Location Info
new Padding(
padding: const EdgeInsets.only(top: 16.0),
child: new Text(
cat.description,
style:
textTheme.body1.copyWith(color: Colors.white70, fontSize: 16.0),
),
Note: in order to use ),
textTheme, add the following new Padding(
padding: const EdgeInsets.only(top: 16.0),
at the top in build() child: new Row(
children: [
// Badges
],
var theme = Theme.of(context); ),
var textTheme = theme.textTheme; ),
],
);
Define ‘locationInfo’

○ Create a new locationInfo Widget that will house a small icon and
the Cats location information
var locationInfo = new Row(
children: [
new Icon(
Icons.place,
color: Colors.white,
size: 16.0,
),
new Padding(
padding: const EdgeInsets.only(left: 8.0),
child: new Text(
cat.location,
style: textTheme.subhead.copyWith(color: Colors.white),
),
),
],
);
Circle Badge Widget Function

○ Rather than creating a huge block of IconData and Circle Avatars,

we’ll use a function to create the Widget for our Badges

_createCircleBadge(IconData iconData, Color color) {

return new Padding(
padding: const EdgeInsets.only(left: 8.0),
child: new CircleAvatar(
backgroundColor: color,
child: new Icon(
iconData,
color: Colors.white,
size: 16.0,
),
radius: 16.0,
),
);
}
 return new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Text(
cat.name,
style: textTheme.headline.copyWith(color: Colors.white),
),
○ Update the Column code in new Padding(
padding: const EdgeInsets.only(top: 4.0),
details_body.dart to include child: locationInfo,
),
// Badges
new Padding(
padding: const EdgeInsets.only(top: 16.0),
child: new Text(
▻ locationInfo cat.description,
style:
textTheme.body1.copyWith(color: Colors.white70, fontSize: 16.0),
),
),
▻ _createCircleBadge new Padding(
padding: const EdgeInsets.only(top: 16.0),
references for 3 buttons child: new Row(
children: [
_createCircleBadge(Icons.share, theme.accentColor),
_createCircleBadge(Icons.phone, Colors.white12),
_createCircleBadge(Icons.email, Colors.white12),
],
),
),
],
);
Test the Body

○ You should now be able to

view the Body details for
each cat!