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: