In this tutorial, we’ll learn how to properly use Flutter material button onPressed with the help of an easy Flutter example.
After reading this post, you’ll have a detailed practical knowledge of how to use Flutter material button onPressed with ease.
Outline
- Introduction: Flutter Material Button OnPressed
- Implementing Flutter Material Button OnPressed (Easy Example Code)
- Flutter Material Button OnPressed Implementation Source Code
- Conclusion
Introduction: Flutter Material Button OnPressed
As the name suggests, it’s used to trigger some actions after the material button is clicked by the user. Let’s go through a proper example to demonstrate its usage.
Implementing Flutter Material Button OnPressed (Easy Example Code)
We first have to define a simple Flutter material button widget. Then we will use its required onPressed constructor which takes a function. We can specify any action we want in the body of that function.
To demonstrate how it works, we’ll be using a Flutter snackbar widget inside that function’s body. So whenever the user clicks on the material button, the snackbar widget will appear on the screen. See below code in which this theory is practically implemented.
MaterialButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Material button is pressed')));
},
color: Colors.blue,
textColor: Colors.white,
child: Text('Material button'))
You can see here that after the button was pressed, the onPressed function was triggered and as a result, the snackbar widget was shown on the screen.
You can specify any action in the body of onPressed function, like navigation to some other screen, validation or addition etc.
So this is how we can use the Flutter material button onPressed with ease. Hope you like this post.
Don’t hesitate to ask if you still have any questions related to the implementation of Flutter material button onPressed function. We’d be very glad to answer all your questions.
Flutter Material Button OnPressed Implementation Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
// flutter material button onpressed implementation
child: MaterialButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Material button is pressed')));
},
color: Colors.blue,
textColor: Colors.white,
child: Text('Material button')))));
}
}Conclusion
To conclude this tutorial, hope now you’ve a detailed practical knowledge of how to properly use Flutter material button onPressed. I’d love to have your feedback on this post.
We’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.
You might also like:
How To Easily Pick Video In Flutter [Camera/Gallery]
Design An Amazing Flutter Neumorphic Login Page UI [Free Source Code]
Beautiful Neumorphic Flutter Login UI Page Design [Free Source Code]
Amazing Neumorphic Flutter Login Page UI Design [Free Source Code]
How To Set Flutter Textfield Expand Height [Flutter Easy Guide]
Amazing Neumorphic Flutter Registration Screen UI Design [Free Source Code]
[Solved] Flutter Elevated Button Remove Padding Implementation
Astounding Neumorphic Flutter Login Page UI Design [Free Source Code]
Beautiful Neumorphic Flutter Registration Page Design [Free Source Code]
