如何在颤动中进行跟随按钮的设计

Question

谢谢你打开这个问题，我正在学习颤动，我正在学习按钮，我想在颤动中做以下设计

​

​

但是我找不到任何可以使用的小工具，有一些图标在提升的按钮，我已经使用，但我无法实现设计。

使用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
      ),
    ),
  );
}
}

Answer 1

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

    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,
          ),
        ),
      ),

您的按钮如下所示->

​

Answer 2

您可以使用下面的代码来实现您想要的小部件：

Container(
    width: 256,
    height: 48,
    margin: const EdgeInsets.all(8),
    child: ElevatedButton(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: const <Widget>[
          Icon(Icons.login), // your google image
          Expanded(child: Center(child: Text('Sign in with Google'))),
        ],
      ),
      style: ElevatedButton.styleFrom(primary: Colors.red),
      onPressed: () {},
    ),
  );

​

​