how to center image on the flutter

user_10941425 0
Viewed 23624

Hello, I'm trying to center my images in the app, but I'm not getting it. What am I doing wrong? How am I going to centralize these images?

InkWell(
    child: new Padding(
      padding: EdgeInsets.only(top: 50),
      child: snapshot.data.Facebook != ""
          ? Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Image.asset(
                    "assets/images/facebook.png",
                    height: 30,
                  ),
                ),
              ],
            )
          : Row(
              children: <Widget>[],
            ),
    ),
    onTap: () async {
      if (await canLaunch(snapshot.data.Facebook)) {
        await launch(snapshot.data.Facebook);
      } else {
        throw 'erro ao tentar acessar o facebook do(a) $snapshot.data.Nome';
      }
    }),

I'm stopped at this

enter image description here

dart flutter
4 Answers

Use mainAxisAlignment to align their child to center, spaceAround, spaceBetween, etc .

and mainAxisSize to provide size of mainAxis .

 InkWell(  
    child: new Padding(  
     padding: EdgeInsets.only(top: 50),  
      child: snapshot.data.Facebook != ""          
      ?      
        Row(
          mainAxisAlignment : MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Align(
              alignment: Alignment.bottomCenter,
              child: Image.asset(
                "assets/images/facebook.png",
                height: 30,
              ),
            ),
          ],
        )
      : Row(
          children: <Widget>[],
        ),
),
onTap: () async {
  if (await canLaunch(snapshot.data.Facebook)) {
    await launch(snapshot.data.Facebook);
  } else {
    throw 'erro ao tentar acessar o facebook do(a) $snapshot.data.Nome';
  }
}),
user_116748200

set image property like this

Row(
    mainAxisAlignment: MainAxisAlignment.center,
  image:DecorationImage(
     fit:BoxFit.fill
     image: AssetImage("images/Ani.png"),
 )
);
user_155037540

To center align the widgets in the Row widget, you can use the mainAxisAlignment property and set it to MainAxisAlignment.center.

Here is an example from your code snippet

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Image.asset("assets/images/facebook.png", height: 30),
      Image.asset("assets/images/instagram.png", height: 30),
      Image.asset("assets/images/linkedin.png", height: 30)
    ],
    ));
user_73494280

You May Also use its property

Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset("asset/images/fb_icon.png", height: 30),
        Image.asset("asset/images/fb_icon.png", height: 30),
        Image.asset("asset/images/fb_icon.png", height: 30)
      ],
    );
user_190628660
Related