How do I pass a variable to a child widget? - flutter

Question

I am passing a string value `final String userLogin; from another file via Route.
class AutfPasswordWidget extends StatefulWidget {
final String userLogin;
AutfPasswordWidget({Key? key, required this.userLogin}) : super(key: key);
#override
State<AutfPasswordWidget> createState() => _AutfPasswordWidgetState();
}
final iconColor = const Color(0xFF2787F5);
class _AutfPasswordWidgetState extends State<AutfPasswordWidget> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
leading: BackButton(
color: Colors.grey
),
elevation: 0,
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min, // Иконка по центру несмотря на кнопку назад
children: [
Icon(Icons.telegram_sharp, color: iconColor),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 2, vertical: 2)),
Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
],
)),
body: Padding(
padding: const EdgeInsets.all(20),
child: ListView(
children: [
_MainInfoWidget(),
],
),
),
);
}
}
But I need to use the resulting value in another widget 'Use password for $userLogin' , located under it.
class _MainInfoWidget extends StatelessWidget {
const _MainInfoWidget({Key? key,}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.telegram_sharp,
color: iconColor,
size: 64,
),
SizedBox(height: 20),
Text('Password',
style: AppAuthTitleStyle.LinkButton),
SizedBox(height: 20),
Text(
'Use password for $userLogin' ,
style: AppDescribeTittleStyle.LinkButton,
textAlign: TextAlign.center,
),
],
),
);
}
}
How do I pass the value to the desired widget ?

Answer 1

You can pass userLogin to _mainInfoWidget() by accesing the parent variable using widget.userLogin:
_MainInfoWidget(userLogin: widget.userLogin),
Complete example:
class AutfPasswordWidget extends StatefulWidget {
final String userLogin;
AutfPasswordWidget({Key? key, required this.userLogin}) : super(key: key);
#override
State<AutfPasswordWidget> createState() => _AutfPasswordWidgetState();
}
final iconColor = const Color(0xFF2787F5);
class _AutfPasswordWidgetState extends State<AutfPasswordWidget> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
leading: BackButton(color: Colors.grey),
elevation: 0,
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize:
MainAxisSize.min, // Иконка по центру несмотря на кнопку назад
children: [
Icon(Icons.telegram_sharp, color: iconColor),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 2, vertical: 2)),
Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
],
)),
body: Padding(
padding: const EdgeInsets.all(20),
child: ListView(
children: [
_MainInfoWidget(userLogin: widget.userLogin),
],
),
),
);
}
}
class _MainInfoWidget extends StatelessWidget {
final String? userLogin;
const _MainInfoWidget({
this.userLogin,
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.telegram_sharp,
color: iconColor,
size: 64,
),
SizedBox(height: 20),
Text(
'Password',
),
SizedBox(height: 20),
Text(
'Use password for $userLogin',
// style: AppDescribeTittleStyle.LinkButton,
textAlign: TextAlign.center,
),
],
),
);
}
}