Passare una funzione ad un componente in Flutter

Mattepuffo's logo
Passare una funzione ad un componente in Flutter

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!


Condividi

Commentami!