CODEWITHSUNDEEP
flutter
swathy c s
swathy c s

Reputation: 81

how to add icon at right side of RaisedButton?

How to add icon to RaisedButton at the right side

Padding(
       padding: const EdgeInsets.only(top: 15.0),
          child: new SizedBox(
             width: double.infinity,
             child: new RaisedButton(
             textColor: Colors.white,
             color: coloraccent,
             onPressed: () {},
             child: const Text('UPADATE'),
        )),
       ),

Upvotes: 8

Views: 12829

Answers (9)

aldo
aldo

Reputation: 312

Here is my two buttons, Back and Next

Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          RaisedButton(
            color: const Color(0xFFFFB822), // Color pinkAccent
            child: Row(
              // Add a Row Widget for placing objects.
              mainAxisAlignment: MainAxisAlignment.center, // Center the Widgets.
              mainAxisSize: MainAxisSize.max, // Use all of width in RaisedButton.
              children: <Widget>[
                SizedBox(height: 10, width: 10),
                Icon(
                  Icons.arrow_back_ios, // Send Icon. (Papper Plane Icon)
                  color: Colors.black, // White Color. You can ommit it too if you use textColor property on RaisedButton.
                  size: 18, // 18 pt, same as text.
                ),
                Padding(
                  padding: EdgeInsets.all(5.0), // Give to the text some space.
                  child: Text(
                    "Back",
                    style: TextStyle(
                      fontWeight: FontWeight.w900,
                      color: Colors.black, // You can ommit it if you use textColor in RaisedButton.
                    ),
                  ),
                ),
              ],
            ),
            onPressed: () {},

            /// For enabling the button
          ),
          RaisedButton(
            color: const Color(0xFFFFB822), // Color pinkAccent
            child: Row(
              // Add a Row Widget for placing objects.
              mainAxisAlignment: MainAxisAlignment.center, // Center the Widgets.
              mainAxisSize: MainAxisSize.max, // Use all of width in RaisedButton.
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.all(5.0), // Give to the text some space.
                  child: Text(
                    "Next",
                    style: TextStyle(
                      fontWeight: FontWeight.w900,
                      color: Colors.black, // You can ommit it if you use textColor in RaisedButton.
                    ),
                  ),
                ),
                Icon(
                  Icons.arrow_forward_ios, // Send Icon. (Papper Plane Icon)
                  color: Colors.black, // White Color. You can ommit it too if you use textColor property on RaisedButton.
                  size: 18, // 18 pt, same as text.
                ),
              ],
            ),
            onPressed: () {},

            /// For enabling the button
          ),
        ],
      ),

Upvotes: 0

kingbeencent
kingbeencent

Reputation: 1357

I tried to use RaisedButton.Icon but it was not enough for me, because I usually customize the buttons with many design styles, so I used some techniques for placing text and Icon with RaisedButton.

You can try this, It worked for me. Let me explain in the code.

// Create a Raised Button.
RaisedButton(
    color: Colors.pinkAccent, // Color pinkAccent
    child: Row( // Add a Row Widget for placing objects.
    mainAxisAlignment: MainAxisAlignment.center, // Center the Widgets.
    mainAxisSize: MainAxisSize.max, // Use all of width in RaisedButton.
    children: <Widget>[
        Padding(
          padding: EdgeInsets.all(5.0), // Give to the text some space.
          child: Text(
              "Enviar",
              style: TextStyle(
                fontSize: 18, // 18pt in font.
                color: Colors.white, // You can ommit it if you use textColor in RaisedButton.
              ),
          ),
        ),
        Icon(
          Icons.send, // Send Icon. (Papper Plane Icon)
          color: Colors.white, // White Color. You can ommit it too if you use textColor property on RaisedButton.
          size: 18, // 18 pt, same as text.
        ),
    ],
    ),
    onPressed: () {}, /// For enabling the button
),

Upvotes: 2

Abdelazeem Kuratem
Abdelazeem Kuratem

Reputation: 1706

If you still resist using RaisedButton.Icon instead of using the normal RaisedButton with Row widget as a child

Then you can swap between label and icon attributes because they both take a widget.

Like this:

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

Upvotes: 1

Abbas Jafari
Abbas Jafari

Reputation: 1642

You can just wrap your RaisedButton.icon to the Directionality widget:

                    Directionality(
                      textDirection: TextDirection.rtl,
                      child: RaisedButton.icon(
                        onPressed: () {},
                        color: Colors.deepPurple,
                        icon: Icon(
                          Icons.arrow_drop_down,
                          color: Colors.white,
                        ),
                        label: Text(
                          "Category",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    )

Upvotes: 17

arjun more
arjun more

Reputation: 189

use this code. you can add your required width as per text length 


 Container(
      height: 35.0,
      width: 95,
      child: RaisedButton(
        elevation: 10,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(15.0),
          ),
        ),
        color: Colors.white,
        child: Row(
          children: <Widget>[
            Text('Call', style: TextStyle(color: Colors.black)),
            SizedBox(width: 10),
            Icon(Icons.call),
          ],
        ),
        onPressed: () {},
      ),
    );

Upvotes: 1

Kalpesh Kundanani
Kalpesh Kundanani

Reputation: 5743

Use RaisedButton.icon:

Doc says: Create a filled button from a pair of widgets that serve as the button's icon and label.

The icon and label are arranged in a row and padded by 12 logical pixels at the start, and 16 at the end, with an 8 pixel gap in between.

RaisedButton.icon(
    icon: Icon(Icons. ...), // <-- Icon you want.
    textColor: Colors.white,
    color: Colors.lightBlue,
    label: const Text('UPADATE'), // <-- Your text.
    onPressed: () {},
)),

Upvotes: 1

Arun-
Arun-

Reputation: 865

You can try this out, it works fine for me.

  child: RaisedButton(
                    onPressed: () => navigateToLogin(context),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text("Continue",style: TextStyle(fontSize: 20)),
                        Icon(Icons.navigate_next)                          
                      ],
                    ),

Upvotes: 5

user10539074
user10539074

Reputation:

use RaisedButton.icon constructor

      Padding(
        padding: const EdgeInsets.only(top: 15.0),
        child: SizedBox(
            width: double.infinity,
            child: RaisedButton.icon(
              icon: Icon(Icons.translate),
              textColor: Colors.white,
              color: Colors.lightBlue,
              label: const Text('UPADATE'),
              onPressed: () {},
            )),
      ),

Upvotes: 3

Murat Aslan
Murat Aslan

Reputation: 1580

give a child to raised button like that

Row(
   mainAxisSize: MainAxisSize.max,
   mainAxisAlignment: MainAxisAlignment.spaceBetween
   children: <Widget>[
     Text('some text'),
     Icon(Icons.home),
   ],

 ),

Upvotes: 2

Related Questions