Flutter text button icon right

by

Flutter TextButton with Icon on the right

In Flutter, you can use the TextButton widget to create a button with text. To display an icon on the right side of the text, you can combine the TextButton with a Row widget and the Icon widget.

Here is an example code snippet:

  
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: TextButton.icon(
            onPressed: () {
              // Add your button click logic here
            },
            icon: Icon(Icons.arrow_forward),
            label: Text('Next'),
            style: TextButton.styleFrom(
              primary: Colors.white,
              backgroundColor: Colors.blue,
              textStyle: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

In this example, we have used the TextButton.icon widget to create a button with an icon on the right side of the text. The TextButton.icon takes an onPressed callback function, an icon, a label, and a style parameter to define the look and feel of the button.

The `onPressed` callback is triggered when the button is pressed. You can add your custom logic inside this callback to perform any action.

The `icon` parameter takes an instance of the Icon widget, which displays the icon on the right side of the text. You can choose any icon from the available icons in Flutter.

The `label` parameter takes an instance of the Text widget, which displays the text of the button.

The `style` parameter is used to customize the appearance of the button. In the example, we have set the primary color of the button to white, the background color to blue, the font size to 16, and the font weight to bold.

Leave a comment