I have a question. I want to make a button that has an icon on it. How should I do it?

I have tried using an ElevatedButton. It does not seem to be really close to the button that I wanted.

Here's the code that I have written:

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    ElevatedButton(
      onPressed: () {},
      child: Padding(
        padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Masuk",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w600,
              ),
            ),
            SizedBox(
              child: Padding(
                padding: EdgeInsets.fromLTRB(
                  10,
                  0,
                  0,
                  0,
                ),
                child: Icon(
                  Icons.arrow_forward,
                  color: Colors.white,
                ),
              ),
            ),

Here's the sample that I wanted to make:

CodePudding user response：

Try this:

SizedBox(
      height: 60,
      child: MaterialButton(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Opacity(
              opacity: 0.0,
              child: CircleAvatar(
                child: Icon(
                  Icons.arrow_forward,
                  color: Colors.white,
                ),
                backgroundColor: Colors.indigo,
              ),
            ),
            Text(
              "MASUK",
              style: TextStyle(color: Colors.white, fontSize: 20.0),
            ),
            CircleAvatar(
              child: Icon(
                Icons.arrow_forward,
                color: Colors.white,
              ),
              backgroundColor: Colors.indigo,
            ),
          ],
        ),
        color: Colors.indigo[400],
        disabledColor: Colors.indigo[400],
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(15),
          ),
        ),
        onPressed: () {},
      ),
    );

CodePudding user response：

Replace the ElevatedButton to Container and put IconButton instead of Icon

CodePudding user response：

You can have a button with an icon using the following code. (Icon will appear on left side)

ElevatedButton.icon(
    icon: const Icon(Icons.add),
    label: const Text("Test"),
    onPressed: (){
        //Function
    },
);
 

You can also create a custom widget and wrap it with InkWell and use the onTap function.

Example:

InkWell(
      onTap: (){
        // function
      },
      child: myWidget())

CodePudding user response：

Try this also: Above answer is also correct.

Container(
          width: 250,
          height: 50,
          decoration: BoxDecoration(
            color: Colors.indigo[400],
            borderRadius: BorderRadius.circular(13),             
          ),
          child: InkWell(
            onTap: () {
              // function
            },
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Opacity(
                  opacity: 0.0,
                  child: Padding(
                    padding: EdgeInsets.all(5),
                    child: CircleAvatar(
                      radius: 15,
                      child: Icon(
                        Icons.arrow_forward,
                        color: Colors.white,
                        size: 15.0,
                      ),
                      backgroundColor: Colors.indigo,
                    ),
                  ),
                ),
                Text(
                  'MASUK',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 14, color: Colors.white),
                ),
                Padding(
                  padding: EdgeInsets.all(5),
                  child: CircleAvatar(
                    radius: 15,
                    child: Icon(
                      Icons.arrow_forward,
                      color: Colors.white,
                      size: 15.0,
                    ),
                    backgroundColor: Colors.indigo,
                  ),
                ),
              ],
            ),
          ),
        ),

CodePudding user response：

A very simple code to make a button like yours is,

            RaisedButton.icon(
                  icon: const Text('UPADATE'),
                  label: Icon(Icons.next_plan),
                  textColor: Colors.white,
                  color: Colors.lightBlue,
                  onPressed: () {},
                ),