Creare un custom widget in Flutter

In Flutter è possibile creare dei widget custom da riutilizzare all'interno delle nostre app.

La cosa può essere molto comoda, in quanto riduce di molto il codice scritto.

In questo articolo vediamo un esempio basico di come creare un widget custom.

Create un file dart dentro la cartella lib; io l'ho chiamato test.dart:

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  final String title;

  const Test(this.title, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
    );
  }
}

Come vedete abbiamo impostato un parametro nel costruttore, che corrisponde al testo da visualizzare; più qualche regole di stile.

A questo punto dobbiamo richiamarlo; questo il mio main.dart:

import 'package:bank_flutter/test.dart';
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(
      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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Test(
              widget.title
            ),
          ],
        ),
      ),
    );
  }
}
import 'package:bank_flutter/test.dart';
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(
      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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Test(
              widget.title
            ),
          ],
        ),
      ),
    );
  }
}

Come vedete in _MyHomePageState abbiamo richiamato il componente passandogli una stringa.

Enjoy!