CODEWITHSUNDEEP
flutterdart
Thiago Correa
Thiago Correa

Reputation: 164

how to center image on the flutter

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

Upvotes: 3

Views: 41551

Answers (3)

Sonu Saini
Sonu Saini

Reputation: 2054

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';
  }
}),

Upvotes: 7

minimer
minimer

Reputation: 39

set image property like this

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

Upvotes: 3

Mustafa Bhatkar
Mustafa Bhatkar

Reputation: 355

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

Upvotes: 0

Related Questions