How to properly align widgets using flex property in flutter

Question

I'm trying to make a footer and I want everything to appear Centered with even space between these three widgets in the below code.

Container(
      margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 40),
      child: Row(
        children: <Widget>[
          const Expanded(
              flex: 1,
              child: Text(
                'All Right Reserved',
                style: TextStyle(fontSize: 10),
              )),
          Expanded(
            flex: 3,
            child: Row(
              children: <Widget>[
                FooterItem(
                  title: 'Twitter',
                  onTap: () {},
                ),
                FooterItem(
                  title: 'Instagram',
                  onTap: () {},
                ),
                FooterItem(
                  title: 'WhatsApp',
                  onTap: () {},
                ),
              ],
            ),
          ),
          const Expanded(
              flex: 1,
              child: Text(
                'All Right Reserved',
                style: TextStyle(fontSize: 10),
              )),
        ],
      ),
    )

I tried using flex as seen in the above code but it doesn't align at the center and no even space as seen in the below screenshot. How to fix this?

Answer 1

You can remove all Expanded and use mainAxisAlignment in parent Row:

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[]
)