sergiandreplace / flutter_planets_tutorial

The Flutter Planets app tutorial with commits per lesson
Apache License 2.0
756 stars 176 forks source link

Bottom overflowed by 2.0 pixels #3

Open youngGriff opened 6 years ago

youngGriff commented 6 years ago

`import 'package:flutter/material.dart'; import 'package:my_flutter_plannets/model/planets.dart';

class PlanetRow extends StatelessWidget {

final Planet planet;

PlanetRow(this.planet);

@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 baseTextStyle = const TextStyle(
    fontFamily: 'Poppins'
);
final regularTextStyle = baseTextStyle.copyWith(
    color: const Color(0xffb6b2df),
    fontSize: 9.0,
    fontWeight: FontWeight.w400
);
final subHeaderTextStyle = regularTextStyle.copyWith(
    fontSize: 12.0
);
final headerTextStyle = baseTextStyle.copyWith(
    color: Colors.white,
    fontSize: 18.0,
    fontWeight: FontWeight.w600
);

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: regularTextStyle),
      ]
  );
}

final planetCardContent = new Container(
  margin: new EdgeInsets.fromLTRB(76.0, 16.0, 16.0, 16.0),
  constraints: new BoxConstraints.expand(),
  child: new Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      new Container(height: 4.0),
      new Text(planet.name, style: headerTextStyle),
      new Container(height: 10.0),
      new Text(planet.location, style: subHeaderTextStyle),
      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: new 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: 16.0,
      horizontal: 24.0,
    ),
    child: new Stack(
      children: <Widget>[
        planetCard,
        planetThumbnail,
      ],
    )
);

} } screenshot_1521020206 `

MDSADABWASIM commented 6 years ago

I've the same problem and people suggest multiple solution but that won't work in this situation, so I solve this by reducing the size of icons (gravity and distance) , and reducing the font size that we use their and that's it.

jadegreenc commented 5 years ago

in my case, I solved modify planetCardContent margin final planetCardContent = new Container( margin: new EdgeInsets.fromLTRB(76.0, 12.0, 16.0, 12.0),

bigbossx commented 5 years ago
return new Container(
    - height: 120.0,
    margin: const EdgeInsets.symmetric(
      vertical: 16.0,
      horizontal: 24.0,
    ),
    child: new Stack(
      children: <Widget>[
        planetCard,
        planetThumbnail,
      ],
    )
);

remove height is also effective