A FilledButton is a widget in Flutter that creates a button with a solid colored background, following Material Design guidelines. It’s typically used for prominent actions within your app.
Constructor
The constructor of the Filled Button gives an idea of its functionalities and is shown below:
const FilledButton(
{Key? key,
required VoidCallback? onPressed,
VoidCallback? onLongPress,
ValueChanged<bool>? onHover,
ValueChanged<bool>? onFocusChange,
ButtonStyle? style,
FocusNode? focusNode,
bool autofocus = false,
Clip? clipBehavior = Clip.none,
MaterialStatesController? statesController,
required Widget? child,
IconAlignment iconAlignment = IconAlignment.start}
)Parameters
Filled Button offers two important parameters:
1. child: this represents the button’s label.
FilledButton(
child: const Text('Raised Button'),
),2. onPressed: this represents the action to be executed when the button is tapped
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),Properties of Filled Button
- autofocus: gives a boolean value corresponding to the initial focus of the button.
- clipBehaviour: decides whether the content is clipped or not.
- focusNode: represents the focus node of the widget.
- onLongPress: the action to be executed when the button is long pressed by the user.
- iconAlignment:Determines the alignment of the icon within the widgets.
- enabled: gives a boolean value for the activity of the button.
- hashcode: decides the hashcode of the button.
- Key: Controls how one widget replaces another widget in the tree.
- onFocusChanged: a method to be executed on changing the focus of the button.
- onHover: acting to be executed when the user hovers the button.
- statesController:Represents the interactive “state” of this widget in terms of a set of WidgetStates, like WidgetState.pressed and WidgetState.focused.
Methods Provided in an Filled Button
createElement(): Creates a StatefulElement to manage this widget’s location in the tree.
createState(): Creates the mutable state for this widget at a given location in the tree.
debugDescribeChildren(): Returns a list of DiagnosticsNode objects describing this node’s children.
debugFillProperties(): Add additional properties associated with the node.
defaultStyleOf(): Defines the button’s default appearance.
noSuchMethod(): Invoked when a nonexistent method or property is accessed.
themeStyleOf(): Returns the Filled ButtonThemeData.style of the closest Filled ButtonTheme ancestor.
toDiagnosticsNode(): Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
toString(): A string representation of this object.
toStringDeep(): Returns a string representation of this node and its descendants.
toStringShallow(): Returns a one-line detailed description of the object.
toStringShort(): A short, textual description of this widget.
Create FilledButton
Let’s take a look at a basic use of FilledButton:
FilledButton(
onPressed: () {},
child: const Text('Filled Button'),
),Create FilledButton with Icon
In the same way, we can use FilledButton.icon(), as shown below:
FilledButton.icon(
label: Text('Filled Button'),
icon: Icon(Icons.web),
onPressed: () {},
)Create FilledButton with Tonal
In the same way, we can use FilledButton.tonal(), as shown below:
FilledButton.tonal(
onPressed: () {},
child: const Text('Enabled'),
),Create FilledButton with TonalIcon
In the same way, we can use FilledButton.tonalIcon(), as shown below:`
FilledButton.tonalIcon(
onPressed: () {},
child: const Text('Enabled'),
),Implementation
import 'package:flutter/material.dart';
void main() {
runApp(HomeApp());
}
class HomeApp extends StatefulWidget {
HomeApp({Key? key}) : super(key: key);
@override
State<HomeApp> createState() => _HomeAppState();
}
class _HomeAppState extends State<HomeApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text('GeeksforGeeks'),
),
body: const FirstScreen()));
}
}
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: ElevatedButton(
child: Text('Elevated Button'),
style: ElevatedButton.styleFrom(
primary: Colors.green,
// side: BorderSide(color: Colors.yellow, width: 5),
textStyle: const TextStyle(
color: Colors.white, fontSize: 25, fontStyle: FontStyle.normal),
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
shadowColor: Colors.lightBlue,
),
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
),
),
);
}
}
class NewScreen extends StatefulWidget {
const NewScreen({Key? key}) : super(key: key);
@override
State<NewScreen> createState() => _NewScreenState();
}
class _NewScreenState extends State<NewScreen> {
TextEditingController textEditingController = TextEditingController();
@override
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text('New Screen'),
),
body: Center(child: Text('This is your new screen')),
);
}
}
Conclusion
So, in this article, we learned how to use the FilledButton widget. You can change and update this Flutter code according to your requirement. I hope you liked reading this.For more such flutter tutorials follow our blog.Each blog is crafted with love by the team.
Wanna Level up Your Flutter game? Then check out our ebook The Complete Guide to Flutter Developement where we teach you how to build production grade cross platform apps from scratch.Do check it out to completely Master Flutter framework from basic to advanced level.