How To Make Round button with text and icon in flutter?

Hello Guys How Are You all? Hope you all are fine. Today I am Coming With New Tutorial For Futter Where You will Learn How To Make a Round button with text and icon in flutter ?. Here I have all possible methods to make a Round button with text and icon in a flutter. So Without wasting your time, Let’s start this article.

button with text and icon in flutter, round button with text and icon in flutter, How To Make Round button with text and icon in flutter

Method 1: Using FlatButton

Here We are using a FlatButton that contains a Column (for showing a text below the icon) or a Row (for text next to the icon), and then having an Icon Widget and a Text widget as children.

Here’s an example:

          child: Container(
            width: 80,
            child: FlatButton(
              onPressed: () => {},
              color: Colors.orange,
              padding: EdgeInsets.all(10.0),
              child: Row(
                // Replace with a Row for horizontal icon + text
                children: <Widget>[Icon(Icons.add), Text("Add")],
              ),
            ),
          ),

Output will be like below.

Full Source Code Of Method 1

import 'package:flutter/material.dart';

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text("FlutterCorner.com"),
        ),
        body: Center(
          child: Container(
            width: 80,
            child: FlatButton(
              onPressed: () => {},
              color: Colors.orange,
              padding: EdgeInsets.all(10.0),
              child: Row(
                // Replace with a Row for horizontal icon + text
                children: <Widget>[Icon(Icons.add), Text("Add")],
              ),
            ),
          ),
        ),
      );
}

Method 2 : Using ClipOvel and Material.

In Method 2 we are using ClipOvel And Material to make button with icon with it. Here’s an example:

        body: Center(
          child: SizedBox.fromSize(
            size: Size(60, 60), // button width and height
            child: ClipOval(
              child: Material(
                color: Colors.red, // button color
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.call), // icon
                    Text("Call"), // text
                  ],
                ),
              ),
            ),
          ),
        ),

Output will be like below.

Full Source Code Of Method 2

import 'package:flutter/material.dart';

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text("FlutterCorner.com"),
        ),
        body: Center(
          child: SizedBox.fromSize(
            size: Size(60, 60), // button width and height
            child: ClipOval(
              child: Material(
                color: Colors.red, // button color
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.call), // icon
                    Text("Call"), // text
                  ],
                ),
              ),
            ),
          ),
        ),
      );
}

Method 3 : Using RaisedButton

Here We are going to use RaisedButton and then we will use Row OR Column for RaisedButton’s Child. Below Is Example.

            child: RaisedButton(
              child: Row(
                children: <Widget>[
                  Text(
                    'Play',
                    style: TextStyle(color: Colors.white),
                  ),
                  Icon(
                    Icons.play_arrow,
                    color: Colors.white,
                  ),
                ],
              ),
            ),

Output Will Be Like Same As Below.

Full Source Code of RaisedButton Is Here Below.

import 'package:flutter/material.dart';

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text("FlutterCorner.com"),
        ),
        body: Center(
          child: Container(
            width: 90.0,
            height: 30.0,
            color: Colors.black,
            child: RaisedButton(
              child: Row(
                children: <Widget>[
                  Text(
                    'Play',
                    style: TextStyle(color: Colors.white),
                  ),
                  Icon(
                    Icons.play_arrow,
                    color: Colors.white,
                  ),
                ],
              ),
            ),
          ),
        ),
      );
}

Method 4 : Using RaisedButton Different Method

Here Is Another Method For RaisedButton. Here’s an example:

            child: RaisedButton(
              onPressed: () {},
              color: Theme.of(context).accentColor,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text(
                    'Finish',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w700,
                      color: Colors.white,
                    ),
                  ),
                  Icon(
                    Icons.arrow_forward,
                    color: Colors.white,
                  )
                ],
              ),
            ),

Output Will Be Like Same As Below.

Full Source Code of Method 4 Is Here Below.

import 'package:flutter/material.dart';

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text("FlutterCorner.com"),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.all(20),
            child: RaisedButton(
              onPressed: () {},
              color: Theme.of(context).accentColor,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text(
                    'Finish',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w700,
                      color: Colors.white,
                    ),
                  ),
                  Icon(
                    Icons.arrow_forward,
                    color: Colors.white,
                  )
                ],
              ),
            ),
          ),
        ),
      );
}

So it’s all About How To Make Round button with text and icon in flutter?. Hope this tutorial helped you a lot. Comment below Your thoughts and your queries. And Also Comment on your suggestion here.

Also Read

Milan Dhameliya is an Information Technology Engineer. By profession, he is a Full Stack developer with knowledge of multiple back-end platforms (e.g., PHP, Node.js, Python) and frontend Flutter frameworks.

Leave a Comment