Passare una funzione ad un componente in Flutter
Supponiamo di voler creare un componente ElevatedButton da riutilizzare nei nostri widget in Flutter.
Essendo un bottone dovremmo associargli anche una funzione da eseguire all'evento onPressed.
In Dart possiamo passare una intera funzione, o meglio un puntatore ad una funzione, ad un nostro widget come parametro.
Partiamo proprio dal widget custom:
import 'package:flutter/material.dart';
class Test extends StatelessWidget {
final Function()? myHandler;
const Test(this.myHandler);
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: const EdgeInsets.all(50),
child: ElevatedButton(
onPressed: myHandler,
style: ElevatedButton.styleFrom(primary: Colors.green),
child: const Text('Clicca'),
),
);
}
}
Come vedete, al costruttore gli passiamo un oggetto Function; in alternativa possiamo usare anche VoidCallback.
A questo punto nel nostro widget padre:
import 'package:flutter/material.dart';
import 'package:bank_flutter/test.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'BeMyBank',
theme: ThemeData(
primarySwatch: Colors.deepOrange,
),
home: const MyHomePage(title: 'BeMyBank'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _miaFunzione() {
print("OK");
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Test(_miaFunzione),
],
),
),
);
}
}
Enjoy!
dart flutter function voidcallback elevatedbutton onpressed
Commentami!