i want to make button with icon on flutter-CodePudding

i have a question i want to make button that have icon on it how do i make it?
i have tried using elevated button it seems not really close the button that i wanted

heres the code that i have writted

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

heres 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())