Flutter How to align row widget children to left and center-CodePudding

I am trying to create social login buttons like below image. I want to align textbutton icon and name to left. also center the row they are in so that the icon and text align vertically when using multiple text buttons.

expected result:

My Result:

My Code for button:

TextButton(
        onPressed: onTap,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 20),
                width: 30,
                child: Image.asset(
                  icon,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Text(
                buttonName,
                style: kBodyText2,
                textAlign: TextAlign.left,
              ),
            ),
          ],
        ),
        style: TextButton.styleFrom(
          backgroundColor: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(SizeConfig.blockSizeH! * 3),
          ),
        ),
      ),

CodePudding user response：

You should use ListTile() instead. Set title: "Continue with Google". And leading: you can set the logo. The positions will always stay the same no matter how long your title will be, you also have extra options like subtitles and trailing actions. To make it act like a button use onTap: (){}

CodePudding user response：

You can achieve that by using the Expanded widget: Like so:

Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextButton(
    onPressed: (){},
    child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
          flex: 1,
          child: Container(),),
          Expanded(
            flex: 2,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 20),
                width: 30,
                child: Icon(Icons.access_alarm),
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                'test text test',
                textAlign: TextAlign.left,
              ),
            ),
          ),
        ],
    ),
    style: TextButton.styleFrom(
        backgroundColor: Colors.grey,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
    ),
  ),
      ),
      const SizedBox(height: 30),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextButton(
    onPressed: (){},
    child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(flex: 1, child: Container(),),
          Expanded(
            flex: 2,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 20),
                width: 30,
                child: Icon(Icons.access_alarm),
              ),
            ),
          ),
          Expanded(
            flex: 5,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                'test text test test',
                textAlign: TextAlign.left,
              ),
            ),
          ),
        ],
    ),
    style: TextButton.styleFrom(
        backgroundColor: Colors.grey,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
    ),
  ),
      ),