CODEWITHSUNDEEP
dartflutterflutter-layout
fallingriptide
fallingriptide

Reputation: 314

Align an image to top left in Flutter

I am pretty new to flutter, and can't figure out how to align one of my children widgets containing an image. This is what I have tried so far:

@override
Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
    title: Text(widget.username),
    backgroundColor: new Color(0xFF24292E),
  ),
  body: Center(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Image.asset(
          'assets/profile.png', width: 100.0, height: 100.0,
        ),
      ],
    ),
  ),
);
}

The image is staying in the center top of the screen however. How can I move it to the top left relative to the screen? Thanks.

Upvotes: 12

Views: 40620

Answers (1)

Herbert Poul
Herbert Poul

Reputation: 4883

You have centered the column, that's why everything in it is centered. Simply remove the top level Center() widget and your image will be aligned top left.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.username),
      backgroundColor: new Color(0xFF24292E),
    ),
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Image.asset(
          'assets/profile.png', width: 100.0, height: 100.0,
        ),
      ],
    ),
  );
}

Upvotes: 11

Related Questions