Can't align children of Rows by using the Align Widget and alignment property

Question

I'm having some hard time using Alignments in Flutter. I'm trying to create a disposable card. I can't have the Image centerd and the icon placed on the top right corner.

Widgets Explanation

The Card consists of Columns and each Column has a Row

The x Icon is the first child of the first Row

I wrapped the Icon with Align Widget but it won't move on the right:

Row(children: [
     Align( 
     alignment: Alignment.topRight, 
     child: Icon(Icons.cancel),)
   ]
)

For the owl image i wrapped it inside a Container and used the alignment property to place in the the Center:

Row(children: [
   Container(
      width: 100,
      height: 150,
      alignment: Alignment.center,
      child: Image(
         alignment: Alignment.center,
         image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
            )
       ),
  ]),

Seems like no matter what I try on the layout it just won't move the objects inside the Card

Here is the Card Widget:

class CustomCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Card(
        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Row(children: [
          Align(
            alignment: Alignment.topRight,
            child: Icon(Icons.cancel) ,
          )
         ]
        ),
        SizedBox(
          height: 8,
        ),
        Row(children: [
          Container(
              width: 100,
              height: 150,
              alignment: Alignment.center,
              child: Image(
                alignment: Alignment.center,
                image: NetworkImage(
                    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
              ))
        ]),
      ],
    ));
  }
}

No matter what i try i can't have them placed correctly, have I completely missed the concepts of Align widget and alignment property?

bluenile bluenile · Accepted Answer · 2020-12-12T21:09:50

All you needed to do was set the MainAxisAlignment to center for the Row. Please run the code below.

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: CustomCard(),
      ),
    );
  }
}

class CustomCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Align(
          alignment: Alignment.topRight,
          child: Icon(Icons.cancel),
        ),
        SizedBox(
          height: 8,
        ),
        Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Container(
              width: 100,
              height: 150,
              child: Image(
                image: NetworkImage(
                    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
              ))
        ]),
      ],
    ));
  }
}

Can't align children of Rows by using the Align Widget and alignment property

Widgets Explanation

1 Answers