Using a variables information in other classes / Flutter - class

Question

Thank you so much for reading and helping me out.
I'm currently building an app, where the user has to create a Card, which then will be displayed on the homepage inside a list. My problem is that I cant send the information of the two variables which save the user's input (name & birthday date) to the finished Card.
The desired variables which I want to navigate are contentname and contentbirthday.
Here's the part where the user enters the pieces of information:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'constants.dart';
class CardBasic extends StatefulWidget {
#override
_CardBasicState createState() => _CardBasicState();
}
class _CardBasicState extends State<CardBasic> {
#override
Widget build(BuildContext context) {
return SizedBox(
height: MediaQuery.of(context).size.height *
0.58, //<-- set height of the card
child: FirstCardCreation(
//<-- new widget
name: 'Erick Holz',
birthday: '08.12.1998',
),
);
}
}
class FirstCardCreation extends StatelessWidget {
final String name;
final String birthday;
const FirstCardCreation({
Key key,
#required this.name,
#required this.birthday,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Card(
color: Color(0xFFef9a9a),
margin: EdgeInsets.all(8),
elevation: 8,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(32)),
child: Column(
children: <Widget>[
SizedBox(height: 8),
Expanded(
child:
FirstCardContent(contentname: name, contentbirthday: birthday),
)
],
),
);
}
}
class FirstCardContent extends StatelessWidget {
String contentname;
String contentbirthday;
FirstCardContent(
{Key key, #required this.contentname, #required this.contentbirthday})
: super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
style: TextStyle(
color: Colors.black,
),
decoration: kNameInput,
onChanged: (value1) {
contentname = value1;
},
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
style: TextStyle(
color: Colors.black,
),
decoration: kBirthdayInput,
onChanged: (value2) {
contentbirthday = value2;
},
),
),
],
),
);
}
}
Later on, I want the user to add another input, that's why I created a separate finishedCard. But first of all, I would like to be able to create this finished card without the third input for general functionality. (In the future, my App should work like this: User presses the Button 'new' on the homescreen -> gets directed to the card creation, where he/she gives the name and birhtday as an input -> user taps the next button -> gets directed to the next site where the third and last input gets entered -> user presses finish and the user gets redirected to the homescreen, where the finished Card gets displayed inside a list.)
Heres the Code of the finished Card where I want the information of the variables contentname & contentbirthday from above getting stored inside the variables finalname & finalbirthday:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'real_new_card.dart';
import 'real_new_algorithm_card.dart';
class CardFinish extends StatefulWidget {
#override
_CardFinishState createState() => _CardFinishState();
}
class _CardFinishState extends State<CardFinish> {
#override
Widget build(BuildContext context) {
return SizedBox(
height:
MediaQuery.of(context).size.height * 0.5, //<-- set height of the card
child: FinalCardCreation(),
);
}
}
class FinalCardCreation extends StatelessWidget {
final String finalname;
final String finalbirthday;
const FinalCardCreation({
Key key,
#required this.finalname,
#required this.finalbirthday,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Card(
color: Color(0xFFef9a9a),
margin: EdgeInsets.all(8),
elevation: 8,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(32)),
child: Column(
children: <Widget>[
SizedBox(height: 8),
Expanded(
child: FinalCardContent(
name: finalname,
birthday: finalbirthday,
),
)
],
),
);
}
}
class FinalCardContent extends StatelessWidget {
String name;
String birthday;
FinalCardContent({Key key, #required this.name, #required this.birthday})
: super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'$name',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50.0,
color: Colors.black,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'$birthday',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50.0,
color: Colors.black,
),
),
),
],
),
);
}
}
Thank you so much for your help. I hope I formatted everything correctly.
Maybe my general approach is completely false.
If you have a better idea to let the user create a card with this functionality, which than gets displayed on a new card I would be very interested.

Answer 1

I'm sorry but maybe you can show some code that dosen't work. The explanation is in my eyes not quite helpful.
The only thing I noticed is that there are variables missing
child: FinalCardCreation(/*name and birthday here*/);
as you set that these fields are required.