如何更改 FloatingActionButton 扩展中的图标位置

Question

The icon on FloatingActionButton extended is on left, how can i put the icon on right? after the text

floatingActionButton: FloatingActionButton.extended(   
            onPressed: (){},
            label: Text("Next",),
            icon: Icon(Icons.arrow_forward,
            ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat 

Answer 1

There isn't any direct way to do that. But as a workaround, you could just pass a Row widget (Which contains a Text and Icon widgets) to label parameter.

floatingActionButton: FloatingActionButton.extended(
    onPressed: () {},
    label: Row(
      children: <Widget>[Text("Proceed"), Icon(Icons.arrow_forward)],
    ),
    icon: Container(),
  ),

Hope it helps.

Answer 2

I don't think you can do that with FloatingActionButton , but instead you can configure a RaisedButton to look very similar.
Just use it same as you would do it with FloatingActionButton.

floatingActionButton: RaisedButton(
        child:  Container(
          height: 50.0,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
            const SizedBox(width: 16.0),
                   Text('Next', style: TextStyle(color: Colors.white, fontSize: 25),),
                   const SizedBox(width: 8.0),
                   Icon(Icons.arrow_forward, size: 30.0, color: Colors.white,),
                   const SizedBox(width: 20.0),
          ]),
        ),
        color: Colors.blue,
        shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30.0),
                  ),
        onPressed: () {
          print('Do somenthing');
        },

      )

Hope this help.