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.
How To Make Round button with text and icon in flutter?
- How To Make Round button with text and icon in flutter?
To Make Round button with text and icon in flutter 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:
- Make Round button with text and icon in flutter
To Make Round button with text and icon in flutter 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:
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,
)
],
),
),
),
),
);
}
Summery
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.
Leave a Reply