Flutter - Passing Information to custom Button Widget - flutter

Question

I'm trying to make a Custom Button Widget to reuse it in my code.
Within my page I'm calling the button like this:
import 'package:app/components/MyCustomButton.dart';
[...]
const MyCustomButton(
title: 'Title of the button',
type: 'primary'
),
the complete Source of MyCustomButton is below. The Issue I'm having is when displaying Text that was defined in the MyCustomButton.dart file the button works perfectly fine. Now I don't want to display static text but instead text that I am passing from the screen file (e.g.: title variable)
When changing the static text
FROM TO
-------------------------------------------------------------------------------
const Text( -> const Text(
'Login', -> title,
style: TextStyle( -> style: TextStyle(
color: Colors.white, -> color: Colors.white,
fontSize: 20, -> fontSize: 20,
fontWeight: FontWeight.bold, -> fontWeight: FontWeight.bold,
), -> ),
), -> ),
from 'Login' to title (which I want to pass) the ide throws "Not a constant expression" at me, even if I'm changing it to const title. I'm thankful for any explaination on what I'm missing here and what I'm doing wrong.
Thanks a lot!
import 'package:flutter/material.dart';
class MyCustomButton extends StatelessWidget{
final String title;
final String type;
const MyCustomButton({
super.key,
required this.title,
required this.type,
});
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.fromLTRB(35, 15, 35, 15),
margin: const EdgeInsets.symmetric(horizontal: 20),
decoration: const BoxDecoration(
color: Color.fromRGBO(112, 143, 164, 1),
borderRadius: BorderRadius.all(Radius.circular(4)),
),
child: const Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
);
}
}

Answer 1

have you tried removing const from "const Text"?
child: Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),

Answer 2

You are using super.key . Instead use Key? key.
Also,remove const keyword in your my page.
class MyCustomButton extends StatelessWidget {
final String title;
final String type;
const MyCustomButton({
Key? key,
required this.title,
required this.type,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.fromLTRB(35, 15, 35, 15),
margin: const EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: const Color.fromRGBO(112, 143, 164, 1),
borderRadius: BorderRadius.circular(4),
),
child: Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
);
}
}

Answer 3

Buuton
class MyCustomButton extends StatelessWidget {
final Function() onTap;
final String title;
final String type;
const MyCustomButton({
super.key,
required this.title,
required this.type,
required this.onTap,
});
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.fromLTRB(35, 15, 35, 15),
margin: const EdgeInsets.symmetric(horizontal: 20),
decoration: const BoxDecoration(
color: Color.fromRGBO(112, 143, 164, 1),
borderRadius: BorderRadius.all(Radius.circular(4)),
),
child: const Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
);
}
}
Calling
MyCustomButton(title: "title", type: "type", onTap: (){print("object");}),