如何在 Flutter 中将 TextButton 的图标右对齐？

Question

With this sample code TextButton widget can be rendered with icon on the left side.

TextButton.icon(
  onPressed: onPressed,
  icon: Icon(
    Icons.arrowOpen,
    color: companySelectionColor,
  ),
  label: text,
),

However I want to use exact same widget but render the icon on the right side. Is there any way to render this icon on the right side?

Here is an example of the desired output:

Answer 1

I think as per documentation here<\/a> and as per my knowledge Icon is not right side position but you use using Directionality()<\/strong> widget its solved Just you use ElevetedBtton.icon<\/strong> instead of TextButton.icon<\/strong> and its working correctly and you use Directionality()<\/strong> widget refer below code hope its help to you.

    

     
     

     

       

        
 
 Your screen using ElevetedBtton.icon Widget like ->您的屏幕使用 ElevetedBtton.icon 小部件，例如 -> <\/a>
 
       
 
    

Answer 2

TextButton.icon(
      onPressed:null,
      icon: Text('2022-01-27'),
      label: Icon(Icons.arrow_drop_down_sharp),
    )

Answer 3

Directionality(
                        textDirection: TextDirection.rtl,
                        child: TextButton.icon(
                          onPressed: () {
                            Navigator.pushNamed(context, Routes.checkout);
                          },
                          icon: const Icon(IcoFontIcons.arrowRight),
                          label: const Text(
                            "Chekout",
                            style: TextStyle(color: Colors.blue),
                          ),
                        ),
                      )

Answer 4

You can wrap the widget with Directionality<\/code> widget. This widget can apply the given text direction to child widgets. With text button one can do following:

Directionality(
  textDirection: TextDirection.rtl,
  child: TextButton.icon(
    onPressed: onPressed,
    icon: Icon(
      Icons.arrowOpen,
       color: companySelectionColor,
    ),
    label: text,
  ),
);

Answer 5

You can try using IconButton<\/code> and add Text widget as a child alternatively.

IconButton(
   icon: Icon(Icons.arrowOpen),
   iconSize: 12,
   onPressed: () {},
),