如何在 Flutter 中进行以下按钮设计 [英] How to make a following button design in the flutter

问题描述

感谢开题，我正在学习flutter，我正在学习button，我想在flutter中做如下设计

thanks for opening the question, I am learning the flutter and I am learning about the button, I want to make the following design in the flutter

但我找不到任何可以使用的小部件，我使用过提升按钮中的图标但我无法实现设计.

but am not able to find any widget which can be used, there is something the icon in the elevated button which I have used but I am not able to achieve the design.

使用提升的Button.icon

using the elevatedButton.icon

  return SizedBox(
    width: double.infinity,
    height: 48,
    child: ElevatedButton.icon(
      icon:Icon(
        prefixIcon, // passing from the main widget 
      ),
      onPressed: () => {},
      label: Text(text),
      style: ElevatedButton.styleFrom(
        primary: backgroundColor
      ),
    ),
  );
}
}

推荐答案

试试下面的回答希望对你有帮助

Try to below answer hope its helpful to you

    Container(
        width: 250,
        height: 50,
        margin: const EdgeInsets.all(5),
        child: ElevatedButton(
          onPressed: () {},
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Icon(Icons.login), //use your google image here
              Text('Sign in with Google '),
              Opacity(
                opacity: 0,
                child: Icon(Icons.login),
              )
            ],
          ),
          style: ElevatedButton.styleFrom(
            primary: Colors.red,
          ),
        ),
      ),

你的按钮看起来像这样->

Your Button look like this->

这篇关于如何在 Flutter 中进行以下按钮设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！