TextButton in Flutter

18-Sep-2024

Learn how to use TextButton in Flutter to create simple flat buttons with customizable actions

You can customize the TextButton's shape  using the style property.
You can use the style property  to define various aspects of the button, such as its shape.
You can  set the shape using the ButtonStyle's Shape property.

There Are Some Common Attributes for TextButton

foregroundColor
Foreground color change
shape
Change Button Shape.
borderRadius
Adjust the radius as needed
padding
Adjust the padding as needed
backgroundColor
Change Background Color

Here's a simple example of using a TextButton in Flutter:

File open lib->main.dart file −



import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
runApp(
MyApp()
);
}
class MyApp extends StatefulWidget{

@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('Button Example',
style:TextStyle(fontSize: 20,color: Colors.white)),
),
body: Center(
child:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: (){

},
child: Text("Button",style: TextStyle(fontSize: 20),),
),
TextButton(
onPressed: (){
},
child: Text("Button",style: TextStyle(fontSize: 20)),

style: TextButton.styleFrom(
foregroundColor: Colors.white,
elevation:1,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0), // Adjust the radius as needed
),
padding: EdgeInsets.only(left: 20,right: 20,top: 5,bottom: 5),
backgroundColor: Colors.blueAccent
),

)
],
),
)

));

}


}





Open Device Manager, run the emulator, and then run the application. Next, check the working output and check the output you declared in your code.


Output:


Comments