Question

如何在右侧的RaisedButton中添加图标

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

Answer 1

使用RaisedButton.icon构造函数

      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: () {},
            )),
      ),

Answer 2

我尝试使用RaisedButton.Icon，但这对我来说还不够，因为我通常使用许多设计样式自定义按钮，因此我使用了一些技巧来将文本和图标放置在RaisedButton上。

您可以尝试一下，它为我工作。让我在代码中进行解释。

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

Answer 3

使用RaisedButton.icon：

Doc说：从一对用作按钮的小部件中创建一个填充按钮按钮的图标和标签。

图标和标签排成一行并用12个逻辑填充起始像素，末尾16像素，其中8像素之间。

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

Answer 4

您可以将RaisedButton.icon包装到Directionality小部件中：

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

Answer 5

给孩子一个这样的举起按钮

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

 ),

Answer 6

使用此代码。您可以根据文本长度添加所需的宽度


 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: () {},
      ),
    );

Answer 7

如果您仍然拒绝使用 RaisedButton.Icon 而不是使用普通的 RaisedButton 和 Row 小部件作为子部件

然后您可以在 label 和 icon 属性之间交换，因为它们都带有一个小部件。

像这样：

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

Answer 8

您可以尝试一下，对我来说很好。

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

如何在RaisedButton的右侧添加图标？

8 个答案: