How can I center Row widget in container Flutter?-CodePudding

I want to center the Row widget in Container but can't do it.

Desire Design

My desire Design look like this : -

but I'm getting this output

My Output : -

Here is my code : -

Container(
  height: Dimensions.height40,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Image.asset("assets/images/g.png", width: Dimensions.width20   5),
        SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
      ],
    ),
  ),
),

SmallText

class SmallText extends StatelessWidget {
  final Color? color;
  final String text;
  final double size;
  final TextAlign? align;

  const SmallText({
    Key? key,
    this.color = const Color(0xffCF1357),
    this.size = 16,
    required this.text, this.align=TextAlign.center,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      textAlign: align,
      style: TextStyle(
          color: color, fontSize: size, fontFamily: 'ROCK'),
    );
  }
}

CodePudding user response：

try this way...

Container(
  height: Dimensions.height40,
  decoration:
      BoxDecoration(borderRadius: BorderRadius.circular(Dimensions.radius10), color: Colors.white),
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: Dimensions.width45),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Image.asset("assets/images/g.png", width: Dimensions.width20   5),
        ),
        SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)

        // if text overflowing
        //  Expanded(child: Text('text', maxLines: 2)),
      ],
    ),
  ),
),

CodePudding user response：

Replace your Row widget

 Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
             Image.asset("assets/images/g.png", width: Dimensions.width20   5),
             SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
     ],
   ),

Row( children: [ Icon(Icons.chevron_right_outlined, color: Colors.red), Expanded( child: Text( "asdfasdfasdfadsfadsf", textAlign: TextAlign.center, style: TextStyle( color: Colors.red, fontSize: 12, fontFamily: 'ROCK'), ), ), ], ),

CodePudding user response：

Replace your Row widget

From

    Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
           Image.asset("assets/images/g.png", width: Dimensions.width20   5),
           SmallText(text: LanguageStringKeys.instance.continueWithGoogle.tr)
       ],
    ),

To

             Row(
                children: [
                  Icon(Icons.chevron_right_outlined, color: Colors.red),
                  Expanded(
                    child: Text(
                      "asdfasdfasdfadsfadsf",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          color: Colors.red, fontSize: 12, fontFamily: 'ROCK'),
                    ),
                  ),
                ],
              ),

CodePudding user response：

Try below code:

ElevatedButton(
      onPressed: () {},
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Image.network(
            'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTffY2_D5YjjG8Mn3NnOFrXG2Piu72Ff5rbyHiyZXFvkWWtE3pLojAwOXpxAbC7PZa0JpU&usqp=CAU',
            height: 40,
          ), //use your google image here
          Text(
            'Sign in with Google',
            style: TextStyle(
              color: Colors.black,
            ),
          ),
          SizedBox()
        ],
      ),
      style: ElevatedButton.styleFrom(
          backgroundColor: Colors.white, fixedSize: const Size(250, 50)),
    ),

Result->