Question 77864 in Flutter Question posted in
The official Flutter documentation can be found here.

flutter create a button with 2 icons

[Elevated button with icon and arrow1

I can create a button with an icon using this code

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

but how to put an arrow on the right side of the button?

Tags:

3

Answers


  1. 0

    It seems like you want a ListTile widget, as it has leading/trailing properties:

    enter image description here

     Container(
        margin: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.black,
            width: 1,
          ),
        ),
        child: const ListTile(
          leading: Icon(Icons.mail),
          trailing: Icon(Icons.arrow_forward_ios),
          title: Text('Change Email Address'),
        ),
      )

    You can also use IconButton instead of a regular Icon in this example.

    Login or Signup to reply.
  2. 0

    To add two icons to an elevated button, just wrap your child widget with a row widget. See implementation below:

    ElevatedButton(
  onPressed: () {},
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: const [
      Icon(Icons.home),
      Text('Home'),
      Icon(Icons.navigate_next)
    ],
  ),
),

    Elevated Button with Two Icons

    Login or Signup to reply.
  3. 0

    As per your shared Image I have try same design in Various ways choice is yours 😊which way you want to try.

    Using ElevatedButton.icon

    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 -> image

    Using 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 -> image

    Using 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 -> image3

    Using 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 -> image4

    Using InkWell

    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-> image5

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search