flutter 创建一个带有 2 个图标的按钮

发布于01月12日

[ Elevated button with icon and arrow1

我可以使用下面的代码创建一个带有图标的按钮

 ElevatedButton.icon(
          icon: Icon(
            Icons.home,
            color: Colors.green,
            size: 30.0,
          ),
          label: Text('Elevated Button'),
          onPressed: () {
            print('Button Pressed');
          },
          style: ElevatedButton.styleFrom(
            shape: new RoundedRectangleBorder(
              borderRadius: new BorderRadius.circular(20.0),
            ),
          ),
        )

但如何将箭头放在按钮的右侧呢？

推荐答案

根据你的共享图像，我已经try 了相同的设计在不同的方式， Select 你的????，你想要try 的方式.

使用ElevatedButton.图标

ElevatedButton.icon(
            icon: const Icon(
              Icons.mail,
              color: Colors.green,
              size: 30.0,
            ),
            label: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [
                Text('Change Email Address'),
                Icon(Icons.arrow_forward_ios)
              ],
            ),
            onPressed: () {
              print('Button Pressed');
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.white,
              foregroundColor: Colors.black,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
                side: const BorderSide(color: Colors.black),
              ),
              fixedSize: const Size(double.infinity, 40),
            ),
          ),

Result Using ElevatedButton.icon ->

使用OutlinedButton.icon

OutlinedButton.icon(
            icon: const Icon(
              Icons.mail,
              color: Colors.green,
              size: 30.0,
            ),
            label: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: const [
                Text(
                  'Change Email Address',
                  style: TextStyle(
                    color: Colors.black,
                  ),
                ),
                Icon(
                  Icons.arrow_forward_ios,
                  color: Colors.grey,
                )
              ],
            ),
            onPressed: () {
              print('Button Pressed');
            },
            style: ElevatedButton.styleFrom(
             side: const BorderSide(color: Colors.black,),
              fixedSize: const Size(double.infinity, 40),
            ),
          ),

Result Using OutlinedButton.icon ->

使用ListTile

 ListTile(
            onTap: () {
              print('Button Pressed');
            },
            visualDensity: const VisualDensity(horizontal: -4,vertical: -4),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
              side: const BorderSide(color: Colors.black),
            ),
            leading: const Icon(Icons.mail,color: Colors.green),
            trailing: const Icon(Icons.arrow_forward_ios),
            title: const Text('Change Email Address'),
          ),

Result Using ListTile ->

使用GestureDetector

 GestureDetector(
            onTap: () {
              print('Button Pressed');
            },
            child: Container(
              padding:const EdgeInsets.all(10),
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.black,
                  width: 1,
                ),
              borderRadius: BorderRadius.circular(10),),
              child: Row(
                children: const [
                  Icon(Icons.mail, color: Colors.green),
                  SizedBox(width: 10,),
                  Text('Change Email Address'),
                  Spacer(),
                  Icon(Icons.arrow_forward_ios),
                ],
              ),
            ),
          ),

Result Using GestureDetector ->

使用墨水井

InkWell(
            onTap: () {
              print('Button Pressed');
            },
            child: Container(
              padding:const EdgeInsets.all(10),
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.black,
                  width: 1,
                ),
              borderRadius: BorderRadius.circular(10),),
              child: Row(
                children: const [
                  Icon(Icons.mail, color: Colors.green),
                  SizedBox(width: 10,),
                  Text('Change Email Address'),
                  Spacer(),
                  Icon(Icons.arrow_forward_ios),
                ],
              ),
            ),
          ),

Result Using InkWell->