Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 625
fallingriptide Avatar asked Mar 06 '19 21:03

fallingriptide


People also ask

How do you align an image to the top left Flutter?

Simply remove the top level Center() widget and your image will be aligned top left.

How do you align left in Flutter?

The Align widget positions the FlutterLogo such that the two points are on top of each other. In this example, the top left of the FlutterLogo will be placed at (24.0, 72.0) - (12.0, 36.0) = (12.0, 36.0) from the top left of the Align widget.

How do you change image position in Flutter?

You can move background image and logo inside a Stack and then use Positioned for placing logo from the vertical position. Save this answer. Show activity on this post. Container( child: Column( mainAxisAlignment: MainAxisAlignment.

How do you add a picture on top of Flutter?

To add image in Flutter app, first of all, create an assets/images folder then add the actual images inside the folder. After this, Add the image path in pubspec. yaml and then display it using the Image. asset() widget.


1 Answers

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,
        ),
      ],
    ),
  );
}
like image 174
Herbert Poul Avatar answered Sep 20 '22 22:09

Herbert Poul