I was trying to code widgets, that I could use at any time again. So I created a template for a textbutton and of course I am working with variables for the title and the function, that it should execute onpressed. Here’s my code:

import 'package:flutter/material.dart';

class CustomBoxButton extends StatefulWidget {
  final String title;
  final Function function;

  const CustomBoxButton(
      {super.key, required this.title, required this.function});

  @override
  State<CustomBoxButton> createState() => _CustomBoxButtonState();
}

class _CustomBoxButtonState extends State<CustomBoxButton> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 384.0,
      margin: const EdgeInsets.only(top: 24.0),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(4)),
      child: TextButton(
        onPressed: function,
        style: TextButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          backgroundColor: Colors.deepPurple,
          padding: const EdgeInsets.all(8),
        ),
        child: Text(
          title,
          style: const TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

Now I am getting the error, that my variables ‘title’ and ‘function’ are undefined. I don’t really get it, but I’m also still really new to flutter.

Thank you for your help!

I already tried changing some stuff in the constructor, nothing worked. Also asks ChatGPT a lot, but it wasn’t a big help. I searched through github and stackoverflow, didn’t really find anything.

But I also do not really have a clue what I should search for.

>Solution :

First off, you are defining the values within the widget state:

class CustomBoxButton extends StatefulWidget {
  final String title;
  final Function function;

So, to access it you can prefix with widget

For the text:

 child: Text(
      widget.title,

and for the function:

TextButton(
    onPressed: () => widget.function(),
    style: TextButton.styleFrom(

Complete code:

import 'package:flutter/material.dart';

class CustomBoxButton extends StatefulWidget {
  final String title;
  final Function function;

  const CustomBoxButton(
      {super.key, required this.title, required this.function});

  @override
  State<CustomBoxButton> createState() => _CustomBoxButtonState();
}

class _CustomBoxButtonState extends State<CustomBoxButton> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 384.0,
      margin: const EdgeInsets.only(top: 24.0),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(4)),
      child: TextButton(
        onPressed: () => widget.function(),
        style: TextButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          backgroundColor: Colors.deepPurple,
          padding: const EdgeInsets.all(8),
        ),
        child: Text(
          widget.title,
          style: const TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}